diff --git a/src/css.css b/src/css.css
index cc77def..2a1f3c6 100644
--- a/src/css.css
+++ b/src/css.css
@@ -29,24 +29,24 @@
 }
 
 :root {
-  --bg-color: #ecdfec;
-  --font-color: #333333;
-  --code-border-color: #1a1a1a;
-  --link-color: #2b58de;
-  --link-color-visited: #6047eb;
-  --header-bg-color: #E1CFE1;
-  --header-border-color: #CDB0CD;
-  --details-bg-color: #F5EFF5;
+  --bg-color:              hsl(300  25%  90%);
+  --font-color:            hsl(  0   0%  20%);
+  --code-border-color:     hsl(  0   0%  10%);
+  --link-color:            hsl(225  73%  52%);
+  --link-color-visited:    hsl(249  80%  60%);
+  --header-bg-color:       hsl(300  23%  85%);
+  --header-border-color:   hsl(300  22%  75%);
+  --details-bg-color:      hsl(300  25%  95%);
 
   @media (prefers-color-scheme: dark) {
-    --bg-color: #1f131f;
-    --font-color: #cccccc;
-    --code-border-color: #333333;
-    --link-color: #577AE4;
-    --link-color-visited: #8775EF;
-    --header-bg-color: #2F1D2F;
-    --header-border-color: #4D314D;
-    --details-bg-color: #0F090F;
+    --bg-color:            hsl(300  25%  10%);
+    --font-color:          hsl(  0   0%  80%);
+    --code-border-color:   hsl(  0   0%  20%);
+    --link-color:          hsl(225  73%  62%);
+    --link-color-visited:  hsl(249  80%  70%);
+    --header-bg-color:     hsl(300  23%  15%);
+    --header-border-color: hsl(300  22%  25%);
+    --details-bg-color:    hsl(300  25%   5%);
   }
 }
 
@@ -65,8 +65,8 @@ p, ul, nav, code {
 }
 
 code {
-  background-color: #1a1a1a;
-  color: #e6e6e6;
+  background-color: hsl(0 0% 10%);
+  color: hsl(0 0% 90%);
   border: 5px solid var(--code-border-color);
   overflow: scroll;
   text-wrap: nowrap;