✨ feat(css): support light mode

style.css

@@ -1,16 +1,40 @@
 :root {
-	--font: "Cartograph CF";
+  --base: #191724;
-	--bgcolor: #1f1d2e;
+  --surface: #1f1d2e;
-	--linkcolor: #e0def4;
+  --overlay: #26233a;
+  --text: #e0def4;
+  --love: #eb6f92;
+  --gold: #f6c177;
+  --rose: #ebbcba;
+  --pine: #31748f;
+  --foam: #9ccfd8;
+  --iris: #c4a7e7;
+
+  @media (prefers-color-scheme: light) {
+    --base: #faf4ed;
+    --surface: #fffaf3;
+    --overlay: #f2e9e1;
+    --text: #575279;
+    --love: #b4637a;
+    --gold: #ea9d34;
+    --rose: #d7827e;
+    --pine: #286983;
+    --foam: #56949f;
+    --iris: #907aa9;
+  }
+
+  --font: "FairiesevkaSans Nerd Font Propo";
+  --bgcolor: var(--surface);
+  --linkcolor: var(--text);
 }
 
 /*-----------------------------------------------------------*/
 input {
   height: inherit;
   width: 680px;
-    background: #26233a;
+  background: var(--overlay);
-    color: #ebbcba;
+  color: var(--rose);
-    font: "Cartograph CF";
+  font: var(--font);
   font-weight: mono;
   line-height: 1.8em;
   box-shadow: 1px 1px 3px #000000;
@@ -21,14 +45,14 @@ input {
   padding: 7px 14px;
   font-size: 18;
   grid-column: 1 / -1;
-    margin: 0px 0px 30px 0px;;
+  margin: 0px 0px 30px 0px;
 }
 body {
   /*
 	background-image: url('../background/bg.jpg');
 	background-repeat : no-repeat;
 */
-	background-color: #191724;
+  background-color: var(--base);
   background-size: cover;
 }
 
@@ -69,18 +93,22 @@ a {
   font-size: 1rem;
   text-decoration: none;
   outline: none;
-	transition: .2s;
+  transition: 0.2s;
 }
 
 a:hover {
-	color: #9ccfd8;
+  color: var(--foam);
 }
 
 .time {
-    font-family: "Cartograph CF"; monospace;
+  font-family: var(--font), monospace;
   font-weight: mono;
   font-size: 5.5rem;
   margin: 50px 0px 50px 0px;
   color: var(--linkcolor);
-	text-shadow: -5px 5px 0px #eb6f92, -10px 10px #f6c177, -15px 15px 0px #C3A5E6, -20px 20px 0px #31748f;
+  text-shadow:
+    -5px 5px 0px var(--love),
+    -10px 10px var(--gold),
+    -15px 15px 0px var(--iris),
+    -20px 20px 0px var(--pine);
 }