diff --git a/static/styles/root.css b/static/styles/root.css
index 6b6481a..40291f3 100644
--- a/static/styles/root.css
+++ b/static/styles/root.css
@@ -12,7 +12,7 @@
     --header-border-color: var(--separator-color);
     --footer-border-color: var(--separator-color);
 
-    --box-shadow-color: rgba(230, 230, 230, 0.5);
+    --box-shadow-color: rgba(230, 230, 230, 0.8);
     --header-box-shadow-color: var(--box-shadow-color);
 
     --font-family-body: Verdana, Helvetica, sans-serif;
@@ -34,6 +34,7 @@
     :root {
         --background-color: #000;
         --foreground-color: #fff;
+        --box-shadow-color: rgba(25, 25, 25, 0.8);
 
         --twitter-icon: url(/icons/twitter-dark.svg);
         --github-icon: url(/icons/github-dark.svg);
@@ -182,11 +183,26 @@ h1.site * { color: inherit; }
 
 header.site {
     display: flex;
-    position: fixed;
-    top: 0;
     left: 0;
+    position: fixed;
+    top: 0.5rem;
+    visibility: hidden;
     width: 100%;
 }
+header.site.visible {
+    visibility: visible;
+}
+header.site.animated {
+    animation: site-header-slide-in var(--transition-duration) ease-out;
+}
+@keyframes site-header-slide-in {
+    from {
+        top: -200px;
+    }
+    to {
+        top: 0.5rem;
+    }
+}
 
 header.site h1 {
     font-family: var(--font-family-site-heading);
@@ -198,7 +214,22 @@ header.site .grid {
     display: grid;
     gap: 0.5em;
     grid-template-columns: max-content auto max-content;
+    grid-template-rows: max-content;
+    grid-template-areas:
+        "title menu social";
     max-width: var(--content-width);
+    width: var(--content-width);
+}
+@media (max-width: 450px) {
+    header.site .grid {
+        grid-template-columns: repeat(2, max-content);
+        grid-template-rows: repeat(2, max-content);
+        grid-template-areas:
+            "title social"
+            "menu menu";
+        max-width: var(--content-width);
+        width: inherit;
+    }
 }
 
 header.site .platter {
@@ -207,10 +238,12 @@ header.site .platter {
 }
 
 header.site .grid nav:first-of-type {
+    grid-area: menu;
     justify-content: start;
 }
 
 header.site .grid nav:last-of-type {
+    grid-area: social;
     justify-content: end;
 }