--- a/client/src/assets/application.scss	Thu Dec 22 18:43:46 2022 +0100
+++ b/client/src/assets/application.scss	Tue May 09 13:17:58 2023 +0200
@@ -14,20 +14,27 @@
  */
 @import "@/assets/tooltip.scss";
 
-$shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
-$border-radius: 0.25rem;
-$icon-height: 2rem;
-$icon-width: 2rem;
-$large-offset: 2rem;
-$offset: 1rem;
-$sidebar-width: 13rem;
-$slight-transparent: 0.96;
-$small-offset: 0.5rem;
-$smaller: 0.9rem;
-$transition-fast: 0.3s;
-$x-large-offset: 3rem;
-$xx-large-offset: 5rem;
-$color-info: #17a2b8;
+:root {
+  --shadow-xs: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
+  --border-radius: 0.25rem;
+  --icon-height: 2rem;
+  --icon-width: 2rem;
+  --large-offset: 2rem;
+  --offset: 1rem;
+  --sidebar-width: 13rem;
+  --slight-transparent: 0.96;
+  --small-offset: 0.5rem;
+  --smaller: 0.9rem;
+  --transition-fast: 0.3s;
+  --x-large-offset: 3rem;
+  --xx-large-offset: 5rem;
+
+  --color-info: #17a2b8;
+  --color-info-h: 188;
+  --color-info-s: 78%;
+  --color-info-l: 41%;
+}
+
 
 ::placeholder {
   color: #ccc !important;
@@ -40,13 +47,13 @@
 }
 
 a {
-  color: $color-info;
+  color: var(--color-info);
 }
 
 a:hover,
 a:active,
 a:focus {
-  color: darken($color-info, 13);
+  color: hsl(var(--color-info-h), var(--color-info-s), calc(#{var(--color-info-l)} - 13%));
 }
 
 .w-90 {
@@ -86,22 +93,22 @@
 }
 
 .shadow-xs {
-  box-shadow: $shadow-xs;
+  box-shadow: var(--shadow-xs);
 }
 
 .box {
-  opacity: $slight-transparent;
+  opacity: var(--slight-transparent);
   max-height: 0;
   max-width: 0;
   overflow: hidden;
   margin: 0;
-  box-shadow: $shadow-xs;
+  box-shadow: var(--shadow-xs);
   transition: max-width 0.4s, max-height 0.4s, margin 0.4s;
 }
 
 .box h6,
 .contextbox h6 {
-  color: $color-info;
+  color: var(--color-info);
   font-weight: bold;
 }
 
@@ -147,7 +154,7 @@
 
 .closebutton {
   position: absolute;
-  right: $offset;
+  right: var(--offset);
 }
 
 .headline {
@@ -184,7 +191,7 @@
   box-shadow: 0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);
   border-left: 0 !important;
   &.snotify-info {
-    border-top: 4px solid $color-info;
+    border-top: 4px solid var(--color-info);
     .snotify-icon--info {
       background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20version=%221.1%22%20x=%220px%22%20y=%220px%22%20viewBox=%220%200%20512%20512%22%20fill=%22%2317a2b8%22%3E%3Cg%3E%3Cpath%20d=%22M256,0C114.84,0,0,114.84,0,256S114.84,512,256,512,512,397.16,512,256,397.15,0,256,0Zm0,478.43C133.35,478.43,33.57,378.64,33.57,256S133.35,33.58,256,33.58,478.42,133.36,478.42,256,378.64,478.43,256,478.43Z%22/%3E%3Cpath%20d=%22M251.26,161.24a22.39,22.39,0,1,0-22.38-22.39A22.39,22.39,0,0,0,251.26,161.24Z%22/%3E%3Cpath%20d=%22M286.84,357.87h-14v-160A16.79,16.79,0,0,0,256,181.05H225.17a16.79,16.79,0,0,0,0,33.58h14.05V357.87H225.17a16.79,16.79,0,0,0,0,33.57h61.67a16.79,16.79,0,1,0,0-33.57Z%22/%3E%3C/g%3E%3C/svg%3E");
     }
@@ -227,6 +234,6 @@
 }
 
 .custom-control-input:checked ~ .custom-control-label::before {
-  border-color: $color-info;
-  background-color: $color-info;
+  border-color: var(--color-info);
+  background-color: var(--color-info);
 }