finished pages
diff --git a/styles/globals.css b/styles/globals.css
index 1ddc94c..42628a9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,6 +2,10 @@
   padding: 0;
   margin: 0;
 
+  overflow-x: hidden;
+}
+
+html {
   --card-background-color: rgba(255, 255, 255, 0.65);
   --card-text-color: #424242;
   --card-overlay-color: rgba(0, 0, 0, 0);
@@ -9,20 +13,44 @@
   --page-background: #ffffff;
   --link-color: #6576CC;
   --hint-color: #f1f1f1;
-  /* --card-background-color: rgba(0, 0, 0, 0.65);
+  
+  background-color: var(--page-background);
+}
+
+@media (prefers-color-scheme: dark) {
+  html {
+    --card-background-color: rgba(0, 0, 0, 0.65);
+    --card-text-color: #ffffff;
+    --card-overlay-filter: brightness(0.75);
+    --card-filter: drop-shadow(0px 0px 5px #42424280);
+    --page-background: #252525;
+    --link-color: #6576CC;
+    --hint-color: #101010;
+  }
+}
+
+
+.light {
+  --card-background-color: rgba(255, 255, 255, 0.65);
+  --card-text-color: #424242;
+  --card-overlay-color: rgba(0, 0, 0, 0);
+  --card-filter: drop-shadow(0px 0px 5px #00000080);
+  --page-background: #ffffff;
+  --link-color: #6576CC;
+  --hint-color: #f1f1f1;
+}
+
+.dark {
+  --card-background-color: rgba(0, 0, 0, 0.65);
   --card-text-color: #ffffff;
   --card-overlay-filter: brightness(0.75);
   --card-filter: drop-shadow(0px 0px 5px #42424280);
   --page-background: #252525;
   --link-color: #6576CC;
-  --hint-color: #10;
-  */
-
-  background-color: var(--page-background);
-
-  overflow-x: hidden;
+  --hint-color: #101010;
 }
 
+
 a {
   text-decoration: none;
   transition: 0.5s ease-in-out;