diff --git a/src/Animation/main.css b/src/Animation/main.css
index 51e35a49..072ad206 100644
--- a/src/Animation/main.css
+++ b/src/Animation/main.css
@@ -2,7 +2,7 @@
   min-height: 50px;
   min-width: 50px;
   border-radius: 50%;
-  background-image: linear-gradient(@green_2, @green_5);
+  background-image: linear-gradient(var(--green-2), var(--green-5));
 }
 
 .circular {
diff --git a/src/Box/main.css b/src/Box/main.css
index fee0d55f..e5d02ff1 100644
--- a/src/Box/main.css
+++ b/src/Box/main.css
@@ -4,7 +4,7 @@
 }
 
 .border {
-  border: 3px solid @accent_color;
+  border: 3px solid var(--accent-color);
 }
 
 .rotate {
diff --git a/src/CSS Gradients/main.css b/src/CSS Gradients/main.css
index 5fb6e5cf..0ed6500e 100644
--- a/src/CSS Gradients/main.css	
+++ b/src/CSS Gradients/main.css	
@@ -1,28 +1,41 @@
 .linear {
-  background-image: linear-gradient(@red_3, @yellow_3, @blue_3);
+  background-image: linear-gradient(
+    var(--red-3),
+    var(--yellow-3),
+    var(--blue-3)
+  );
 }
 
 .radial {
-  background-image: radial-gradient(@red_3, @yellow_3, @blue_3);
+  background-image: radial-gradient(
+    var(--red-3),
+    var(--yellow-3),
+    var(--blue-3)
+  );
 }
 
 .conic {
-  background-image: conic-gradient(@red_3, @yellow_3, @blue_3, @red_3);
+  background-image: conic-gradient(
+    var(--red-3),
+    var(--yellow-3),
+    var(--blue-3),
+    var(--red-3)
+  );
 }
 
 .repeating-linear {
   background-image: repeating-linear-gradient(
-    @red_3,
-    @yellow_3 15%,
-    @blue_3 30%
+    var(--red-3),
+    var(--yellow-3) 15%,
+    var(--blue-3) 30%
   );
 }
 
 .repeating-radial {
   background-image: repeating-radial-gradient(
-    @red_3,
-    @yellow_3 15%,
-    @blue_3 30%
+    var(--red-3),
+    var(--yellow-3) 15%,
+    var(--blue-3) 30%
   );
 }
 
diff --git a/src/Drop Zone/main.css b/src/Drop Zone/main.css
index c20887fc..c523d45e 100644
--- a/src/Drop Zone/main.css	
+++ b/src/Drop Zone/main.css	
@@ -1,6 +1,6 @@
 .overlay-drag-area {
   box-shadow: none;
-  background-color: alpha(@accent_color, 0.35);
+  background-color: alpha(var(--accent-color), 0.35);
   margin: 12px;
   border-radius: 12px;
 }
diff --git a/src/Level Bars/main.css b/src/Level Bars/main.css
index 8318f1f0..330b7f23 100644
--- a/src/Level Bars/main.css	
+++ b/src/Level Bars/main.css	
@@ -1,43 +1,43 @@
 levelbar block.full {
-  background-color: @success_color;
+  background-color: var(--success-color);
 }
 
 levelbar block.half {
-  background-color: @warning_color;
+  background-color: var(--warning-color);
 }
 
 levelbar block.low {
-  background-color: @error_color;
+  background-color: var(--error-color);
 }
 
 levelbar block.very-weak {
-  background-color: @red_4;
+  background-color: var(--red-4);
 }
 
 levelbar block.weak {
-  background-color: @orange_4;
+  background-color: var(--orange-4);
 }
 
 levelbar block.moderate {
-  background-color: @yellow_4;
+  background-color: var(--yellow-4);
 }
 
 levelbar block.strong {
-  background-color: @green_4;
+  background-color: var(--green-4);
 }
 
 .very-weak-label {
-  color: @red_4;
+  color: var(--red-4);
 }
 
 .weak-label {
-  color: @orange_4;
+  color: var(--orange-4);
 }
 
 .moderate-label {
-  color: @yellow_4;
+  color: var(--yellow-4);
 }
 
 .strong-label {
-  color: @green_4;
+  color: var(--green-4);
 }
diff --git a/src/Map/main.css b/src/Map/main.css
index 3359850a..178070d8 100644
--- a/src/Map/main.css
+++ b/src/Map/main.css
@@ -1,3 +1,3 @@
 .map-marker {
-  color: @red_2;
+  color: var(--red-2);
 }
diff --git a/src/Network Monitor/main.css b/src/Network Monitor/main.css
index c142ce0b..9414b057 100644
--- a/src/Network Monitor/main.css	
+++ b/src/Network Monitor/main.css	
@@ -1,3 +1,3 @@
 levelbar block.full {
-  background-color: @blue_3;
+  background-color: var(--blue-3);
 }
diff --git a/src/Styling with CSS/main.css b/src/Styling with CSS/main.css
index 9cc5c5ea..e07c819a 100644
--- a/src/Styling with CSS/main.css	
+++ b/src/Styling with CSS/main.css	
@@ -1,25 +1,25 @@
 #css_text {
-  color: @blue_1; /* Adwaita Named Color */
+  color: var(--blue-1); /* Adwaita Named Color */
 }
 
 .css_text {
-  color: @green_1; /* Adwaita Named Color */
+  color: var(--green-1); /* Adwaita Named Color */
 }
 
 .my_custom_class {
-  color: @red_1;
+  color: var(--red-1);
   font-weight: bold;
   text-decoration: underline;
 }
 
 #linked_box > :hover:first-child {
-  background-color: @destructive_bg_color;
+  background-color: var(--destructive-bg-color);
 }
 
 #linked_box > :hover:nth-child(2) {
-  background-color: @success_bg_color;
+  background-color: var(--success-bg-color);
 }
 
 #linked_box > :hover:last-child {
-  background-color: @accent_bg_color;
+  background-color: var(--accent-bg-color);
 }