clean up styling, redo navbar, redo settings

_includes/styles/settings.css

@@ -0,0 +1,67 @@
+:root:has(input[type="checkbox"]#nav-settings-menu:checked) {
+    settings-area {
+        opacity: 1;
+        transition: opacity .3s, scale .3s, visibility .3s;
+        visibility: visible;
+
+        settings-model {
+            scale: 1;
+        }
+    }
+}
+
+settings-area {
+    /* inital state for animations */
+    opacity: 0;
+    transform-origin: center;
+    transition: opacity .3s, scale .3s, visibility .3s;
+    visibility: hidden;
+
+    align-items: center;
+    background: linear-gradient(#00000000, #121418);
+    display: flex;
+    inset: 0;
+    justify-content: center;
+    overflow-x: hidden;
+    overflow-y: scroll;
+    position: fixed;
+    top: 3rem;
+    z-index: 999;
+
+    settings-model {
+        background: var(--background);
+        border-radius: .4rem;
+        outline: .13rem solid var(--border);
+        padding: .6rem;
+        position: static;
+        scale: .5;
+        transition: .2s;
+        width: 40rem;
+
+        &:hover {
+            outline-color: var(--accent);
+        }
+
+        .container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1.5rem;
+
+            settings-section {
+                margin-right: auto;
+            }
+        }
+    }
+
+    @media screen and (max-width: 40rem) {
+        settings-model {
+            border-radius: 0;
+        }
+    }
+
+    @media screen and (max-width: 28.8rem) {
+        settings-model {
+            margin-top: 5rem;
+        }
+    }
+}