diff --git a/style.css b/style.css
index a59cbee..f4755a1 100644
--- a/style.css
+++ b/style.css
@@ -1,18 +1,15 @@
 @import url("inter/inter.css");
 @import url("navbar.css");
 
-html *
-{
-   font-family: Inter, Cantarell, sans-serif;
+:root {
+  --white: #fff;
+  --black: #000;
 }
 
-p {
-  font-size: 11pt;
-}
+html * {font-family: Inter, Cantarell, sans-serif;}
+p {font-size: 11pt;}
+h1 {margin-top: 3vh;}
 
-h1 {
-  margin-top: 3vh;
-}
 .centerscreen {
   height: 100vh;
   display: flex;
@@ -87,7 +84,7 @@ h1 {
   height: 44px;
   border-radius: 22px;
   background-color: rgba(53, 132, 228, 1);
-  color: white;
+  color: var(--white);
   text-decoration: none;
   font-weight: bold;
   display: flex;
@@ -108,12 +105,10 @@ h1 {
   margin-bottom: 0.25cm;
   transition-duration: 0.2s;
   background-color: rgba(53, 132, 228, 1);
-  color: white;
+  color: var(--white);
 }
 
-.gtk-button:hover {
-  background-color: rgba(53, 132, 228, 0.9);
-}
+.gtk-button:hover {background-color: rgba(53, 132, 228, 0.9);}
 
 .itemcard {
   display: grid;
@@ -158,9 +153,7 @@ h1 {
   min-height: 1.5cm;
 }
 
-.separator {
-  height: 1px;
-}
+.separator {height: 1px;}
 
 .emojidecorations {
   font-size: 16pt;
@@ -183,119 +176,31 @@ h1 {
 
 /* For phone screens */
 @media only screen and (max-width: 750px) {
-  h1 {
-    margin-top: 8vh;
-  }
+  h1 {margin-top: 8vh;}
 }
 
 @media (prefers-color-scheme: light) {
-
-  body {
-    background-color: #fafafa;
-  }
-
-  .logo {
-    color: #000;
-  }
-
-  .grid-container {
-    color: #000000;
-  }
-
-  .list {
-    background-color: #ffffff;
-  }
-
-  .listaction {
-    color: black;
-  }
-
-  .listactionmini {
-    color: black;
-  }
-
-  .button {
-    background-color: rgba(0, 0, 0, 0.08);
-    color: black;
-  }
-
-  .button:hover {
-    background-color: rgba(0, 0, 0, 0.18);
-  }
-
-  .itemcard {
-    background-color: #ffffff;
-  }
-
-  .itemcard:hover {
-    background-color: #fafafa;
-  }
-
-  .itemcard-stealth:hover {
-    background-color: #e0e0e0;
-  }
-
-  .infocard {
-    background-color: #ffffff;
-  }
-
-  .separator {
-    background-color: rgba(237, 237, 237, 1);
-  }
+  body {background-color: #fafafa;}
+  html * {color: var(--black);}
+  .list {background-color: var(--white);}
+  .button {background-color: rgba(0, 0, 0, 0.08);}
+  .button:hover {background-color: rgba(0, 0, 0, 0.18);}
+  .itemcard {background-color: var(--white);}
+  .itemcard:hover {background-color: #fafafa;}
+  .itemcard-stealth:hover {background-color: #e0e0e0;}
+  .infocard {background-color: var(--white);}
+  .separator {background-color: rgba(237, 237, 237, 1);}
 }
 
 @media (prefers-color-scheme: dark) {
-
-  body {
-    background-color: #222222;
-  }
-
-  .logo {
-    color: #fff;
-  }
-
-  .grid-container {
-    color: #fff;
-  }
-
-  .list {
-    background-color: #363636;
-  }
-
-  .listaction {
-    color: white;
-  }
-
-  .listactionmini {
-    color: #ffffff;
-  }
-
-  .button {
-    background: rgba(255, 255, 255, 0.1);
-    color: white;
-  }
-
-  .button:hover {
-    background: rgba(255, 255, 255, 0.18);
-  }
-
-  .itemcard {
-    background-color: #303030;
-  }
-
-  .itemcard:hover {
-    background-color: #4a4a4a;
-  }
-
-  .itemcard-stealth:hover {
-    background-color: #4a4a4a;
-  }
-
-  .infocard {
-    background-color: #303030;
-  }
-
-  .separator {
-    background-color: #232323;
-  }
+  body {background-color: #222222;}
+  html * {color: var(--white);}
+  .list {background-color: #363636;}
+  .button {background: rgba(255, 255, 255, 0.1);}
+  .button:hover {background: rgba(255, 255, 255, 0.18);}
+  .itemcard {background-color: #303030;}
+  .itemcard:hover {background-color: #4a4a4a;}
+  .itemcard-stealth:hover {background-color: #4a4a4a;}
+  .infocard {background-color: #303030;}
+  .separator {background-color: #232323;}
 }