wip header

static/style.css

@@ -1,3 +1,76 @@
+:root {
+  --lavender: #cdb4db;
+  --light-pink: #ffc8dd;
+  --pink: #ffafcc;
+  --light-blue: #bde0fe;
+  --blue: #a2d2ff;
+  --darker-pink: #ff75a7;
+  --darkerer-pink: #ff4287;
+}
+
 body {
-  background-color: crimson;
+  background-image: url(assets/images/tiledbgpink.webp);
+  background-size: cover;
+  background-position: center;
+  height: 100lvh;
+  width: 100lvw;
+  overflow: auto;
+  font-family: "DotGothic16", sans-serif;
+
+  main {
+    padding-top: 3.5rem;
+  }
+}
+
+/* Navbar */
+navbar {
+  font-family: "VT323", monospace;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100svw;
+  height: 3.5rem;
+  background-color: #c0c0c0;
+  border-bottom: 2px solid #000;
+
+  navbar-content {
+    display: flex;
+    gap: 1rem;
+
+    label {
+      cursor: pointer;
+      padding: 4px 8px;
+      border: 2px solid;
+      border-color: #ffffff #808080 #808080 #ffffff;
+      background: #c0c0c0;
+
+      &:has(input:checked) {
+        background: #ff75a7;
+        color: #ffffff;
+        border-color: #808080 #ffffff #ffffff #808080;
+      }
+
+      &:active {
+        border-color: #808080 #ffffff #ffffff #808080;
+        padding: 5px 7px 3px 9px;
+      }
+
+      &:hover {
+        background: #0004;
+      }
+    }
+
+    input {
+      opacity: 0;
+      position: absolute;
+      pointer-events: none;
+    }
+
+    & a {
+      text-decoration: none;
+      color: inherit;
+    }
+  }
+
+
 }