rough first draft of v2!

public/style/main.css

@@ -14,19 +14,84 @@
 }
 
 body {
-    margin: 0;
+    margin: 4em 0 0 0;
     padding: 0;
     background: var(--background);
     color: var(--on-background);
-    font-family: "Monaspace Argon", monospace;
+    font-family: "Lora", serif;
     font-size: 18px;
     scroll-behavior: smooth;
 
     transition: color .2s, background-color .2s;
 }
 
-body.crt #overlay {
-    display: block;
+.fancyheader {
+    width: 100vw;
+    margin: 5em 0 2em 0;
+
+    background-color: var(--background);
+    color: var(--on-background);
+    background-image: radial-gradient(
+        circle at 0% 0%,
+        color-mix(in srgb, var(--primary-dark), transparent 75%),
+        transparent
+    );
+
+    .fancyheader-inner {
+        width: 900px;
+        margin: 0 auto;
+        padding: 2em 0;
+        gap: 1em;
+    }
+
+    span {
+        font-family: "Monaspace Argon", monospace;
+    }
+}
+
+@media screen and (max-width: 980px) {
+    .fancyheader .fancyheader-inner {
+        width: calc(100% - 4em);
+        padding: 2em;
+    }
+}
+
+@media screen and (max-width: 540px) {
+    .fancyheader .fancyheader-inner {
+        flex-direction: column;
+    }
+}
+
+h1 {
+    margin: 0;
+    font-family: "Inter Display", "Inter", sans-serif;
+    font-size: 4em;
+}
+
+.subheader {
+    height: 2em;
+    display: flex;
+    flex-direction: row;
+    gap: 2px;
+    align-items: center;
+
+    .swatch {
+        --colour: #f0f;
+
+        width: .5em;
+        height: .5em;
+
+        background-color: var(--colour);
+        box-shadow: 1px 1px 0 #000;
+
+        &.primary { --colour: var(--primary-dark); }
+        &.secondary { --colour: var(--secondary-dark); }
+        &.tertiary { --colour: var(--tertiary-dark); }
+
+        &:last-of-type {
+            margin-right: .5em;
+        }
+    }
 }
 
 a {
@@ -135,10 +200,6 @@ a#backtotop:hover {
     body {
         font-size: 14px;
     }
-
-    main {
-        margin-top: 4rem;
-    }
 }
 
 
@@ -164,9 +225,3 @@ a#backtotop:hover {
         filter: invert(.9);
     }
 }
-
-@media (prefers-color-scheme: dark) {
-    body.crt {
-        text-shadow: 0 0 3em;
-    }
-}