static/style.css

@@ -1,6 +1,20 @@
 body {
-  background-color: #000000;
-  color: #FFFFFF;
+  --background-color: #000000;
+  /* #212121 but 93% transparent and mixed to appear at the same lumonocity*/
+  --secondary-background-color: #242424EE;
+
+  --forground-color: #FFFFFF;
+  --secondary-foreground-color: #FAFAFA;
+  --trinary-foreground-color: #F5F5F5;
+
+  --primary-color: #607D8B;
+  --accent-color: #FF4081;
+  --accent-color-dark: #C51162;
+}
+
+body {
+  background-color: var(--background-color);
+  color: var(--forground-color);
   margin: 0;
   height: 100vh;
   font-family: 'Roboto', sans-serif;
@@ -8,28 +22,20 @@ body {
 
 b {
   font-weight: bold;
-  color: #FAFAFA;
+  color: var(--secondary-foreground-color);
 }
 
 a {
-  text-decoration: none;
-  transition: background-color 0.14s cubic-bezier(0.4, 0, 0.2, 1);
-  background-color: #FF4081;
-  color: #FAFAFA;
-  padding: 2px 4px;
-  margin: 2px;
-  border-radius: 3px;
+  transition: color 0.14s cubic-bezier(0.4, 0, 0.2, 1);
+  color: var(--accent-color);
 }
 a:hover {
-  background-color: #C51162;
-}
-a:visited {
-  color: #F5F5F5;
+  color: var(--accent-color-dark);
 }
 
 .striken {
   text-decoration: line-through;
-  color: #F5F5F5;
+  color: var(--trinary-foreground-color);
 }
 
 #mainwrapper {
@@ -49,20 +55,14 @@ a:visited {
 
 #disc {
   padding: 12px 32px;
-  /* #212121 but 93% transparent and mixed to appear at the same lumonocity*/
-  background-color: rgba(36,36,36,237);
-}
-#links {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
+  background-color: var(--secondary-background-color);
 }
 
 #header {
   font-family: 'Raleway', sans-serif;
   font-weight: 300;
   font-size: 64px;
-  color: #FAFAFA;
+  color: var(--secondary-foreground-color);
 }