added styling to header and footer

src/App.css

@@ -1,6 +1,18 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
+* {
+  margin: 0;
+  box-sizing: border-box;
+  font-family: monospace;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  height: 100vh;
+}
+
+#root {
+  color: green;
+  height: 100%;
 }

src/components/Content.jsx

@@ -1,6 +1,7 @@
 /* ----- Project Imports ----- */
 import Details from "@/components/Details.jsx";
 import Projects from "@/components/Projects.jsx"
+import "@/styles/content.css";
 
 function Content() {
   return (

src/components/Footer.jsx

@@ -1,11 +1,11 @@
 /* ----- Project Imports ----- */
-
+import "@/styles/footer.css"
 
 
 function Footer() {
   return (
-    <footer>
-    <p>footer stuff rn </p>
+    <footer className="project-footer">
+    <p className="footer-text">© paul hughes</p>
     </footer>
   );
 };

src/components/Header.jsx

@@ -1,11 +1,11 @@
 /* ----- Project Imports ----- */
-
+import "@/styles/header.css";
 
 
 function Header() {
   return (
-    <header>
-    <p>This is some header stuff rn </p>
+    <header className="project-header">
+    <h1><a href="https://paulus.casa">paulus.casa</a></h1>
     </header>
   );
 };

src/styles/content.css

@@ -0,0 +1,5 @@
+.contentContainer {
+  display: flex;
+  background: linear-gradient(109.6deg, rgb(0, 0, 0) 11.2%, rgb(11, 132, 145) 91.1%);
+  min-height: 100%;
+}

src/styles/footer.css

@@ -0,0 +1,16 @@
+.project-footer {
+  display: block;
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  background: linear-gradient(to right, #434343 0%, black 100%);
+  height: 3rem;
+  width: 100%;
+}
+
+.footer-text {
+  color: white;
+  font-size: 1rem;
+  padding: 1rem 0.5rem;
+  text-transform: capitalize;
+}

src/styles/header.css

@@ -0,0 +1,36 @@
+.project-header {
+  all: initial;
+}
+
+.project-header * {
+  all: unset;
+}
+
+h1 {
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+}
+
+.project-header {
+  display: block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: linear-gradient(to right, #434343 0%, black 100%);
+  height: 3rem;
+  width: 100%;
+}
+
+.project-header h1 {
+  padding: 0.5rem;
+  font-size: 2rem;
+  text-align: left;
+}
+
+.project-header a, a:hover, a:visited, a:active {
+  color: white;
+  text-decoration: none;
+}
+