themes + begin user pages

css/main.css

@@ -13,7 +13,7 @@ html,
 body {
     /* height: 100vh; */
     width: 100vw;
-    color: white;
+    color: var(--text-color);
     background-color: black;
 }
 
@@ -69,6 +69,39 @@ p {
     font-size: 16px;
     margin: 2px;
 }
+a {
+  color: var(--text-color);
+}
 img {
 	image-rendering: pixelated;
+}
+select,
+::picker(select) {
+  appearance: base-select;
+}
+select {
+    padding: 8px;
+    background-color: color-mix(in srgb, var(--color-4) 30%, #00000000 70%);
+    transition-duration: 0.25s;
+}
+select:hover,
+select:focus {
+  background: color-mix(in srgb, var(--color-3) 60%, #00000000 40%);
+}
+::picker(select) {
+  border: none;
+  border-radius: 8px;
+}
+option {
+  display: flex;
+  background: color-mix(in srgb, var(--color-3) 30%, var(--color-4) 60%);
+  padding: 2px;
+  transition: 0.25s;
+  color: var(--text-color)
+}
+option:hover {
+  background: color-mix(in srgb, var(--color-2) 40%, var(--color-4) 50%);
+}
+option:focus {
+  background: color-mix(in srgb, var(--color-2) 60%, var(--color-4) 40%);
 }