src/thsf/static/css/style.css

@@ -8,6 +8,11 @@
   src: url(../fonts/PFDinTextCompPro-Thin.ttf);
 }
 
+:root {
+  --main-bg-color: #e6007e;
+  --main-color: #ffffff;
+  --alt-color: #1A000D;
+}
 
 * {
   margin: 0;
@@ -16,7 +21,7 @@
 }
 
 body {
-  background-color: #e6007e;
+  background-color: var(--main-bg-color);
   font-family: pfdintextcomppromedium;
 }
 
@@ -38,11 +43,11 @@ span.place {
 }
 
 .white {
-  color: #ffffff;
+  color: var(--main-color);
 }
 
 .black {
-  color: #1A000D;
+  color: var(--alt-color);
 }
 
 .thin {
@@ -99,7 +104,7 @@ img.logo {
   justify-content: center;
   align-items: center;
   gap: 2em;
-  background-color: #e6007e;
+  background-color: var(--main-bg-color)
   width: 100vw;
 }
 
@@ -110,7 +115,7 @@ img.logo {
 }
 
 .button:hover {
-  color: #ffffff;
+  color: var(--main-color);
   cursor: pointer;
 }
 
@@ -123,14 +128,14 @@ img.logo {
   height: 0;
   border-left: 0.75em solid transparent;
   border-right: 0.75em solid transparent;
-  border-bottom: 0.75em solid #1A000D;
+  border-bottom: 0.75em solid var(--alt-color);
 }
 
 #blah {
   margin: 2em 0 2em;
   font-size: 2em;
   font-family: pfdintextcompprothin;
-  color: #ffffff;
+  color: var(--main-color);
   width: 25em;
   text-align:justify;
   text-justify:inter-word;
@@ -143,13 +148,13 @@ img.logo {
 a {
   font-family: pfdintextcomppromedium;
   font-weight: 250;
-  color: #1A000D;
+  color: var(--alt-color);
   transition-property: color;
   transition-duration: 1s;
   text-decoration: wavy;
 }
 
 a:hover {
-  color: #ffffff;
+  color: var(--main-color);
   cursor: pointer;
 }