overhaul css + minor edits

static/main.css

@@ -1,3 +1,19 @@
+/*
+Hey, fair warning, I have no idea what I'm doing with CSS.
+This is just cobbled together from a bunch of searching around.
+Expect a mess!
+
+Not AI though, just me! :3
+ */
+
+:root {
+    --color-accent-1: #af8cff;
+    --color-accent-2: #77aef2;
+
+    --color-note: var(--color-accent-1);
+    --color-warning: #ed9a5f;
+    --color-important: #f279ad;
+}
 
 @font-face {
     font-family: "JetBrains Mono";
@@ -5,7 +21,7 @@
 }
 
 body {
-    background-color: #0a0a0a;
+    background-color: hsl(from var(--color-accent-1) h 25% 8%);
     color: #fafafa;
 
     max-width: clamp(600px, 35%, 800px);
@@ -20,30 +36,57 @@ body {
     justify-content: flex-start;
 }
 
-:is(h1, h2, h3) {
-    font-family: "JetBrains Mono", monospace;
-    color: #8aadf4;
-}
-:is(a:link, a:visited) {
-    color: #91d7e3;
-}
-a:hover {
-    color: #8eeacd;
-}
-
 header {
     font-family: "JetBrains Mono", monospace;
+    padding-top: 15px;
 
-    padding: 10px;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    flex-wrap: wrap;
+
+    p {
+        display: inline-block;
+        margin: 4px auto 0 0;
+
+        font-family: "JetBrains Mono", monospace;
+        color: var(--color-accent-1);
+    }
 
     nav {
-        display: flex;
-        flex-direction: row;
-        justify-content: flex-end;
+        --color: white;
+
+        :nth-child(1) {
+            --color: #74cded;
+        }
+        :nth-child(2) {
+            --color: #af8cff;
+        }
+        :nth-child(3) {
+            --color: #f279ad;
+        }
+        :nth-child(4) {
+            --color: #ed9a5f;
+        }
+
+        a:link, a:visited {
+            color: black;
+            text-decoration: none;
+            font-weight: bold;
+        }
+
+        a:hover {
+
+        }
+
         a {
-            padding-left: 4px;
-            padding-right: 4px;
-            color: #8aadf4;
+            display: inline-block;
+            padding: 0 4px 0 4px;
+
+            background-color: var(--color);
+            border: 2px solid hsl(from var(--color) h s max(calc(l - 25), 25));
+            border-radius: 4px;
         }
     }
 }
@@ -60,51 +103,57 @@ footer {
         padding: 5px;
     }
 
-    hr {
-        border: 2px dotted #89b4fa
-    }
-
     text-align: center;
     font-size: 14px;
     font-family: "JetBrains Mono", monospace;
 }
 
-.insert-note {
+
+.content {
+    h1, h2, h3 {
+        font-family: "JetBrains Mono", monospace;
+        color: var(--color-accent-1);
+    }
+
+    .subtitle {
+        font-family: "JetBrains Mono", monospace;
+        color: var(--color-accent-2)
+    }
+
+    a:link, a:visited {
+        color: var(--color-accent-2);
+    }
+
+    a:hover {
+        color: hsl(from var(--color-accent-2) h s 85%);
+    }
+}
+
+.insert-note, .insert-important, .insert-warning {
     border-radius: 5px;
     border-style: solid;
-    border-color: #8aadf4;
-    background-color: #242e42;
-
     padding: 2px 8px 2px 15px;
 }
 
+.insert-note {
+    border-color: var(--color-note);
+    background-color: hsl(from var(--color-note) h 35% 15%);
+}
+
 .insert-warning {
-    border-radius: 5px;
-    border-style: solid;
-    border-color: #e71853;
-    background-color: #42242c;
-
-    padding: 2px 8px 2px 15px;
+    border-color: var(--color-warning);
+    background-color: hsl(from var(--color-warning) h 35% 15%);
 }
 
 .insert-important {
-    border-radius: 5px;
-    border-style: solid;
-    border-color: #f5640a;
-    background-color: #32241b;
-
-    padding: 2px 8px 2px 15px;
-}
-
-.subtitle {
-    font-family: "JetBrains Mono", monospace;
-    color: #8bd5ca
+    border-color: var(--color-important);
+    background-color: hsl(from var(--color-important) h 35% 15%);
 }
 
 
 blockquote {
     border-left-width: 4px;
-    border-left-color: #8aadf4;
+    border-left-color: var(--color-accent-1);
     border-left-style: solid;
     padding-left: 10px;
     margin-left: 20px;
@@ -126,17 +175,6 @@ figcaption {
     margin: 5px auto;
 }
 
-#new-site-warning {
-    margin-top: 10px;
-
-    border-radius: 5px;
-    border-style: solid;
-    border-color: #e71853;
-    background-color: #42242c;
-
-    padding: 8px 8px 8px 15px;
-}
-
 /*
 Suggested css snippet for making code blocks suck less
 see https://www.getzola.org/documentation/content/syntax-highlighting/