diff --git a/src/assets/css/styles.scss b/src/assets/css/styles.scss
index c623c52..fefefbe 100644
--- a/src/assets/css/styles.scss
+++ b/src/assets/css/styles.scss
@@ -3,11 +3,12 @@
     --light-2: #ddd;
     --light-3: #fed;
     --dark-1: #333;
-    --dark-2: #123;
+    --dark-2: #212121;
     --light-transparent-1: rgba(125,125,125, 0.75);
     --dark-transparent-1: rgba(200,195,190,0.15);
 
     --color-1: #5bf;
+    --color-2: #4396cd;
 
     --background-color: var(--light-1);
     --text-color: var(--dark-1);
@@ -21,7 +22,8 @@
         --text-color: var(--light-2);
         --link-color: var(--color-1);
         --link-focus: var(--light-3);
-
+    }
+    body {
         a{color:var(--link-color);}
         a:focus{outline-color:var(--link-focus);}
     }
@@ -32,15 +34,17 @@ body{
     background-color: var(--background-color);
     font-size: 18px;
     font: 1.2rem/1.5 Century Gothic, sans-serif;
-    max-width: 600px;
-    max-width: 55ch;
-    margin: 0 auto;
-    padding: 2.5rem 1.75rem;
-}
-header{
-    outline: 2px solid var(--light-2);
-    outline-offset: 1rem;
+    margin: 0;
+    padding: 0;
+    // max-width: 600px;
+    // max-width: 55ch;
+    // margin: 0 auto;
+    // padding: 2.5rem 1.75rem;
 }
+// header{
+//     outline: 2px solid var(--light-2);
+//     outline-offset: 1rem;
+// }
 h1,h2,h3,h4,h5,h6{
     line-height: 1.2; 
     font-family: Arial, serif;
@@ -107,4 +111,90 @@ dt:target{
     color: var(--text-color);
     padding: .2rem .4rem;
     line-height: 1;
+}
+
+/* Body */
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+/* Header */
+header {
+    display: flex;
+    justify-content: space-between;
+    padding: .4rem 1rem;
+
+    nav {
+        padding: 0 1rem;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: flex;
+        flex-wrap: wrap;
+        gap: .6rem;
+
+        li {
+            padding: .6rem .4rem;
+        }
+
+        a {
+            color: var(--text-color);
+            text-decoration: none;
+            border-bottom: 2px solid var(--link-color);
+            padding-bottom: .1rem;
+
+            &:focus, &:hover {
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+
+footer {
+    display: flex;
+    justify-content: center;
+    padding: .4rem 1rem;
+    margin: 0;
+
+    nav {
+        padding: 0 1rem;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style-type: none;
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: .6rem;
+
+        li {
+            padding: .6rem .4rem;
+        }
+
+        a {
+            color: var(--text-color);
+            text-decoration: none;
+            border-bottom: 2px solid var(--link-color);
+            padding-bottom: .1rem;
+
+            &:focus, &:hover {
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+
+
+/* Main */
+main {
+    max-width: 600px;
+    max-width: 55ch;
+    margin: 0 auto;
+    padding: 2.5rem 1.75rem;
+    flex: auto;
 }
\ No newline at end of file