dark mode

main.css

@@ -32,19 +32,33 @@
 :root {
     --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
     --font-h: "heonian", "Helvatica Neue", Helvetica, Arial, sans-serif;
-    --nice-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+    --fg: rgb(0,0,0);
+    --bg: rgb(255,255,255);
+    --grey: rgb(152, 152, 152);
+    --darkgrey: rgb(100, 100, 100);
+    --link: rgb(27 120 151);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --fg: rgb(255,255,255);
+        --bg: rgb(0,0,0);
         --grey: rgb(226, 226, 226);
-    --darkgrey: rgb(150, 150, 150);
+        --darkgrey: rgb(215, 215, 215);
+        --link: rgb(27 120 151);
+    }
 }
 
 body {
     margin: 0;
     padding: 0;
     font-family: var(--font);
+    color: var(--fg);
+    background-color: var(--bg);
 }
 
 a {
-    color: rgb(27 120 151);
+    color: var(--link);
     text-decoration: none;
 }
 
@@ -100,6 +114,8 @@ header input {
     font-weight: 100;
     transition: border-color 0.3s;
     width: calc(100% - 52px - 24px);
+    background-color: var(--bg);
+    color: var(--fg);
 }
 
 header input:focus {
@@ -145,7 +161,7 @@ main {
     opacity: 0;
     max-width: 600px;
     margin: auto;
-    margin-top: 1rem;
+    margin-top: calc(1rem + 24px);
     padding-left: 1rem;
     padding-right: 1rem;
 }
@@ -168,6 +184,10 @@ main {
     border-bottom: 1px solid var(--darkgrey);
 }
 
+.result:first-child {
+    padding-top: 0;
+}
+
 .result-meaning {
     padding-bottom: 8px;
 }