diff --git a/src/css/common.scss b/src/css/common.scss
index 2f69c11f..a01a4d52 100644
--- a/src/css/common.scss
+++ b/src/css/common.scss
@@ -70,17 +70,17 @@ button {
 .styledButton {
     text-transform: uppercase;
     box-sizing: content-box;
-    @include S(padding, 3px, 10px);
+    padding: 0.3rem 1rem;
     @include ButtonText;
     border: 0;
     background: $colorBlueBright;
     color: #fff;
-    @include S(border-radius, 0.8 * $globalBorderRadius);
+    border-radius: 0.8 * $globalBorderRadius;
     transition: opacity 0.12s ease-in-out;
 
     .keybinding {
-        @include S(bottom, -2.5px);
-        @include S(right, -2px);
+        bottom: -0.25rem;
+        right: -0.2rem;
     }
 
     &:hover {
@@ -95,8 +95,8 @@ button {
 
 input[type="text"],
 input[type="email"] {
-    @include S(padding, 11px, 12px);
-    @include S(margin, 10px, 0);
+    padding: 1.1rem 1.2rem;
+    margin: 1rem 0;
     border: 0;
     display: block;
     text-align: left;
@@ -107,7 +107,7 @@ input[type="email"] {
     user-select: text !important;
     pointer-events: all !important;
     @include Text;
-    @include S(border-radius, $globalBorderRadius);
+    border-radius: $globalBorderRadius;
     &::placeholder {
         color: #fff;
         opacity: 0.4;
@@ -127,8 +127,8 @@ input[type="email"] {
     &.input-token {
         @include SuperHeading;
         text-align: center;
-        @include S(letter-spacing, 30px);
-        @include S(padding-left, 30px);
+        letter-spacing: 3rem;
+        padding-left: 3rem;
     }
 }
 
@@ -171,8 +171,8 @@ canvas {
 
 // Scrollbar
 ::-webkit-scrollbar {
-    @include S(width, 6px);
-    @include S(height, 6px);
+    width: 0.6rem;
+    height: 0.6rem;
 }
 
 ::-webkit-scrollbar-track {
@@ -181,7 +181,7 @@ canvas {
 
 ::-webkit-scrollbar-thumb {
     // border-radius: 4px;
-    @include S(border-radius, $globalBorderRadius);
+    border-radius: $globalBorderRadius;
     background: #cdd0d4;
 }
 
@@ -224,8 +224,8 @@ canvas {
     color: #393747;
     &::after {
         content: " ";
-        @include S(width, 35px);
-        @include S(height, 35px);
+        width: 3.5rem;
+        height: 3.5rem;
         display: inline-block;
         vertical-align: middle;
 
@@ -247,10 +247,10 @@ canvas {
 
 .prefab_LoadingProgressIndicator {
     @include PlainText;
-    @include S(margin-top, 20px);
+    margin-top: 2rem;
     width: 100%;
     color: #336c9f;
-    @include S(height, 20px);
+    height: 2rem;
     text-transform: uppercase;
     text-align: center;
 }
@@ -273,15 +273,15 @@ canvas {
         }
 
         & {
-            background: uiResource("loading.svg") center center / #{D(40px)} no-repeat;
+            background: uiResource("loading.svg") center center / 4rem no-repeat;
         }
     }
 
     .prefab_GameHint {
         position: absolute;
-        @include S(left, 20px);
-        @include S(right, 20px);
-        @include S(bottom, 60px);
+        left: 2rem;
+        right: 2rem;
+        bottom: 6rem;
         @include Text;
         color: #666;
 
@@ -292,9 +292,9 @@ canvas {
 
     .loadingStatus {
         position: absolute;
-        @include S(left, 20px);
-        @include S(right, 20px);
-        @include S(bottom, 30px);
+        left: 2rem;
+        right: 2rem;
+        bottom: 3rem;
         @include Text;
         @include PlainText;
         color: #aaa;
@@ -309,7 +309,7 @@ canvas {
         align-items: center;
         > .bar {
             display: none;
-            @include S(margin-top, 15px);
+            margin-top: 1.5rem;
             width: 80vw;
             @include BoxShadow3D(lighten($mainBgColor, 10), $size: 1px);
             position: relative;
@@ -322,7 +322,7 @@ canvas {
                 bottom: 0;
                 z-index: 1;
                 @include BoxShadow3D($themeColor, $size: 1px);
-                @include S(border-radius, $globalBorderRadius);
+                border-radius: $globalBorderRadius;
                 transform-origin: 0% 50%;
                 @include InlineAnimation(1.3s ease-in-out infinite) {
                     0% {
@@ -344,7 +344,7 @@ canvas {
                 position: relative;
                 z-index: 2;
                 display: inline-flex;
-                @include S(padding, 5px);
+                padding: 0.5rem;
                 @include PlainText;
             }
         }
@@ -358,10 +358,10 @@ canvas {
 .checkbox {
     $bgColor: darken($mainBgColor, 3);
     background-color: $bgColor;
-    @include S(width, 35px);
-    @include S(height, 17px);
+    width: 3.5rem;
+    height: 1.7rem;
     display: flex;
-    @include S(padding, 3px);
+    padding: 0.3rem;
     box-sizing: content-box;
     cursor: pointer;
     pointer-events: all;
@@ -370,7 +370,7 @@ canvas {
         background-color 0.3s ease-in-out,
         box-shadow 0.4s ease-in-out !important;
     position: relative;
-    @include S(border-radius, 20px);
+    border-radius: 2rem;
     @include BoxShadow3D($bgColor, $size: 2px);
     &.loading {
         opacity: 0.2;
@@ -379,20 +379,20 @@ canvas {
         background-color: darken($bgColor, 5);
     }
     .knob {
-        @include S(width, 20px);
-        @include S(height, 17px);
+        width: 2rem;
+        height: 1.7rem;
         display: inline-block;
         transition: margin-left 0.4s ease-in-out !important;
         background: #fff;
         position: relative;
-        @include S(border-radius, 20px);
+        border-radius: 2rem;
         @include BoxShadow3D(#fff, $size: 1px);
     }
     &.checked {
         background-color: $themeColor;
         @include BoxShadow3D($themeColor, $size: 2px);
         .knob {
-            @include S(margin-left, 15px);
+            margin-left: 1.5rem;
         }
         &:hover {
             background-color: lighten($themeColor, 15);
@@ -413,7 +413,7 @@ canvas {
     justify-content: center;
 
     label {
-        @include S(margin-right, 5px);
+        margin-right: 0.5rem;
         &,
         & * {
             @include PlainText;
@@ -424,14 +424,14 @@ canvas {
 input.rangeInput {
     cursor: pointer;
     background-color: transparent;
-    @include S(width, 100px);
-    @include S(height, 16px);
+    width: 10rem;
+    height: 1.6rem;
 
     &::-webkit-slider-runnable-track {
         background-color: darken($mainBgColor, 3);
         color: darken($mainBgColor, 3);
-        // @include S(height, 16px);
-        @include S(border-radius, 8px);
+        // height: 1.6rem;
+        border-radius: 0.8rem;
     }
 
     @include DarkThemeOverride {
@@ -440,13 +440,13 @@ input.rangeInput {
         }
 
         &::-webkit-slider-thumb {
-            box-shadow: inset 0 0 0 D(10px) #eee;
+            box-shadow: inset 0 0 0 1rem #eee;
         }
     }
 
     &::-webkit-slider-thumb {
         appearance: none;
-        box-shadow: inset 0 0 0 D(10px) $themeColor;
+        box-shadow: inset 0 0 0 1rem $themeColor;
         border-radius: 50%;
 
         transition: box-shadow 0.3s;
@@ -454,7 +454,7 @@ input.rangeInput {
 
     &:hover {
         &::-webkit-slider-thumb {
-            box-shadow: inset 0 0 0 D(10px) lighten($themeColor, 15);
+            box-shadow: inset 0 0 0 1rem lighten($themeColor, 15);
         }
     }
 }
@@ -463,33 +463,33 @@ input.rangeInput {
     background: #fff;
     text-transform: uppercase;
     font-family: inherit;
-    @include S(padding, 1.5px, 3px, 2px);
+    padding: 0.15rem 0.3rem 0.2rem;
     @include PlainText;
-    @include S(border-radius, 0.5 * $globalBorderRadius);
+    border-radius: 0.5 * $globalBorderRadius;
     &,
     > span {
-        @include S(font-size, 9px);
-        @include S(line-height, 11px);
+        font-size: 0.9rem;
+        line-height: 1.1rem;
     }
 
     color: $accentColorDark;
     text-align: center;
     justify-content: center;
     align-items: center;
-    @include S(min-width, 12px);
+    min-width: 1.2rem;
     display: inline-flex;
     position: absolute;
-    @include S(bottom, 0px);
-    @include S(right, 0px);
+    bottom: 0rem;
+    right: 0rem;
     z-index: 999;
     box-sizing: border-box;
-    @include S(height, 12px);
+    height: 1.2rem;
     overflow: hidden;
-    border: #{D(0px)} solid $accentColorDark;
+    border: 0rem solid $accentColorDark;
     .keybinding_space {
-        @include S(font-size, 17px);
-        @include S(line-height, 11px);
-        @include S(margin-top, -12px);
+        font-size: 1.7rem;
+        line-height: 1.1rem;
+        margin-top: -1.2rem;
     }
 }
 
diff --git a/src/css/dynamic_ui.scss b/src/css/dynamic_ui.scss
deleted file mode 100644
index 5d9b3b1d..00000000
--- a/src/css/dynamic_ui.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// Removes the unit (px, %, etc) from a value
-@function strip-unit($number) {
-    @if type-of($number) == "number" and not unitless($number) {
-        @return $number / ($number * 0 + 1);
-    }
-
-    @return $number;
-}
-
-// Helper method to scale a value, for use in calc() etc
-@function D($v) {
-    @return strip-unit($v) * 0.1rem;
-}
-
-// Helper method to scale a property value
-@mixin S($propName, $v1, $v2: "", $v3: "", $v4: "", $important: false) {
-    $impSuffix: "";
-    @if $important == true {
-        $impSuffix: "!important";
-    }
-
-    $v1: D($v1);
-
-    @if $v2 != "" {
-        $v2: D($v2);
-    }
-
-    @if $v3 != "" {
-        $v3: D($v3);
-    }
-    @if $v4 != "" {
-        $v4: D($v4);
-    }
-
-    #{$propName}: #{$v1} #{$v2} #{$v3} #{$v4} #{$impSuffix};
-}
diff --git a/src/css/ingame_hud/beta_overlay.scss b/src/css/ingame_hud/beta_overlay.scss
index 08eba960..18535ae0 100644
--- a/src/css/ingame_hud/beta_overlay.scss
+++ b/src/css/ingame_hud/beta_overlay.scss
@@ -1,6 +1,6 @@
 #ingame_HUD_BetaOverlay {
     position: fixed;
-    @include S(top, 70px);
+    top: 7rem;
     left: 50%;
     transform: translateX(-50%);
     color: $colorRedBright;
diff --git a/src/css/ingame_hud/blueprint_placer.scss b/src/css/ingame_hud/blueprint_placer.scss
index 4741af00..184fea76 100644
--- a/src/css/ingame_hud/blueprint_placer.scss
+++ b/src/css/ingame_hud/blueprint_placer.scss
@@ -1,19 +1,19 @@
 #ingame_HUD_BlueprintPlacer {
     position: absolute;
-    @include S(top, 70px);
+    top: 7rem;
     left: 50%;
     transform: translateX(-50%);
     color: #333;
     z-index: 9999;
     background: $ingameHudBg;
-    @include S(padding, 5px);
+    padding: 0.5rem;
     display: flex;
     flex-direction: column;
     color: #fff;
-    @include S(width, 120px);
+    width: 12rem;
     align-items: center;
     justify-content: center;
-    @include S(border-radius, $globalBorderRadius);
+    border-radius: $globalBorderRadius;
 
     .label {
         @include PlainText;
@@ -25,9 +25,9 @@
         @include Heading;
 
         > canvas {
-            @include S(margin-left, 5px);
-            @include S(width, 30px);
-            @include S(height, 30px);
+            margin-left: 0.5rem;
+            width: 3rem;
+            height: 3rem;
         }
     }
 
diff --git a/src/css/ingame_hud/building_placer.scss b/src/css/ingame_hud/building_placer.scss
index 12965f0f..faee739f 100644
--- a/src/css/ingame_hud/building_placer.scss
+++ b/src/css/ingame_hud/building_placer.scss
@@ -1,14 +1,14 @@
 #ingame_HUD_PlacementHints {
     position: fixed;
-    @include S(top, 60px);
-    @include S(right, 10px);
+    top: 6rem;
+    right: 1rem;
 
     display: grid;
 
-    @include S(padding, 6px);
-    @include S(border-radius, $globalBorderRadius);
-    @include S(width, 240px);
-    @include S(grid-column-gap, 5px);
+    padding: 0.6rem;
+    border-radius: $globalBorderRadius;
+    width: 24rem;
+    grid-column-gap: 0.5rem;
 
     background: $ingameHudBg;
     grid-template-columns: 1fr auto;
@@ -28,7 +28,7 @@
 
     .buildingLabel {
         @include PlainText;
-        @include S(margin-bottom, 2px);
+        margin-bottom: 0.2rem;
         color: #fff;
         text-transform: uppercase;
         grid-column: 1 / 3;
@@ -55,7 +55,7 @@
         label {
             color: lighten($colorGreenBright, 10);
             font-weight: bold;
-            @include S(margin-right, 5px);
+            margin-right: 0.5rem;
         }
     }
 
@@ -67,17 +67,17 @@
         align-items: center;
         .keybinding {
             position: relative;
-            @include S(margin-left, 5px);
+            margin-left: 0.5rem;
         }
     }
 
     .buildingImage {
         grid-column: 2 / 3;
         grid-row: 1 / 3;
-        @include S(width, 100px);
-        @include S(height, 100px);
+        width: 10rem;
+        height: 10rem;
         background: top left / 100% 100% no-repeat;
-        @include S(border-radius, $globalBorderRadius);
+        border-radius: $globalBorderRadius;
         transition: opacity 0.1s ease-in-out;
     }
 
@@ -97,15 +97,15 @@
 
 #ingame_HUD_PlacerVariants {
     position: absolute;
-    @include S(right, 10px);
-    @include S(top, 200px);
+    right: 1rem;
+    top: 20rem;
     display: flex;
-    @include S(grid-gap, 5px);
+    grid-gap: 0.5rem;
     flex-direction: column;
     align-items: flex-end;
 
     &.compact {
-        @include S(top, 150px);
+        top: 15rem;
     }
 
     .explanation {
@@ -125,22 +125,22 @@
 
     .variants {
         display: grid;
-        @include S(grid-gap, 5px);
+        grid-gap: 0.5rem;
 
         .variant {
             pointer-events: all;
             cursor: pointer;
 
             grid-row: 2 / 3;
-            @include S(border-radius, $globalBorderRadius);
+            border-radius: $globalBorderRadius;
             background: rgba($ingameHudBg, 0.5);
             opacity: 0.5;
             display: inline-flex;
             vertical-align: top;
             position: relative;
             align-items: center;
-            @include S(padding, 3px);
-            @include S(grid-gap, 10px);
+            padding: 0.3rem;
+            grid-gap: 1rem;
 
             transition: background-color 0.12s ease-in-out;
 
@@ -154,30 +154,30 @@
                 background-color: rgba($colorBlueBright, 0.8);
             }
 
-            $iconSize: 25px;
+            $iconSize: 2.5rem;
 
             .iconWrap {
                 grid-column: 1 / 2;
                 grid-row: 1 / 2;
                 position: relative;
-                @include S(width, $iconSize);
-                @include S(height, $iconSize);
+                width: $iconSize;
+                height: $iconSize;
                 background: center center / contain no-repeat;
 
                 &[data-tile-w="2"] {
-                    @include S(width, 2 * $iconSize);
+                    width: 2 * $iconSize;
                 }
                 &[data-tile-h="2"] {
-                    @include S(height, 2 * $iconSize);
+                    height: 2 * $iconSize;
                 }
                 &[data-tile-h="3"] {
-                    @include S(height, 3 * $iconSize);
+                    height: 3 * $iconSize;
                 }
                 &[data-tile-w="3"] {
-                    @include S(width, 3 * $iconSize);
+                    width: 3 * $iconSize;
                 }
                 &[data-tile-w="4"] {
-                    @include S(width, 4 * $iconSize);
+                    width: 4 * $iconSize;
                 }
             }
 
diff --git a/src/css/ingame_hud/buildings_toolbar.scss b/src/css/ingame_hud/buildings_toolbar.scss
index 3ebfa03b..5b417965 100644
--- a/src/css/ingame_hud/buildings_toolbar.scss
+++ b/src/css/ingame_hud/buildings_toolbar.scss
@@ -1,20 +1,20 @@
 .ingame_buildingsToolbar {
     position: absolute;
-    @include S(bottom, 10px);
+    bottom: 1rem;
     left: 50%;
     transform: translateX(-50%);
 
     display: grid;
     grid-template-rows: auto auto;
     justify-items: center;
-    @include S(grid-gap, 4px);
+    grid-gap: 0.4rem;
 
     background: transparent;
     transition: transform 120ms ease-in-out;
     will-change: transform;
 
     &:not(.visible) {
-        transform: translateX(-50%) translateY(#{D(100px)});
+        transform: translateX(-50%) translateY(10rem);
     }
 
     .buildings {
@@ -22,11 +22,11 @@
         grid-auto-flow: column;
         justify-items: center;
         align-self: center;
-        grid-gap: D(2px);
+        grid-gap: 0.2rem;
         grid-row: 2 / 3;
 
-        @include S(border-radius, $globalBorderRadius);
-        @include S(padding, 2px);
+        border-radius: $globalBorderRadius;
+        padding: 0.2rem;
         background-color: rgba($ingameHudBg, 0.07);
 
         @include DarkThemeOverride {
@@ -37,13 +37,13 @@
             grid-row: 1 / 2;
 
             .building {
-                @include S(width, 30px);
-                @include S(height, 30px);
+                width: 3rem;
+                height: 3rem;
                 background-size: 45%;
 
                 &:not(.unlocked) {
                     &::before {
-                        background-size: #{D(13px)};
+                        background-size: 1.3rem;
                     }
                 }
             }
@@ -51,9 +51,9 @@
 
         .building {
             display: flex;
-            @include S(width, 40px);
+            width: 4rem;
             position: relative;
-            @include S(height, 40px);
+            height: 4rem;
 
             @at-root html[data-tutorial-step="1_1_extractor"] &[data-id="miner"]:not(.selected),
                 html[data-tutorial-step="1_2_conveyor"] &[data-id="belt"]:not(.selected),
@@ -67,8 +67,8 @@
                         background: uiResource("icons/tutorial_arrow.png") center center / contain no-repeat;
                     }
 
-                    @include S(width, 25px);
-                    @include S(height, 25px);
+                    width: 2.5rem;
+                    height: 2.5rem;
                     position: absolute;
                     left: 50%;
                     bottom: 100%;
@@ -79,8 +79,8 @@
                         }
                     }
                 }
-                @include S(border-radius, $globalBorderRadius);
-                box-shadow: 0 0 D(10px) D(5px) rgba(74, 237, 134, 0.5) !important;
+                border-radius: $globalBorderRadius;
+                box-shadow: 0 0 1rem 0.5rem rgba(74, 237, 134, 0.5) !important;
                 background: rgba(74, 237, 134, 0.5) !important;
             }
 
@@ -100,7 +100,7 @@
             }
 
             &:not(.unlocked) {
-                @include S(width, 25px);
+                width: 2.5rem;
                 .icon {
                     opacity: 0.15;
                 }
@@ -122,7 +122,7 @@
 
             &.unlocked {
                 .icon {
-                    @include S(border-radius, $globalBorderRadius * 0.9);
+                    border-radius: $globalBorderRadius * 0.9;
 
                     pointer-events: all;
                     transition: all 0.12s ease-in-out;
@@ -146,7 +146,7 @@
                         background-color: rgba(lighten($colorBlueBright, 9), 0.4);
                     }
                     // transform: scale(1.05);
-                    // @include S(border-radius, $globalBorderRadius);
+                    // border-radius: $globalBorderRadius;
 
                     .keybinding {
                         color: #111;
@@ -163,7 +163,7 @@
                     grid-auto-flow: column;
 
                     position: absolute;
-                    @include S(top, -15px);
+                    top: -1.5rem;
                     left: 50%;
                     transform: translateX(-50%) !important;
                     transition: all 0.12s ease-in-out;
@@ -172,8 +172,8 @@
                     cursor: pointer;
                     pointer-events: all;
 
-                    @include S(width, 12px);
-                    @include S(height, 12px);
+                    width: 1.2rem;
+                    height: 1.2rem;
 
                     &:hover {
                         opacity: 0.5;
diff --git a/src/css/ingame_hud/color_blind_helper.scss b/src/css/ingame_hud/color_blind_helper.scss
index 027b781b..0c1fc780 100644
--- a/src/css/ingame_hud/color_blind_helper.scss
+++ b/src/css/ingame_hud/color_blind_helper.scss
@@ -4,8 +4,8 @@
     @include SuperSmallText;
     color: #fff;
     background: $ingameHudBg;
-    @include S(padding, 5px);
-    @include S(top, 20px);
+    padding: 0.5rem;
+    top: 2rem;
     left: 50%;
     transform: translateX(-50%);
     text-transform: uppercase;
diff --git a/src/css/ingame_hud/debug_info.scss b/src/css/ingame_hud/debug_info.scss
index d1293804..017e1f8f 100644
--- a/src/css/ingame_hud/debug_info.scss
+++ b/src/css/ingame_hud/debug_info.scss
@@ -1,7 +1,7 @@
 #ingame_HUD_DebugInfo {
     position: absolute;
-    @include S(bottom, 5px);
-    @include S(right, 5px);
+    bottom: 0.5rem;
+    right: 0.5rem;
 
     text-align: right;
     font-size: 15px;
diff --git a/src/css/ingame_hud/dialogs.scss b/src/css/ingame_hud/dialogs.scss
index d50ac98b..2ce1d0b0 100644
--- a/src/css/ingame_hud/dialogs.scss
+++ b/src/css/ingame_hud/dialogs.scss
@@ -55,7 +55,7 @@
         .dialogInner {
             opacity: 1;
         }
-        backdrop-filter: blur(D(3px));
+        backdrop-filter: blur(0.3rem);
     }
 
     .dialogInner {
@@ -73,19 +73,19 @@
 
         .text {
             text-transform: uppercase;
-            @include S(margin-bottom, 10px);
+            margin-bottom: 1rem;
         }
     }
 
     > .dialogInner {
         background: #fff;
-        max-height: calc(100vh - #{D(40px)});
-        @include S(border-radius, $globalBorderRadius);
+        max-height: calc(100vh - 4rem);
+        border-radius: $globalBorderRadius;
         display: flex;
         flex-direction: column;
-        @include S(padding, 12px);
+        padding: 1.2rem;
 
-        box-shadow: 0 D(5px) D(15px) rgba(#000, 0.1);
+        box-shadow: 0 0.5rem 1.5rem rgba(#000, 0.1);
         pointer-events: all;
 
         @include DarkThemeOverride {
@@ -95,15 +95,15 @@
         &.optionChooserDialog {
             .optionParent {
                 display: grid;
-                @include S(grid-gap, 5px);
-                @include S(padding-right, 5px);
+                grid-gap: 0.5rem;
+                padding-right: 0.5rem;
                 grid-template-columns: 1fr 1fr;
                 .option {
-                    @include S(border-radius, $globalBorderRadius);
+                    border-radius: $globalBorderRadius;
 
                     pointer-events: all;
                     cursor: pointer;
-                    @include S(padding, 10px);
+                    padding: 1rem;
 
                     background: #eee;
 
@@ -128,13 +128,13 @@
             display: grid;
             align-items: center;
             grid-template-columns: 1fr auto;
-            @include S(margin-bottom, 10px);
+            margin-bottom: 1rem;
 
             @include DarkThemeInvert();
             > .closeButton {
                 opacity: 0.7;
-                @include S(width, 20px);
-                @include S(height, 20px);
+                width: 2rem;
+                height: 2rem;
                 cursor: pointer;
                 pointer-events: all;
                 transition: opacity 0.2s ease-in-out;
@@ -151,7 +151,7 @@
             @include PlainText;
             overflow-y: auto;
             pointer-events: all;
-            @include S(width, 350px);
+            width: 35rem;
 
             @include DarkThemeOverride {
                 color: #aaa;
@@ -174,7 +174,7 @@
             }
 
             h3 {
-                @include S(margin-top, 10px);
+                margin-top: 1rem;
             }
 
             input {
@@ -193,17 +193,17 @@
             }
 
             .ingameItemChooser {
-                @include S(margin, 10px, 0);
+                margin: 1rem 0;
                 display: grid;
-                @include S(grid-column-gap, 3px);
-                @include S(grid-row-gap, 5px);
+                grid-column-gap: 0.3rem;
+                grid-row-gap: 0.5rem;
                 grid-template-columns: repeat(10, 1fr);
                 place-items: center;
 
                 canvas {
                     pointer-events: all;
-                    @include S(width, 25px);
-                    @include S(height, 25px);
+                    width: 2.5rem;
+                    height: 2.5rem;
                     position: relative;
                     cursor: pointer;
 
@@ -215,11 +215,11 @@
 
             .dialogModsMod {
                 background: rgba(0, 0, 0, 0.05);
-                @include S(padding, 5px);
-                @include S(margin, 10px, 0);
-                @include S(border-radius, $globalBorderRadius);
+                padding: 0.5rem;
+                margin: 1rem 0;
+                border-radius: $globalBorderRadius;
                 display: grid;
-                grid-template-columns: 1fr D(100px);
+                grid-template-columns: 1fr 10rem;
 
                 @include DarkThemeOverride {
                     background: rgba(0, 0, 0, 0.2);
@@ -239,14 +239,14 @@
         }
 
         > .buttons {
-            @include S(margin-top, 15px);
+            margin-top: 1.5rem;
             display: flex;
             justify-content: flex-end;
             > button {
-                @include S(margin-left, 8px);
+                margin-left: 0.8rem;
                 @include Text;
-                @include S(min-width, 60px);
-                @include S(padding, 5px, 15px);
+                min-width: 6rem;
+                padding: 0.5rem 1.5rem;
 
                 transition: opacity 0.12s ease-in-out;
                 &:hover {
diff --git a/src/css/ingame_hud/entity_debugger.scss b/src/css/ingame_hud/entity_debugger.scss
index 4cf7e5e9..3ce9c75c 100644
--- a/src/css/ingame_hud/entity_debugger.scss
+++ b/src/css/ingame_hud/entity_debugger.scss
@@ -1,8 +1,8 @@
 #ingame_HUD_EntityDebugger {
     position: absolute;
     background: $ingameHudBg;
-    @include S(padding, 5px);
-    @include S(right, 30px);
+    padding: 0.5rem;
+    right: 3rem;
 
     top: 50%;
     transform: translateY(-50%);
@@ -26,7 +26,7 @@
     }
 
     .propertyTable {
-        @include S(margin-top, 8px);
+        margin-top: 0.8rem;
     }
 
     .propertyTable,
@@ -34,16 +34,16 @@
     .entityComponents .object > div {
         display: grid;
         grid-template-columns: 1fr auto;
-        @include S(column-gap, 10px);
+        column-gap: 1rem;
     }
 
     .entityComponents {
         grid-column: 1 / 3;
-        @include S(margin-top, 5px);
+        margin-top: 0.5rem;
 
         font-family: "Roboto Mono", "Fira Code", monospace;
         font-size: 90%;
-        @include S(letter-spacing, -0.5px);
+        letter-spacing: -0.05rem;
 
         label,
         span {
@@ -56,8 +56,8 @@
         &,
         * {
             @include SuperSmallText;
-            @include S(font-size, 7px, $important: true);
-            @include S(line-height, 12px, $important: true);
+            font-size: 0.7rem !important;
+            line-height: 1.2rem !important;
         }
 
         .object {
@@ -72,7 +72,7 @@
                 }
             }
             > div {
-                @include S(margin-left, 4px);
+                margin-left: 0.4rem;
                 cursor: pointer;
             }
         }
diff --git a/src/css/ingame_hud/game_menu.scss b/src/css/ingame_hud/game_menu.scss
index e15c9a07..b8dedf2b 100644
--- a/src/css/ingame_hud/game_menu.scss
+++ b/src/css/ingame_hud/game_menu.scss
@@ -1,18 +1,18 @@
 #ingame_HUD_GameMenu {
     position: absolute;
-    @include S(top, 10px);
-    @include S(right, 10px);
+    top: 1rem;
+    right: 1rem;
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
-    @include S(grid-gap, 6px);
+    grid-gap: 0.6rem;
 
-    backdrop-filter: blur(D(1px));
+    backdrop-filter: blur(0.1rem);
 
     > button,
     > .button {
         @include PlainText;
-        @include S(width, 30px);
-        @include S(height, 30px);
+        width: 3rem;
+        height: 3rem;
 
         pointer-events: all;
         cursor: pointer;
diff --git a/src/css/ingame_hud/interactive_tutorial.scss b/src/css/ingame_hud/interactive_tutorial.scss
index dad52841..cb802935 100644
--- a/src/css/ingame_hud/interactive_tutorial.scss
+++ b/src/css/ingame_hud/interactive_tutorial.scss
@@ -1,21 +1,21 @@
 #ingame_HUD_InteractiveTutorial {
     position: absolute;
-    @include S(left, 10px);
-    @include S(bottom, 10px);
+    left: 1rem;
+    bottom: 1rem;
 
     @include StyleBelowWidth(1430px) {
-        @include S(bottom, 10px + 40px);
+        bottom: 5rem;
     }
 
-    @include S(width, 150px);
+    width: 15rem;
 
     background: $ingameHudBg;
-    @include S(padding, 7px);
+    padding: 0.7rem;
     color: #eee;
     display: flex;
     flex-direction: column;
 
-    @include S(border-radius, $globalBorderRadius);
+    border-radius: $globalBorderRadius;
 
     @include MakeAnimationWrappedEvenOdd(0.5s ease-in-out) {
         0% {
@@ -49,11 +49,11 @@
     }
 
     .helperGif {
-        @include S(margin-top, 5px);
-        @include S(width, 150px);
-        @include S(height, 150px);
+        margin-top: 0.5rem;
+        width: 15rem;
+        height: 15rem;
         background: center center / cover no-repeat;
         transition: opacity 0.1s ease-out;
-        @include S(border-radius, $globalBorderRadius);
+        border-radius: $globalBorderRadius;
     }
 }
diff --git a/src/css/ingame_hud/keybindings_overlay.scss b/src/css/ingame_hud/keybindings_overlay.scss
index 47bffe0d..2f19bd9b 100644
--- a/src/css/ingame_hud/keybindings_overlay.scss
+++ b/src/css/ingame_hud/keybindings_overlay.scss
@@ -1,14 +1,14 @@
 #ingame_HUD_KeybindingOverlay {
     position: absolute;
-    @include S(top, 10px);
-    @include S(left, 10px);
+    top: 1rem;
+    left: 1rem;
 
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     color: #333438;
-    backdrop-filter: blur(D(1px));
-    padding: D(3px);
+    backdrop-filter: blur(0.1rem);
+    padding: 0.3rem;
 
     @include DarkThemeOverride {
         color: #fff;
@@ -27,18 +27,18 @@
         display: inline-grid;
         @include PlainText;
         align-items: center;
-        @include S(margin-bottom, 3px);
+        margin-bottom: 0.3rem;
         grid-auto-flow: column;
-        @include S(grid-gap, 2px);
+        grid-gap: 0.2rem;
 
         i {
             display: inline-block;
-            @include S(height, 10px);
+            height: 1rem;
             width: 1px;
-            @include S(margin, 0, 3px);
+            margin: 0 0.3rem;
             background-color: #fff;
             transform: rotate(10deg);
-            // @include S(margin, 0, 3px);
+            // margin: 0  .3rem;
         }
 
         kbd {
@@ -67,7 +67,7 @@
                 color: #fff;
             }
 
-            @include S(margin-left, 5px);
+            margin-left: 0.5rem;
         }
     }
 }
diff --git a/src/css/ingame_hud/notifications.scss b/src/css/ingame_hud/notifications.scss
index 4b8ee767..f5db5fe9 100644
--- a/src/css/ingame_hud/notifications.scss
+++ b/src/css/ingame_hud/notifications.scss
@@ -1,27 +1,27 @@
 #ingame_HUD_Notifications {
     position: absolute;
-    @include S(bottom, 60px);
-    @include S(right, 10px);
+    bottom: 6rem;
+    right: 1rem;
 
     .notification {
         background: rgba(#333438, 0.8);
-        @include S(border-radius, $globalBorderRadius);
-        @include S(margin-top, 3px);
+        border-radius: $globalBorderRadius;
+        margin-top: 0.3rem;
         color: #fff;
         @include SuperSmallText;
-        @include S(padding, 7px, 10px);
-        @include S(width, 150px);
+        padding: 0.7rem 1rem;
+        width: 15rem;
 
         @include DarkThemeOverride {
             background-color: rgba(#55595d, 0.8);
         }
 
         &[data-icon] {
-            @include S(background-position-x, 8px);
+            background-position-x: 0.8rem;
             background-position-y: center;
-            @include S(padding-left, 35px);
+            padding-left: 3.5rem;
             background-repeat: no-repeat;
-            @include S(background-size, 15px);
+            background-size: 1.5rem;
         }
 
         transform-origin: 100% 50%;
diff --git a/src/css/ingame_hud/pinned_shapes.scss b/src/css/ingame_hud/pinned_shapes.scss
index 75e6d38d..e7ef4691 100644
--- a/src/css/ingame_hud/pinned_shapes.scss
+++ b/src/css/ingame_hud/pinned_shapes.scss
@@ -1,7 +1,7 @@
 #ingame_HUD_PinnedShapes {
     position: absolute;
-    @include S(left, 9px);
-    @include S(top, 150px);
+    left: 0.9rem;
+    top: 15rem;
     @include PlainText;
     display: flex;
     flex-direction: column;
@@ -15,7 +15,7 @@
         justify-content: center;
         grid-template-columns: auto 1fr;
         grid-template-rows: 1fr 1fr;
-        @include S(margin-bottom, 4px);
+        margin-bottom: 0.4rem;
         color: #333438;
 
         &.removable {
@@ -23,8 +23,8 @@
         }
 
         > canvas {
-            @include S(width, 25px);
-            @include S(height, 25px);
+            width: 2.5rem;
+            height: 2.5rem;
             grid-column: 1 / 2;
             grid-row: 1 / 3;
             pointer-events: none;
@@ -34,14 +34,14 @@
 
         > .amountLabel,
         > .goalLabel {
-            @include S(margin-left, 5px);
+            margin-left: 0.5rem;
             @include SuperSmallText;
             font-weight: bold;
             display: inline-flex;
             align-items: center;
             flex-direction: row;
             grid-column: 2 / 3;
-            @include S(height, 9px);
+            height: 0.9rem;
 
             @include DarkThemeOverride {
                 color: #eee;
@@ -49,7 +49,7 @@
         }
 
         > .goalLabel {
-            @include S(font-size, 7px);
+            font-size: 0.7rem;
             opacity: 0.9;
             align-self: start;
             justify-self: start;
@@ -64,12 +64,12 @@
         }
 
         > .infoButton {
-            @include S(width, 8px);
-            @include S(height, 8px);
+            width: 0.8rem;
+            height: 0.8rem;
             position: absolute;
             opacity: 0.7;
-            @include S(top, 13px);
-            @include S(left, -7px);
+            top: 1.3rem;
+            left: -0.7rem;
             @include DarkThemeInvert;
             transition: opacity 0.12s ease-in-out;
             z-index: 100;
@@ -85,12 +85,12 @@
         }
 
         > .unpinButton {
-            @include S(width, 8px);
-            @include S(height, 8px);
+            width: 0.8rem;
+            height: 0.8rem;
             position: absolute;
             opacity: 0.7;
-            @include S(top, 3px);
-            @include S(left, -7px);
+            top: 0.3rem;
+            left: -0.7rem;
             @include DarkThemeInvert;
             transition: opacity 0.12s ease-in-out;
             z-index: 100;
@@ -111,10 +111,10 @@
                 content: " ";
                 position: absolute;
                 display: inline-block;
-                @include S(width, 8px);
-                @include S(height, 8px);
-                @include S(top, 4px);
-                @include S(left, -7px);
+                width: 0.8rem;
+                height: 0.8rem;
+                top: 0.4rem;
+                left: -0.7rem;
                 background: center center / contain no-repeat;
             }
 
diff --git a/src/css/ingame_hud/puzzle_back_to_menu.scss b/src/css/ingame_hud/puzzle_back_to_menu.scss
index 564b592e..e103b183 100644
--- a/src/css/ingame_hud/puzzle_back_to_menu.scss
+++ b/src/css/ingame_hud/puzzle_back_to_menu.scss
@@ -1,13 +1,13 @@
 #ingame_HUD_PuzzleBackToMenu {
     position: absolute;
-    @include S(top, 10px);
-    @include S(left, 0px);
+    top: 1rem;
+    left: 0rem;
 
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    backdrop-filter: blur(D(1px));
-    padding: D(3px);
+    backdrop-filter: blur(0.1rem);
+    padding: 0.3rem;
 
     > .button {
         @include PlainText;
@@ -19,8 +19,8 @@
         transition-property: opacity, transform;
         text-transform: uppercase;
         @include PlainText;
-        @include S(width, 30px);
-        @include S(height, 30px);
+        width: 3rem;
+        height: 3rem;
 
         @include DarkThemeInvert;
 
@@ -35,7 +35,7 @@
 
         & {
             /* @load-async */
-            background: uiResource("icons/state_back_button.png") center center / D(15px) no-repeat;
+            background: uiResource("icons/state_back_button.png") center center / 1.5rem no-repeat;
         }
     }
 }
diff --git a/src/css/ingame_hud/puzzle_complete_notification.scss b/src/css/ingame_hud/puzzle_complete_notification.scss
index 12a47f0c..e6e77844 100644
--- a/src/css/ingame_hud/puzzle_complete_notification.scss
+++ b/src/css/ingame_hud/puzzle_complete_notification.scss
@@ -13,7 +13,7 @@
 
     & {
         /* @load-async */
-        background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
+        background: rgba(#333538, 0.95) uiResource("dialog_bg_pattern.png") top left / 1rem repeat;
     }
 
     @include InlineAnimation(0.1s ease-in-out) {
@@ -24,8 +24,8 @@
 
     > .dialog {
         // background: rgba(#222428, 0.5);
-        @include S(border-radius, $globalBorderRadius);
-        @include S(padding, 30px);
+        border-radius: $globalBorderRadius;
+        padding: 3rem;
 
         @include InlineAnimation(0.5s ease-in-out) {
             0% {
@@ -43,8 +43,8 @@
         > .title {
             @include SuperHeading;
             text-transform: uppercase;
-            @include S(font-size, 30px);
-            @include S(margin-bottom, 40px);
+            font-size: 3rem;
+            margin-bottom: 4rem;
             color: $colorGreenBright !important;
 
             @include InlineAnimation(0.5s ease-in-out) {
@@ -82,19 +82,19 @@
             > .stepLike {
                 display: flex;
                 flex-direction: column;
-                @include S(margin-bottom, 10px);
+                margin-bottom: 1rem;
                 @include SuperSmallText;
 
                 > .buttons {
                     display: flex;
                     align-items: center;
                     justify-content: center;
-                    @include S(margin, 10px, 0);
+                    margin: 1rem 0;
 
                     > button {
-                        @include S(width, 60px);
-                        @include S(height, 60px);
-                        @include S(margin, 0, 10px);
+                        width: 6rem;
+                        height: 6rem;
+                        margin: 0 1rem;
                         box-sizing: border-box;
                         border-radius: 50%;
                         transition:
@@ -134,7 +134,7 @@
 
             > .buttonBar {
                 display: flex;
-                @include S(margin-top, 20px);
+                margin-top: 2rem;
 
                 button.continue {
                     background: #555;
@@ -149,18 +149,18 @@
                 }
 
                 > button {
-                    @include S(min-width, 100px);
-                    @include S(padding, 8px, 16px);
-                    @include S(margin, 0, 6px);
+                    min-width: 10rem;
+                    padding: 0.8rem 1.6rem;
+                    margin: 0 0.6rem;
                 }
             }
 
             > .actions {
                 position: absolute;
-                @include S(bottom, 40px);
+                bottom: 4rem;
 
                 display: grid;
-                @include S(grid-gap, 15px);
+                grid-gap: 1.5rem;
                 grid-auto-flow: column;
 
                 button {
diff --git a/src/css/ingame_hud/puzzle_dlc_logo.scss b/src/css/ingame_hud/puzzle_dlc_logo.scss
index 684cead4..bab78f5d 100644
--- a/src/css/ingame_hud/puzzle_dlc_logo.scss
+++ b/src/css/ingame_hud/puzzle_dlc_logo.scss
@@ -1,9 +1,9 @@
 #ingame_HUD_PuzzleDLCLogo {
     position: absolute;
-    @include S(width, 120px);
-    @include S(height, 40px);
-    @include S(left, 40px);
-    @include S(top, 7px);
+    width: 12rem;
+    height: 4rem;
+    left: 4rem;
+    top: 0.7rem;
 
     & {
         /* @load-async */
diff --git a/src/css/ingame_hud/puzzle_editor_controls.scss b/src/css/ingame_hud/puzzle_editor_controls.scss
index 7ce76b41..99f4cf5d 100644
--- a/src/css/ingame_hud/puzzle_editor_controls.scss
+++ b/src/css/ingame_hud/puzzle_editor_controls.scss
@@ -1,16 +1,16 @@
 #ingame_HUD_PuzzleEditorControls {
     position: absolute;
 
-    @include S(top, 70px);
-    @include S(left, 10px);
+    top: 7rem;
+    left: 1rem;
 
     display: flex;
     flex-direction: column;
     @include SuperDuperSmallText;
-    @include S(width, 200px);
+    width: 20rem;
 
     > span {
-        @include S(margin-bottom, 10px);
+        margin-bottom: 1rem;
 
         strong {
             font-weight: bold;
@@ -23,7 +23,7 @@
 #ingame_HUD_PuzzleEditorTitle {
     position: absolute;
 
-    @include S(top, 18px);
+    top: 1.8rem;
     left: 50%;
     transform: translateX(-50%);
     text-transform: uppercase;
diff --git a/src/css/ingame_hud/puzzle_editor_review.scss b/src/css/ingame_hud/puzzle_editor_review.scss
index ea09c03b..82ccbb24 100644
--- a/src/css/ingame_hud/puzzle_editor_review.scss
+++ b/src/css/ingame_hud/puzzle_editor_review.scss
@@ -1,13 +1,13 @@
 #ingame_HUD_PuzzleEditorReview {
     position: absolute;
-    @include S(top, 17px);
-    @include S(right, 10px);
+    top: 1.7rem;
+    right: 1rem;
 
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    backdrop-filter: blur(D(1px));
-    padding: D(3px);
+    backdrop-filter: blur(0.1rem);
+    padding: 0.3rem;
 
     > .button {
         @include ButtonText;
@@ -19,7 +19,7 @@
         text-transform: uppercase;
         transition-property: opacity, transform;
         @include PlainText;
-        @include S(padding-right, 25px);
+        padding-right: 2.5rem;
         opacity: 1;
 
         @include DarkThemeInvert;
@@ -34,14 +34,14 @@
 
         & {
             /* @load-async */
-            background: uiResource("icons/state_next_button.png") right center / D(15px) no-repeat;
+            background: uiResource("icons/state_next_button.png") right center / 1.5rem no-repeat;
         }
     }
 
     > .content {
         @include SuperDuperSmallText;
-        @include S(width, 180px);
-        @include S(padding-right, 25px);
+        width: 18rem;
+        padding-right: 2.5rem;
         text-align: right;
         text-transform: uppercase;
         color: $accentColorDark;
diff --git a/src/css/ingame_hud/puzzle_editor_settings.scss b/src/css/ingame_hud/puzzle_editor_settings.scss
index c9dd2c53..a3276524 100644
--- a/src/css/ingame_hud/puzzle_editor_settings.scss
+++ b/src/css/ingame_hud/puzzle_editor_settings.scss
@@ -1,15 +1,15 @@
 #ingame_HUD_PuzzleEditorSettings {
     position: absolute;
     background: $ingameHudBg;
-    @include S(padding, 10px);
-    @include S(bottom, 60px);
-    @include S(left, 10px);
+    padding: 1rem;
+    bottom: 6rem;
+    left: 1rem;
 
     @include SuperSmallText;
     color: #eee;
     display: flex;
     flex-direction: column;
-    @include S(border-radius, $globalBorderRadius);
+    border-radius: $globalBorderRadius;
 
     > .section {
         > label {
@@ -17,29 +17,29 @@
         }
 
         .plusMinus {
-            @include S(margin-top, 5px);
+            margin-top: 0.5rem;
             display: grid;
             grid-template-columns: 1fr auto auto auto;
             align-items: center;
-            @include S(grid-gap, 5px);
+            grid-gap: 0.5rem;
 
             label {
-                @include S(margin-right, 10px);
+                margin-right: 1rem;
             }
 
             button {
                 @include PlainText;
-                @include S(padding, 0);
+                padding: 0;
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                @include S(width, 15px);
-                @include S(height, 15px);
+                width: 1.5rem;
+                height: 1.5rem;
             }
 
             .value {
                 text-align: center;
-                @include S(min-width, 15px);
+                min-width: 1.5rem;
             }
         }
 
@@ -47,9 +47,9 @@
             > .buttonBar {
                 display: flex;
                 align-items: center;
-                @include S(margin-top, 10px);
+                margin-top: 1rem;
                 > button {
-                    @include S(margin-right, 4px);
+                    margin-right: 0.4rem;
                     @include SuperSmallText;
                     &:last-child {
                         margin-right: 0;
@@ -60,7 +60,7 @@
             > .buildingsButton {
                 display: grid;
                 align-items: center;
-                @include S(margin-top, 4px);
+                margin-top: 0.4rem;
                 > button {
                     @include SuperSmallText;
                 }
diff --git a/src/css/ingame_hud/puzzle_next.scss b/src/css/ingame_hud/puzzle_next.scss
index 896e64a7..de415ed7 100644
--- a/src/css/ingame_hud/puzzle_next.scss
+++ b/src/css/ingame_hud/puzzle_next.scss
@@ -1,13 +1,13 @@
 #ingame_HUD_PuzzleNextPuzzle {
     position: absolute;
-    @include S(top, 17px);
-    @include S(right, 10px);
+    top: 1.7rem;
+    right: 1rem;
 
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    backdrop-filter: blur(D(1px));
-    padding: D(3px);
+    backdrop-filter: blur(0.1rem);
+    padding: 0.3rem;
 
     > .button {
         @include ButtonText;
@@ -19,7 +19,7 @@
         text-transform: uppercase;
         transition-property: opacity, transform;
         @include PlainText;
-        @include S(padding-right, 25px);
+        padding-right: 2.5rem;
         opacity: 1;
 
         @include DarkThemeInvert;
@@ -34,7 +34,7 @@
 
         & {
             /* @load-async */
-            background: uiResource("icons/state_next_button.png") right center / D(15px) no-repeat;
+            background: uiResource("icons/state_next_button.png") right center / 1.5rem no-repeat;
         }
     }
 }
diff --git a/src/css/ingame_hud/puzzle_play_metadata.scss b/src/css/ingame_hud/puzzle_play_metadata.scss
index d0675b13..66ffa7de 100644
--- a/src/css/ingame_hud/puzzle_play_metadata.scss
+++ b/src/css/ingame_hud/puzzle_play_metadata.scss
@@ -1,18 +1,18 @@
 #ingame_HUD_PuzzlePlayMetadata {
     position: absolute;
 
-    @include S(top, 70px);
-    @include S(left, 10px);
+    top: 7rem;
+    left: 1rem;
 
     display: flex;
     flex-direction: column;
-    @include S(width, 200px);
+    width: 20rem;
 
     > .info {
         display: flex;
         flex-direction: column;
         @include SuperSmallText;
-        @include S(margin-bottom, 5px);
+        margin-bottom: 0.5rem;
 
         > label {
             text-transform: uppercase;
@@ -35,7 +35,7 @@
         justify-self: end;
         align-self: end;
         flex-direction: row;
-        @include S(margin-bottom, 10px);
+        margin-bottom: 1rem;
         opacity: 0.8;
         @include DarkThemeInvert;
         @include DarkThemeOverride {
@@ -48,8 +48,8 @@
             align-self: start;
             justify-self: start;
             font-weight: bold;
-            @include S(margin-right, 10px);
-            @include S(padding-left, 14px);
+            margin-right: 1rem;
+            padding-left: 1.4rem;
             opacity: 0.7;
             display: inline-flex;
             align-items: center;
@@ -57,7 +57,7 @@
 
             & {
                 /* @load-async */
-                background: uiResource("icons/puzzle_plays.png") #{D(2px)} center / #{D(8px)} #{D(8px)} no-repeat;
+                background: uiResource("icons/puzzle_plays.png") 0.2rem center / 0.8rem 0.8rem no-repeat;
             }
         }
 
@@ -69,25 +69,25 @@
             align-self: start;
             justify-self: start;
             font-weight: bold;
-            @include S(padding-left, 14px);
+            padding-left: 1.4rem;
             opacity: 0.7;
             & {
                 /* @load-async */
-                background: uiResource("icons/puzzle_upvotes.png") #{D(2px)} center / #{D(8px)} #{D(8px)} no-repeat;
+                background: uiResource("icons/puzzle_upvotes.png") 0.2rem center / 0.8rem 0.8rem no-repeat;
             }
         }
     }
 
     > .key {
         button {
-            @include S(margin-top, 2px);
+            margin-top: 0.2rem;
         }
     }
 
     button {
         @include SuperSmallText;
         align-self: start;
-        @include S(min-width, 50px);
+        min-width: 5rem;
 
         &.report {
             background-color: $accentColorDark;
@@ -100,7 +100,7 @@
         flex-direction: column;
 
         > button {
-            @include S(margin-bottom, 4px);
+            margin-bottom: 0.4rem;
         }
     }
 }
@@ -108,7 +108,7 @@
 #ingame_HUD_PuzzlePlayTitle {
     position: absolute;
 
-    @include S(top, 18px);
+    top: 1.8rem;
     left: 50%;
     transform: translateX(-50%);
     text-transform: uppercase;
diff --git a/src/css/ingame_hud/puzzle_play_settings.scss b/src/css/ingame_hud/puzzle_play_settings.scss
index b53d0829..e815732d 100644
--- a/src/css/ingame_hud/puzzle_play_settings.scss
+++ b/src/css/ingame_hud/puzzle_play_settings.scss
@@ -1,19 +1,19 @@
 #ingame_HUD_PuzzlePlaySettings {
     position: absolute;
     background: $ingameHudBg;
-    @include S(padding, 10px);
-    @include S(bottom, 60px);
-    @include S(left, 10px);
+    padding: 1rem;
+    bottom: 6rem;
+    left: 1rem;
 
     @include SuperSmallText;
     color: #eee;
     display: flex;
     flex-direction: column;
-    @include S(border-radius, $globalBorderRadius);
+    border-radius: $globalBorderRadius;
 
     > .section {
         display: grid;
-        @include S(grid-gap, 5px);
+        grid-gap: 0.5rem;
         grid-auto-flow: row;
 
         > button {
diff --git a/src/css/ingame_hud/sandbox_controller.scss b/src/css/ingame_hud/sandbox_controller.scss
index ca95b12f..5a86de35 100644
--- a/src/css/ingame_hud/sandbox_controller.scss
+++ b/src/css/ingame_hud/sandbox_controller.scss
@@ -1,9 +1,9 @@
 #ingame_HUD_SandboxController {
     position: absolute;
     background: $ingameHudBg;
-    @include S(padding, 5px);
-    @include S(bottom, 10px);
-    @include S(left, 10px);
+    padding: 0.5rem;
+    bottom: 1rem;
+    left: 1rem;
 
     @include SuperSmallText;
     color: #eee;
@@ -19,29 +19,29 @@
     }
 
     .plusMinus {
-        @include S(margin-top, 4px);
+        margin-top: 0.4rem;
         display: grid;
         grid-template-columns: 1fr auto auto;
         align-items: center;
-        @include S(grid-gap, 4px);
+        grid-gap: 0.4rem;
 
         button {
             @include PlainText;
-            @include S(padding, 0);
+            padding: 0;
             display: flex;
             align-items: center;
             justify-content: center;
-            @include S(width, 15px);
-            @include S(height, 15px);
+            width: 1.5rem;
+            height: 1.5rem;
         }
     }
 
     .additionalOptions {
         display: flex;
         flex-direction: column;
-        @include S(margin-top, 10px);
+        margin-top: 1rem;
         button {
-            @include S(margin-bottom, 2px);
+            margin-bottom: 0.2rem;
             @include SuperSmallText;
         }
     }
diff --git a/src/css/ingame_hud/settings_menu.scss b/src/css/ingame_hud/settings_menu.scss
index c9ddcb67..e03e3fef 100644
--- a/src/css/ingame_hud/settings_menu.scss
+++ b/src/css/ingame_hud/settings_menu.scss
@@ -1,9 +1,9 @@
 #ingame_HUD_SettingsMenu {
     .statsElement {
         position: absolute;
-        @include S(left, 30px);
-        @include S(right, 30px);
-        @include S(bottom, 30px);
+        left: 3rem;
+        right: 3rem;
+        bottom: 3rem;
         color: #fff;
         display: grid;
         grid-template-rows: auto auto;
@@ -31,8 +31,8 @@
     .buttons {
         display: grid;
         grid-auto-flow: column;
-        @include S(grid-gap, 50px);
-        @include S(margin-top, -10px);
+        grid-gap: 5rem;
+        margin-top: -1rem;
 
         button {
             background: transparent;
@@ -40,8 +40,8 @@
 
             content: "";
             opacity: 0.8;
-            @include S(width, 35px);
-            @include S(height, 35px);
+            width: 3.5rem;
+            height: 3.5rem;
 
             &.settings {
                 /* @load-async */
diff --git a/src/css/ingame_hud/shape_viewer.scss b/src/css/ingame_hud/shape_viewer.scss
index 186d255c..7b5f4beb 100644
--- a/src/css/ingame_hud/shape_viewer.scss
+++ b/src/css/ingame_hud/shape_viewer.scss
@@ -1,39 +1,41 @@
+@use "sass:math";
+
 #ingame_HUD_ShapeViewer {
-    $dims: 170px;
+    $dims: 17rem;
 
     .content {
         display: flex;
-        @include S(width, $dims);
+        width: $dims;
         width: 100%;
         flex-direction: column;
         overflow-x: hidden;
 
         &[data-layers="3"],
         &[data-layers="4"] {
-            @include S(width, 2 * $dims);
+            width: 2 * $dims;
             .renderArea {
                 display: grid;
                 grid-template-columns: 1fr 1fr;
-                @include S(grid-row-gap, 15px);
+                grid-row-gap: 1.5rem;
             }
         }
 
         .renderArea {
             display: grid;
             width: 100%;
-            @include S(grid-row-gap, 10px);
+            grid-row-gap: 1rem;
             place-items: center;
         }
 
         .infoArea {
             align-self: flex-end;
-            @include S(margin-top, 10px);
+            margin-top: 1rem;
             display: flex;
             flex-direction: column;
             overflow: hidden;
 
             button {
-                @include S(margin, 0);
+                margin: 0;
                 @include PlainText;
             }
         }
@@ -45,16 +47,16 @@
             @include DarkThemeOverride {
                 background: rgba(0, 10, 20, 0.2);
             }
-            @include S(width, 150px);
-            @include S(height, 100px);
+            width: 15rem;
+            height: 10rem;
             display: flex;
             align-items: center;
             justify-content: center;
-            @include S(border-radius, $globalBorderRadius);
+            border-radius: $globalBorderRadius;
 
             > canvas {
-                @include S(width, 50px);
-                @include S(height, 50px);
+                width: 5rem;
+                height: 5rem;
             }
 
             .quad {
@@ -66,27 +68,27 @@
                 align-items: center;
                 box-sizing: border-box;
 
-                $arrowDims: 23px;
-                $spacing: 9px;
-                @include S(padding, 6px);
+                $arrowDims: 2.3rem;
+                $spacing: 0.9rem;
+                padding: 0.6rem;
 
                 .colorLabel {
                     text-transform: uppercase;
                     @include SuperSmallText;
-                    @include S(font-size, 9px);
+                    font-size: 0.9rem;
                 }
 
                 .emptyLabel {
                     text-transform: uppercase;
                     @include SuperSmallText;
-                    @include S(font-size, 9px);
+                    font-size: 0.9rem;
                 }
 
                 &::after {
                     content: " ";
                     background: rgba(0, 10, 20, 0.5);
-                    @include S(width, $arrowDims);
-                    @include S(height, 1px);
+                    width: $arrowDims;
+                    height: 0.1rem;
                     position: absolute;
                     transform: rotate(45deg);
                     transform-origin: 50% 50%;
@@ -104,8 +106,8 @@
                     justify-content: flex-end;
 
                     &::after {
-                        @include S(left, $spacing);
-                        @include S(bottom, $arrowDims / 2 + $spacing);
+                        left: $spacing;
+                        bottom: math.div($arrowDims, 2) + $spacing;
                         transform: rotate(-45deg);
                     }
                 }
@@ -117,8 +119,8 @@
                     justify-content: flex-end;
 
                     &::after {
-                        @include S(left, $spacing);
-                        @include S(top, $arrowDims / 2 + $spacing);
+                        left: $spacing;
+                        top: math.div($arrowDims, 2) + $spacing;
                         transform: rotate(45deg);
                     }
                 }
@@ -130,8 +132,8 @@
                     justify-content: flex-start;
 
                     &::after {
-                        @include S(right, $spacing);
-                        @include S(top, $arrowDims / 2 + $spacing);
+                        right: $spacing;
+                        top: math.div($arrowDims, 2) + $spacing;
                         transform: rotate(135deg);
                     }
                 }
@@ -143,8 +145,8 @@
                     justify-content: flex-start;
 
                     &::after {
-                        @include S(right, $spacing);
-                        @include S(bottom, $arrowDims / 2 + $spacing);
+                        right: $spacing;
+                        bottom: math.div($arrowDims, 2) + $spacing;
                         transform: rotate(225deg);
                     }
                 }
diff --git a/src/css/ingame_hud/shop.scss b/src/css/ingame_hud/shop.scss
index fc682090..284a076c 100644
--- a/src/css/ingame_hud/shop.scss
+++ b/src/css/ingame_hud/shop.scss
@@ -1,20 +1,20 @@
 #ingame_HUD_Shop {
     .content {
-        @include S(padding-right, 10px);
+        padding-right: 1rem;
         display: flex;
         flex-direction: column;
-        @include S(width, 500px);
+        width: 50rem;
 
         .upgrade {
             display: grid;
             grid-template-columns: auto 1fr auto;
             background: #eee;
-            @include S(border-radius, $globalBorderRadius);
-            @include S(margin-bottom, 4px);
-            @include S(padding, 5px, 10px);
-            @include S(grid-row-gap, 1px);
-            @include S(height, 85px);
-            grid-template-rows: #{D(20px)} auto;
+            border-radius: $globalBorderRadius;
+            margin-bottom: 0.4rem;
+            padding: 0.5rem 1rem;
+            grid-row-gap: 0.1rem;
+            height: 8.5rem;
+            grid-template-rows: #{2rem} auto;
 
             &:last-child {
                 margin-bottom: 0;
@@ -38,16 +38,16 @@
                 }
 
                 .tier {
-                    @include S(margin-right, 9px);
+                    margin-right: 0.9rem;
                     background: $colorGreenBright;
-                    @include S(border-radius, $globalBorderRadius);
+                    border-radius: $globalBorderRadius;
                     text-transform: uppercase;
                     @include PlainText;
                     color: #fff;
                     text-align: center;
                     font-weight: bold;
-                    @include S(min-width, 50px);
-                    @include S(padding, 0px, 5px);
+                    min-width: 5rem;
+                    padding: 0rem 0.5rem;
 
                     &[data-tier="0"] {
                         background-color: rgb(73, 186, 190);
@@ -74,15 +74,15 @@
             }
 
             .icon {
-                @include S(width, 40px);
-                @include S(height, 40px);
+                width: 4rem;
+                height: 4rem;
                 background: center center / 80% no-repeat;
                 align-self: center;
                 justify-self: center;
                 grid-column: 1 / 2;
                 grid-row: 2 / 4;
-                @include S(margin-right, 30px);
-                @include S(margin-left, 10px);
+                margin-right: 3rem;
+                margin-left: 1rem;
                 opacity: 0.32;
                 display: none;
             }
@@ -101,7 +101,7 @@
                 grid-row: 3 / 4;
                 display: grid;
                 grid-auto-flow: column;
-                @include S(grid-gap, 9px);
+                grid-gap: 0.9rem;
                 justify-content: start;
 
                 .requirement {
@@ -109,7 +109,7 @@
                     display: flex;
                     flex-direction: column;
                     align-items: center;
-                    @include S(width, 70px);
+                    width: 7rem;
                     overflow: hidden;
 
                     button.pin {
@@ -118,11 +118,11 @@
                             background: uiResource("icons/pin.png") center center / 95% no-repeat;
                         }
 
-                        @include S(width, 12px);
-                        @include S(height, 12px);
+                        width: 1.2rem;
+                        height: 1.2rem;
                         position: absolute;
-                        @include S(top, 2px);
-                        @include S(right, 2px);
+                        top: 0.2rem;
+                        right: 0.2rem;
                         opacity: 0.6;
                         cursor: pointer;
                         pointer-events: all;
@@ -206,11 +206,11 @@
                     }
 
                     button.showInfo {
-                        @include S(width, 11px);
-                        @include S(height, 11px);
+                        width: 1.1rem;
+                        height: 1.1rem;
                         position: absolute;
-                        @include S(top, 17px);
-                        @include S(right, 2.5px);
+                        top: 1.7rem;
+                        right: 0.25rem;
                         opacity: 0.5;
                         cursor: pointer;
                         pointer-events: all;
@@ -227,23 +227,23 @@
                     }
 
                     canvas {
-                        @include S(width, 40px);
-                        @include S(height, 40px);
+                        width: 4rem;
+                        height: 4rem;
                     }
 
                     .amount {
-                        @include S(margin-top, 4px);
+                        margin-top: 0.4rem;
                         z-index: 10;
                         @include SuperSmallText;
                         background: #e2e4e6;
 
-                        @include S(line-height, 13px);
-                        @include S(border-radius, $globalBorderRadius);
-                        @include S(padding, 1px, 0px, 2px);
+                        line-height: 1.3rem;
+                        border-radius: $globalBorderRadius;
+                        padding: 0.1rem 0 0.2rem;
                         position: relative;
                         text-align: center;
-                        @include S(min-width, 50px);
-                        // @include S(max-width, 100px);
+                        min-width: 5rem;
+                        // max-width: 10.0rem;
                         overflow: hidden;
                         width: 100%;
 
@@ -257,7 +257,7 @@
                             left: 0;
                             right: 0;
                             top: 0;
-                            @include S(border-radius, $globalBorderRadius);
+                            border-radius: $globalBorderRadius;
                             position: absolute;
                             display: inline-block;
                             z-index: -1;
@@ -286,7 +286,7 @@
                 grid-row: 3 / 4;
                 align-self: center;
                 justify-self: end;
-                // @include S(padding, 4px, 5px);
+                // padding: .4rem  .5rem;
                 // @include PlainText;
                 background-color: $colorGreenBright;
                 color: #fff;
diff --git a/src/css/ingame_hud/statistics.scss b/src/css/ingame_hud/statistics.scss
index 198aa16b..ea307b89 100644
--- a/src/css/ingame_hud/statistics.scss
+++ b/src/css/ingame_hud/statistics.scss
@@ -1,6 +1,6 @@
 #ingame_HUD_Statistics {
     .content {
-        @include S(width, 500px);
+        width: 50rem;
     }
 
     .filterHeader {
@@ -10,31 +10,31 @@
         justify-items: end;
 
         button {
-            @include S(height, 20px);
-            @include S(padding, 1px, 10px);
+            height: 2rem;
+            padding: 0.1rem 1rem;
             border: 0;
             box-shadow: none;
-            @include S(min-width, 30px);
+            min-width: 3rem;
             color: #fff;
             opacity: 0.25;
-            @include S(border-radius, $globalBorderRadius);
+            border-radius: $globalBorderRadius;
 
             border-radius: 0;
             &:first-child {
-                @include S(border-top-left-radius, $globalBorderRadius);
-                @include S(border-bottom-left-radius, $globalBorderRadius);
+                border-top-left-radius: $globalBorderRadius;
+                border-bottom-left-radius: $globalBorderRadius;
             }
 
             &:last-child {
-                @include S(border-top-right-radius, $globalBorderRadius);
-                @include S(border-bottom-right-radius, $globalBorderRadius);
+                border-top-right-radius: $globalBorderRadius;
+                border-bottom-right-radius: $globalBorderRadius;
             }
 
             &.displayIcons,
             &.displayDetailed,
             &.displaySorted,
             &.displayIterateUnit {
-                background: transparent center center / #{D(15px)} no-repeat;
+                background: transparent center center / 1.5rem no-repeat;
             }
 
             &.displayDetailed {
@@ -45,12 +45,12 @@
             &.displayIcons {
                 /* @load-async */
                 background-image: uiResource("icons/display_icons.png");
-                background-size: #{D(11.5px)};
+                background-size: 1.15rem;
             }
 
             &.displayDetailed {
-                @include S(border-top-left-radius, $globalBorderRadius);
-                @include S(border-bottom-left-radius, $globalBorderRadius);
+                border-top-left-radius: $globalBorderRadius;
+                border-bottom-left-radius: $globalBorderRadius;
             }
 
             &.displaySorted {
@@ -58,12 +58,12 @@
                     /* @load-async */
                     background-image: uiResource("icons/display_sorted.png");
                 }
-                background-size: #{D(11.5px)};
+                background-size: 1.15rem;
                 margin-right: 5px;
-                @include S(border-top-right-radius, $globalBorderRadius);
-                @include S(border-bottom-right-radius, $globalBorderRadius);
+                border-top-right-radius: $globalBorderRadius;
+                border-bottom-right-radius: $globalBorderRadius;
 
-                @include S(padding, 1px, 0);
+                padding: 0.1rem 0;
             }
 
             &.displayIterateUnit {
@@ -72,7 +72,7 @@
                     background-image: uiResource("icons/toggle_unit.png");
                 }
                 opacity: 0.8;
-                @include S(padding, 1px, 0);
+                padding: 0.1rem 0;
             }
 
             background-color: #44484a !important;
@@ -100,20 +100,20 @@
 
     .sourceExplanation {
         @include SuperSmallText();
-        @include S(margin-top, 5px);
+        margin-top: 0.5rem;
         color: #aaa;
     }
 
     .content {
-        @include S(margin-top, 10px);
-        @include S(height, 350px);
+        margin-top: 1rem;
+        height: 35rem;
         overflow-y: scroll;
         display: flex;
         flex-direction: column;
 
         justify-content: flex-start;
 
-        @include S(padding-right, 4px);
+        padding-right: 0.4rem;
 
         > .noEntries {
             width: 100%;
@@ -127,12 +127,12 @@
 
         > div {
             background: #f4f4f4;
-            @include S(margin-bottom, 4px);
+            margin-bottom: 0.4rem;
             display: grid;
-            @include S(border-radius, $globalBorderRadius);
+            border-radius: $globalBorderRadius;
 
             grid-template-columns: 1fr auto;
-            @include S(padding, 5px);
+            padding: 0.5rem;
             &:last-child {
                 margin-bottom: 0;
             }
@@ -152,13 +152,13 @@
             canvas.icon {
                 grid-column: 1 / 2;
                 grid-row: 1 / 2;
-                @include S(width, 40px);
-                @include S(height, 40px);
+                width: 4rem;
+                height: 4rem;
             }
 
             .counter {
                 @include SuperSmallText;
-                @include S(padding, 0, 3px);
+                padding: 0, 0.3rem;
             }
         }
     }
@@ -176,12 +176,12 @@
         &[data-displaymode="icons"] .content.hasEntries {
             display: grid;
             grid-template-columns: repeat(6, 1fr);
-            grid-auto-rows: #{D(73px)};
+            grid-auto-rows: 7.3rem;
             align-items: flex-start;
-            @include S(grid-column-gap, 3px);
+            grid-column-gap: 0.3rem;
             > div {
-                @include S(grid-row-gap, 5px);
-                @include S(height, 60px);
+                grid-row-gap: 0.5rem;
+                height: 6rem;
                 grid-template-columns: 1fr;
                 grid-template-rows: 1fr auto;
                 place-items: center;
@@ -200,10 +200,10 @@
         }
         &[data-displaymode="detailed"] .content.hasEntries {
             > div {
-                @include S(padding, 10px);
-                @include S(height, 40px);
+                padding: 1rem;
+                height: 4rem;
                 grid-template-columns: auto 1fr auto;
-                @include S(grid-column-gap, 15px);
+                grid-column-gap: 1.5rem;
 
                 .counter {
                     grid-column: 3 / 4;
@@ -219,14 +219,13 @@
                 }
 
                 canvas.graph {
-                    @include S(width, 270px);
-                    @include S(height, 40px);
-                    @include S(border-radius, 0, 0, 2px, 2px);
+                    width: 27rem;
+                    height: 4rem;
+                    border-radius: 0 0 0.2rem 0.2rem;
                     $color: rgba(0, 10, 20, 0.04);
                     // background: $color;
-                    border: #{D(4px)} solid transparent;
-                    // @include S(border-width, 1px, 0, 1px, 0);
-                    @include S(margin-top, -3px);
+                    border: 0.4rem solid transparent;
+                    margin-top: -0.3rem;
                 }
             }
         }
diff --git a/src/css/ingame_hud/tutorial_hints.scss b/src/css/ingame_hud/tutorial_hints.scss
index aad3b714..14d86377 100644
--- a/src/css/ingame_hud/tutorial_hints.scss
+++ b/src/css/ingame_hud/tutorial_hints.scss
@@ -1,10 +1,10 @@
 #ingame_HUD_TutorialHints {
     position: absolute;
-    @include S(left, 10px);
-    @include S(bottom, 10px);
+    left: 1rem;
+    bottom: 1rem;
 
     @include StyleBelowWidth(1430px) {
-        @include S(bottom, 50px);
+        bottom: 5rem;
     }
 
     display: flex;
@@ -16,11 +16,11 @@
 
     transition-property: background-color, transform, bottom, left;
 
-    @include S(padding, 5px);
+    padding: 0.5rem;
     video {
         transition: all 0.2s ease-in-out;
         transition-property: opacity, width;
-        @include S(width, 0px);
+        width: 0rem;
         opacity: 0;
         z-index: 10;
         position: relative;
@@ -30,9 +30,9 @@
         color: #333438;
         display: grid;
         align-items: center;
-        @include S(grid-gap, 2px);
+        grid-gap: 0.2rem;
         grid-template-columns: 1fr;
-        @include S(margin-bottom, 3px);
+        margin-bottom: 0.3rem;
         z-index: 11;
         position: relative;
 
@@ -44,10 +44,10 @@
             justify-content: flex-start;
             align-items: center;
             &::before {
-                @include S(margin-right, 4px);
+                margin-right: 0.4rem;
                 content: " ";
-                @include S(width, 12px);
-                @include S(height, 12px);
+                width: 1.2rem;
+                height: 1.2rem;
                 display: inline-block;
                 & {
                     /* @load-async */
@@ -100,12 +100,12 @@
             @include InlineAnimation(0.2s ease-in-out) {
                 0% {
                     opacity: 0;
-                    @include S(width, 0px);
+                    width: 0rem;
                 }
             }
 
             opacity: 1;
-            @include S(width, 500px);
+            width: 50rem;
         }
         button.toggleHint {
             .hide {
diff --git a/src/css/ingame_hud/unlock_notification.scss b/src/css/ingame_hud/unlock_notification.scss
index 88ea3952..1cf1e59d 100644
--- a/src/css/ingame_hud/unlock_notification.scss
+++ b/src/css/ingame_hud/unlock_notification.scss
@@ -9,7 +9,7 @@
 
     & {
         /* @load-async */
-        background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / #{D(10px)} repeat;
+        background: rgba(#333538, 0.98) uiResource("dialog_bg_pattern.png") top left / 1rem repeat;
     }
 
     @include InlineAnimation(0.1s ease-in-out) {
@@ -20,8 +20,8 @@
 
     .dialog {
         // background: rgba(#222428, 0.5);
-        @include S(border-radius, $globalBorderRadius);
-        @include S(padding, 30px);
+        border-radius: $globalBorderRadius;
+        padding: 3rem;
 
         @include InlineAnimation(0.5s ease-in-out) {
             0% {
@@ -38,7 +38,7 @@
         .subTitle {
             @include SuperHeading;
             text-transform: uppercase;
-            @include S(font-size, 40px);
+            font-size: 4rem;
 
             @include InlineAnimation(0.5s ease-in-out) {
                 0% {
@@ -56,10 +56,10 @@
         .subTitle {
             @include PlainText;
             display: inline-block;
-            @include S(margin, 5px, 0, 20px);
+            margin: 0.5rem 0 2rem;
             color: $colorGreenBright;
 
-            @include S(border-radius, $globalBorderRadius);
+            border-radius: $globalBorderRadius;
             @include InlineAnimation(0.5s ease-in-out) {
                 0% {
                     transform: translateY(-60vh);
@@ -74,7 +74,7 @@
         }
 
         .contents {
-            @include S(width, 400px);
+            width: 40rem;
             @include InlineAnimation(0.5s ease-in-out) {
                 0% {
                     transform: translateX(-100vw);
@@ -91,7 +91,7 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            @include S(grid-gap, 10px);
+            grid-gap: 1rem;
 
             .rewardName {
                 grid-column: 1 / 3;
@@ -113,9 +113,9 @@
             .rewardDesc {
                 grid-column: 1 / 3;
                 @include PlainText;
-                @include S(margin-bottom, 15px);
+                margin-bottom: 1.5rem;
                 color: #aaacaf;
-                @include S(width, 400px);
+                width: 40rem;
                 text-align: left;
                 strong {
                     color: #fff;
@@ -125,14 +125,14 @@
             .images {
                 display: flex;
                 .buildingExplanation {
-                    @include S(width, 200px);
-                    @include S(height, 200px);
+                    width: 20rem;
+                    height: 20rem;
                     display: inline-block;
                     background-position: center center;
                     background-size: cover;
                     background-repeat: no-repeat;
-                    @include S(border-radius, $globalBorderRadius);
-                    box-shadow: #{D(2px)} #{D(3px)} 0 0 rgba(0, 0, 0, 0.15);
+                    border-radius: $globalBorderRadius;
+                    box-shadow: 0.2rem 0.3rem 0 0 rgba(0, 0, 0, 0.15);
                 }
             }
         }
@@ -140,7 +140,7 @@
         button.close {
             border: 0;
             position: relative;
-            @include S(margin-top, 30px);
+            margin-top: 3rem;
 
             &:not(.unlocked) {
                 pointer-events: none;
diff --git a/src/css/ingame_hud/waypoints.scss b/src/css/ingame_hud/waypoints.scss
index 5cb2fe31..a5a7ee77 100644
--- a/src/css/ingame_hud/waypoints.scss
+++ b/src/css/ingame_hud/waypoints.scss
@@ -1,18 +1,18 @@
 #ingame_HUD_Waypoints_Hint {
     position: absolute;
-    @include S(right, 10px);
-    @include S(bottom, 10px);
+    right: 1rem;
+    bottom: 1rem;
 
     display: flex;
     flex-direction: column;
 
     @include PlainText;
-    @include S(width, 150px);
+    width: 15rem;
     background: $ingameHudBg;
-    @include S(padding, 7px);
+    padding: 0.7rem;
 
     color: #eee;
-    @include S(border-radius, $globalBorderRadius);
+    border-radius: $globalBorderRadius;
 
     .desc {
         @include SuperSmallText;
@@ -29,8 +29,8 @@
 
 #ingame_HUD_Waypoints {
     position: absolute;
-    @include S(right, 10px);
-    @include S(top, 45px);
+    right: 1rem;
+    top: 4.5rem;
     display: flex;
     flex-direction: column;
     @include DarkThemeInvert();
@@ -39,14 +39,14 @@
     overflow-x: hidden;
     overflow-y: auto;
     pointer-events: all;
-    @include S(padding-right, 5px);
-    @include S(padding-bottom, 5px);
-    @include S(padding-top, 5px);
+    padding-right: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-top: 0.5rem;
 
     // Scrollbar
     &::-webkit-scrollbar {
-        @include S(width, 2px);
-        @include S(height, 6px);
+        width: 0.2rem;
+        height: 0.6rem;
     }
 
     .waypoint {
@@ -54,13 +54,13 @@
         pointer-events: all;
         cursor: pointer;
         color: #333438;
-        @include S(padding-left, 11px);
+        padding-left: 1.1rem;
         display: grid;
         grid-template-columns: 1fr auto;
         align-items: center;
         & {
             /* @load-async */
-            background: uiResource("icons/waypoint.png") left 50% / #{D(8px)} no-repeat;
+            background: uiResource("icons/waypoint.png") left 50% / 0.8rem no-repeat;
         }
 
         &.layer--wires {
@@ -69,7 +69,7 @@
         }
 
         opacity: 0.7;
-        @include S(margin-bottom, 1px);
+        margin-bottom: 0.1rem;
         font-weight: bold;
 
         &:hover {
@@ -77,9 +77,9 @@
         }
 
         .editButton {
-            @include S(width, 10px);
-            @include S(height, 10px);
-            @include S(margin-left, 4px);
+            width: 1rem;
+            height: 1rem;
+            margin-left: 0.4rem;
             & {
                 /* @load-async */
                 background: uiResource("icons/edit_key.png") center center / 70% no-repeat;
@@ -96,22 +96,22 @@
 
         &.hub {
             // Transform because there is a canvas before
-            @include S(margin-left, -2px);
+            margin-left: -0.2rem;
 
             grid-template-columns: auto 1fr;
             background: none !important;
-            @include S(padding-left, 0);
+            padding-left: 0;
             canvas {
-                @include S(width, 12px);
-                @include S(height, 12px);
-                @include S(margin-right, 1px);
+                width: 1.2rem;
+                height: 1.2rem;
+                margin-right: 0.1rem;
             }
         }
 
         &.shapeIcon {
             canvas {
-                @include S(width, 15px);
-                @include S(height, 15px);
+                width: 1.5rem;
+                height: 1.5rem;
                 pointer-events: none;
                 // Double invert, to make sure it has the right color
                 @include DarkThemeInvert();
diff --git a/src/css/main.scss b/src/css/main.scss
index 006e8150..9592666c 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -7,7 +7,6 @@
 }
 
 @import "resources";
-@import "dynamic_ui";
 @import "variables";
 
 @import "mixins";
diff --git a/src/css/mixins.scss b/src/css/mixins.scss
index dfd5f602..7a4c0e1a 100644
--- a/src/css/mixins.scss
+++ b/src/css/mixins.scss
@@ -54,33 +54,10 @@
 
     $borderSize: 1.5px;
     $borderColor: rgb(18, 20, 24);
-
-    // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
-    //     0 D($size) 0 D($borderSize) $borderColor;
-
-    // box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($size) 0 D($borderSize) $borderColor,
-    //     D(-$size * 1.5) D($size * 2) 0 D($borderSize) rgba(0, 0, 0, 0.1);
-
-    // transition: box-shadow 0.1s ease-in-out;
-
-    // @if $pressEffect {
-    //     &.pressed {
-    //         transform: none !important;
-    //         $pSize: max(0, $size - 1.5px);
-    //         transition: none !important;
-    //         box-shadow: 0 0 0 D($borderSize) $borderColor, 0 D($pSize) 0 0px rgba(mix(darken($bgColor, 9), #b0e2ff, 95%), 1),
-    //             0 D($pSize) 0 D($borderSize) $borderColor;
-    //         top: D($size - $pSize);
-    //     }
-    // }
 }
 
-@mixin BoxShadow($x, $y, $blur, $offset, $color) {
-    box-shadow: D($x) D($y) D($blur) D($offset) $color;
-}
-
-@mixin DropShadow($yOffset: 2px, $blur: 2px, $amount: 0.2) {
-    @include BoxShadow(0, $yOffset, $blur, 0, rgba(#000, $amount));
+@mixin DropShadow($yOffset: 0.2rem, $blur: 0.2rem, $amount: 0.2) {
+    box-shadow: 0 $yOffset $blur 0 rgba(#000, $amount);
 }
 
 @mixin Button3D($bgColor, $pressEffect: true) {
diff --git a/src/css/states/about.scss b/src/css/states/about.scss
index 02025e03..5d1e2151 100644
--- a/src/css/states/about.scss
+++ b/src/css/states/about.scss
@@ -1,26 +1,26 @@
 #state_AboutState {
     > .container .content {
-        @include S(max-width, 600px);
+        max-width: 60rem;
         @include PlainText;
         padding: 0;
         background: transparent;
     }
 
     .head {
-        @include S(padding, 20px);
+        padding: 2rem;
 
         img {
             display: block;
             margin: 0 auto;
-            @include S(max-width, 200px);
+            max-width: 20rem;
         }
     }
 
     .text {
-        @include S(margin, 10px);
+        margin: 1rem;
     }
 
     a {
-        @include S(margin, 0, 3px);
+        margin: 0 0.3rem;
     }
 }
diff --git a/src/css/states/changelog.scss b/src/css/states/changelog.scss
index 1daa5f04..2ecceadf 100644
--- a/src/css/states/changelog.scss
+++ b/src/css/states/changelog.scss
@@ -1,6 +1,6 @@
 #state_ChangelogState {
     .content {
-        @include S(max-width, 800px);
+        max-width: 80rem;
         display: flex;
         flex-direction: column;
     }
@@ -19,12 +19,12 @@
 
         .changes {
             @include PlainText;
-            @include S(padding-left, 20px);
+            padding-left: 2rem;
             strong {
                 color: #aaa;
                 text-transform: uppercase;
-                @include S(padding, 1px, 2px);
-                @include S(margin-right, 3px);
+                padding: 0.1rem 0.2rem;
+                margin-right: 0.3rem;
             }
         }
     }
diff --git a/src/css/states/ingame.scss b/src/css/states/ingame.scss
index 064a7210..381603a8 100644
--- a/src/css/states/ingame.scss
+++ b/src/css/states/ingame.scss
@@ -16,9 +16,9 @@
 
     .prefab_GameHint {
         position: absolute;
-        @include S(bottom, 40px);
-        @include S(left, 20px);
-        @include S(right, 20px);
+        bottom: 4rem;
+        left: 2rem;
+        right: 2rem;
         @include PlainText;
         text-align: center;
 
diff --git a/src/css/states/keybindings.scss b/src/css/states/keybindings.scss
index 8b0373e7..4111bf80 100644
--- a/src/css/states/keybindings.scss
+++ b/src/css/states/keybindings.scss
@@ -3,26 +3,26 @@
         .topEntries {
             display: grid;
             grid-template-columns: 1fr auto;
-            @include S(grid-gap, 5px);
-            @include S(margin-bottom, 10px);
+            grid-gap: 0.5rem;
+            margin-bottom: 1rem;
         }
 
         .hint {
             display: block;
             background: #eee;
-            @include S(padding, 6px, 10px);
+            padding: 0.6rem 1rem;
             @include PlainText;
-            @include S(border-radius, $globalBorderRadius);
+            border-radius: $globalBorderRadius;
         }
 
         .category {
             .entry {
                 display: grid;
-                @include S(margin-top, 2px);
-                @include S(padding-top, 2px);
-                @include S(grid-gap, 4px);
-                grid-template-columns: 1fr #{D(100px)} auto auto;
-                border-bottom: #{D(1px)} dotted #eee;
+                margin-top: 0.2rem;
+                padding-top: 0.2rem;
+                grid-gap: 0.4rem;
+                grid-template-columns: 1fr 10rem auto auto;
+                border-bottom: 0.1rem dotted #eee;
                 color: #888c8f;
                 .mapping {
                     color: $colorBlueBright;
@@ -30,8 +30,8 @@
                 }
 
                 button {
-                    @include S(height, 15px);
-                    @include S(width, 15px);
+                    height: 1.5rem;
+                    width: 1.5rem;
                     background: transparent center center / 40% no-repeat;
                     opacity: 0.9;
                     &.editKeybinding {
diff --git a/src/css/states/main_menu.scss b/src/css/states/main_menu.scss
index b0a5d410..f6acaf0c 100644
--- a/src/css/states/main_menu.scss
+++ b/src/css/states/main_menu.scss
@@ -2,7 +2,7 @@
     display: grid;
     align-items: center;
     justify-content: center;
-    grid-template-rows: D(95px) 1fr D(100px);
+    grid-template-rows: 9.5rem 1fr 10rem;
     grid-template-columns: 1fr;
 
     // background: #aaacb4 center center / cover !important;
@@ -10,21 +10,21 @@
 
     .topButtons {
         position: absolute;
-        @include S(top, 25px);
-        @include S(right, 25px);
+        top: 2.5rem;
+        right: 2.5rem;
         display: flex;
         flex-direction: row;
         z-index: 20;
-        @include S(gap, 9px);
+        gap: 0.9rem;
 
         .settingsButton,
         .exitAppButton,
         .languageChoose {
-            @include S(width, 35px);
-            @include S(height, 35px);
+            width: 3.5rem;
+            height: 3.5rem;
             pointer-events: all;
             border-radius: 50%;
-            box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1);
+            box-shadow: 0 0.2rem 0.3rem rgba(#000, 0.1);
             background: rgba(#fff, 1) uiResource("icons/main_menu_settings.png") center center / 70% no-repeat;
 
             cursor: pointer;
@@ -75,7 +75,7 @@
         opacity: 0;
         display: none;
         transform: translate(50%, 50%);
-        filter: blur(D(10px));
+        filter: blur(1rem);
 
         $opacity: 0.4;
         &.loaded {
@@ -94,12 +94,12 @@
     }
 
     .mainWrapper {
-        @include S(margin-top, 15px);
+        margin-top: 1.5rem;
         align-items: start;
         justify-items: center;
         align-self: center;
         justify-self: center;
-        @include S(grid-column-gap, 20px);
+        grid-column-gap: 2rem;
         display: grid;
 
         position: relative;
@@ -110,7 +110,7 @@
             grid-template-columns: 1fr;
         }
         &[data-columns="2"] {
-            grid-template-columns: D(290px) 1fr;
+            grid-template-columns: 29rem 1fr;
         }
     }
 
@@ -122,14 +122,14 @@
         z-index: 20;
 
         flex-direction: column;
-        @include S(padding-top, 0px);
+        padding-top: 0rem;
 
         img {
-            @include S(width, 710px / 3);
-            @include S(height, 180px / 3);
+            width: 710px / 3;
+            height: 180px / 3;
         }
         position: relative;
-        @include S(left, -8px);
+        left: -0.8rem;
     }
 
     .sideContainer {
@@ -137,7 +137,7 @@
         width: 100%;
         grid-column: 2 / 3;
         flex-direction: column;
-        @include S(grid-gap, 20px);
+        grid-gap: 2rem;
 
         .puzzleContainer {
             display: flex;
@@ -149,38 +149,38 @@
             width: 100%;
             box-sizing: border-box;
             position: relative;
-            @include S(border-radius, $globalBorderRadius);
-            box-shadow: 0 D(5px) D(10px) rgba(#000, 0.4);
-            border: D(1px) solid rgba(#000, 0.1);
+            border-radius: $globalBorderRadius;
+            box-shadow: 0 0.5rem 1rem rgba(#000, 0.4);
+            border: 0.1rem solid rgba(#000, 0.1);
             overflow: hidden;
 
             > button {
-                @include S(margin-top, 20px);
+                margin-top: 2rem;
                 @include Heading;
-                @include S(padding, 10px, 30px);
+                padding: 1rem 3rem;
                 background-color: #333;
                 color: #fff;
             }
 
             &.owned {
-                @include S(height, 118px);
-                @include S(width, 250px);
-                background: uiResource("puzzle_460x215_15.png") center D(-5px) / cover repeat;
+                height: 11.8rem;
+                width: 25rem;
+                background: uiResource("puzzle_460x215_15.png") center -0.5rem / cover repeat;
 
                 > button {
                     pointer-events: all;
-                    @include S(padding, 4px, 10px);
+                    padding: 0.4rem 1rem;
                     margin: 0;
                     background: #47c599;
                     box-sizing: border-box;
                     position: absolute;
-                    @include S(top, 10px);
-                    @include S(right, 10px);
+                    top: 1rem;
+                    right: 1rem;
                     z-index: 100;
                     @include PlainText;
                     z-index: 200;
                     color: #111215;
-                    box-shadow: 0 D(2px) D(9px) rgba(#000, 0.4);
+                    box-shadow: 0 0.2rem 0.9rem rgba(#000, 0.4);
                 }
             }
         }
@@ -195,11 +195,11 @@
             position: relative;
             text-align: left;
             align-items: flex-start;
-            @include S(width, 250px);
-            @include S(padding, 15px);
-            @include S(padding-bottom, 10px);
-            @include S(border-radius, $globalBorderRadius);
-            box-shadow: 0 D(5px) D(15px) rgba(#000, 0.2);
+            width: 25rem;
+            padding: 1.5rem;
+            padding-bottom: 1rem;
+            border-radius: $globalBorderRadius;
+            box-shadow: 0 0.5rem 1.5rem rgba(#000, 0.2);
 
             .header {
                 display: flex;
@@ -207,12 +207,12 @@
                 align-items: center;
                 text-transform: uppercase;
 
-                @include S(margin-bottom, 10px);
+                margin-bottom: 1rem;
 
                 .editMods {
                     margin-left: auto;
-                    @include S(width, 20px);
-                    @include S(height, 20px);
+                    width: 2rem;
+                    height: 2rem;
                     padding: 0;
                     opacity: 0.5;
                     background: transparent center center/ 80% no-repeat;
@@ -234,7 +234,7 @@
 
             .dlcHint {
                 @include SuperSmallText;
-                @include S(margin-top, 10px);
+                margin-top: 1rem;
                 width: 100%;
 
                 display: grid;
@@ -246,11 +246,11 @@
             .mod {
                 background: #eee;
                 width: 100%;
-                @include S(border-radius, $globalBorderRadius);
-                @include S(padding, 5px);
+                border-radius: $globalBorderRadius;
+                padding: 0.5rem;
                 box-sizing: border-box;
                 @include PlainText;
-                @include S(margin-bottom, 5px);
+                margin-bottom: 0.5rem;
                 display: flex;
                 flex-direction: column;
 
@@ -267,14 +267,14 @@
 
             .modsList {
                 box-sizing: border-box;
-                @include S(height, 100px);
-                @include S(padding, 5px);
-                border: D(1px) solid #eee;
+                height: 10rem;
+                padding: 0.5rem;
+                border: 0.1rem solid #eee;
                 overflow-y: scroll;
                 width: 100%;
                 display: flex;
                 flex-direction: column;
-                @include S(border-radius, $globalBorderRadius);
+                border-radius: $globalBorderRadius;
                 pointer-events: all;
 
                 :last-child {
@@ -290,15 +290,15 @@
         justify-content: center;
         flex-direction: column;
         background: rgba(#fff, 0.9);
-        @include S(border-radius, $globalBorderRadius);
+        border-radius: $globalBorderRadius;
         height: 100%;
-        box-shadow: 0 D(9px) D(15px) rgba(#000, 0.2);
+        box-shadow: 0 0.9rem 1.5rem rgba(#000, 0.2);
         width: 100%;
         position: relative;
         align-self: center;
         justify-self: center;
         grid-column: 1 / 2;
-        @include S(max-width, 400px);
+        max-width: 40rem;
         overflow: hidden;
         box-sizing: border-box;
 
@@ -315,8 +315,8 @@
             width: 100%;
             background: rgba(0, 20, 40, 0.05);
 
-            @include S(padding, 10px);
-            @include S(grid-gap, 10px);
+            padding: 1rem;
+            grid-gap: 1rem;
             max-width: 100%;
             box-sizing: border-box;
 
@@ -324,7 +324,7 @@
             .continueButton {
                 @include SuperHeading;
                 width: 100%;
-                @include S(padding, 15px, 10px);
+                padding: 1.5rem 1rem;
                 letter-spacing: 0.1em;
                 box-sizing: border-box;
                 font-weight: bold;
@@ -357,11 +357,11 @@
                 grid-row: 1 / 1;
                 min-width: auto;
 
-                @include S(grid-gap, 5px);
+                grid-gap: 0.5rem;
                 width: 100%;
 
                 > button {
-                    @include S(padding, 3px, 6px);
+                    padding: 0.3rem 0.6rem;
                     width: 100%;
                     white-space: nowrap;
                     margin: 0 !important;
@@ -379,9 +379,9 @@
             display: flex;
             flex-grow: 1;
             flex-direction: column;
-            @include S(padding, 10px);
+            padding: 1rem;
             box-sizing: border-box;
-            @include S(min-height, 150px);
+            min-height: 15rem;
 
             .savegamesNone {
                 align-items: center;
@@ -390,7 +390,7 @@
                 @include PlainText;
                 flex-grow: 1;
                 text-align: center;
-                @include S(padding, 0, 20px);
+                padding: 0 2rem;
                 opacity: 0.5;
 
                 @include DarkThemeOverride {
@@ -402,22 +402,22 @@
                 overflow-y: auto;
                 width: 100%;
                 pointer-events: all;
-                @include S(padding-right, 5px);
-                margin-right: D(-5px);
-                @include S(max-height, 150px);
+                padding-right: 0.5rem;
+                margin-right: -0.5rem;
+                max-height: 15rem;
                 display: grid;
                 grid-auto-flow: row;
-                @include S(grid-gap, 5px);
+                grid-gap: 0.5rem;
 
                 .savegame {
                     background: #eee;
-                    @include S(border-radius, $globalBorderRadius);
-                    @include S(padding, 5px);
+                    border-radius: $globalBorderRadius;
+                    padding: 0.5rem;
                     display: grid;
                     grid-template-columns: 1fr 1fr auto auto;
                     grid-template-rows: auto auto;
-                    @include S(grid-column-gap, 4px);
-                    @include S(grid-row-gap, 1px);
+                    grid-column-gap: 0.4rem;
+                    grid-row-gap: 0.1rem;
 
                     .playtime {
                         grid-column: 2 / 3;
@@ -442,7 +442,7 @@
 
                         > span {
                             display: inline-flex;
-                            @include S(max-width, 140px);
+                            max-width: 14rem;
                             overflow: hidden;
                         }
                     }
@@ -472,8 +472,8 @@
                         & {
                             background-image: uiResource("icons/download.png");
                         }
-                        @include S(width, 15px);
-                        @include S(height, 15px);
+                        width: 1.5rem;
+                        height: 1.5rem;
                         background-size: 80%;
                         align-self: start;
                         border-radius: 0;
@@ -494,8 +494,8 @@
                         & {
                             background-image: uiResource("icons/delete.png");
                         }
-                        @include S(width, 15px);
-                        @include S(height, 15px);
+                        width: 1.5rem;
+                        height: 1.5rem;
                         align-self: end;
                         background-size: 80%;
                         border-radius: 0;
@@ -514,14 +514,14 @@
                         & {
                             background-image: uiResource("icons/edit_key.png");
                         }
-                        @include S(width, 10px);
-                        @include S(height, 10px);
+                        width: 1rem;
+                        height: 1rem;
                         align-self: center;
                         justify-self: center;
                         border-radius: 0;
                         background-size: 90%;
                         opacity: 0.4;
-                        @include S(margin-left, 4px);
+                        margin-left: 0.4rem;
 
                         &:hover {
                             opacity: 0.5;
@@ -534,9 +534,9 @@
                         grid-column: 4 / 5;
                         grid-row: 1 / 3;
                         margin: 0;
-                        @include S(width, 32px);
+                        width: 3.2rem;
                         height: 100%;
-                        @include S(margin-left, 4px);
+                        margin-left: 0.4rem;
 
                         @include DarkThemeOverride {
                             background-color: lighten($darkModeControlsBackground, 10);
@@ -552,9 +552,9 @@
         z-index: 100;
         display: flex;
         flex-direction: row;
-        @include S(gap, 9px);
-        @include S(top, 25px);
-        @include S(left, 25px);
+        gap: 0.9rem;
+        top: 2.5rem;
+        left: 2.5rem;
 
         @media (max-aspect-ratio: 1460/1000) {
             position: unset;
@@ -572,8 +572,8 @@
             align-items: center;
             position: relative;
             cursor: pointer;
-            @include S(gap, 3px);
-            @include S(width, 35px);
+            gap: 0.3rem;
+            width: 3.5rem;
 
             .label {
                 @include SuperSmallText;
@@ -595,11 +595,11 @@
 
             .thirdpartyLogo {
                 display: inline-flex;
-                @include S(width, 35px);
-                @include S(height, 35px);
+                width: 3.5rem;
+                height: 3.5rem;
                 background: rgba(#fff, 0.9) center center / contain no-repeat;
                 border-radius: 50%;
-                box-shadow: 0 D(2px) D(3px) rgba(#000, 0.1);
+                box-shadow: 0 0.2rem 0.3rem rgba(#000, 0.1);
 
                 transition: background-color 0.12s ease-in-out;
 
@@ -638,13 +638,13 @@
         z-index: 20;
         width: 100%;
         box-sizing: border-box;
-        @include S(gap, 30px);
-        @include S(padding, 15px, 25px, 15px, 20px);
+        gap: 3rem;
+        padding: 1.5rem 2.5rem 1.5rem 2rem;
 
         .author {
             margin-left: auto;
             display: flex;
-            @include S(width, 110px);
+            width: 11rem;
             justify-content: flex-end;
 
             a {
@@ -658,8 +658,8 @@
 
                 img {
                     transition: opacity 0.12s ease-in-out;
-                    @include S(width, 82px * 0.8);
-                    @include S(height, 25px * 0.8);
+                    width: 82px * 0.8;
+                    height: 25px * 0.8;
                     filter: invert(100%);
                     opacity: 0.75;
                 }
@@ -671,10 +671,10 @@
             display: flex;
             align-items: center;
             justify-content: flex-start;
-            @include S(gap, 15px);
+            gap: 1.5rem;
             > a {
                 @include SuperSmallText;
-                @include S(padding, 2px);
+                padding: 0.2rem;
                 font-weight: bold;
                 color: #000;
                 opacity: 0.6;
diff --git a/src/css/states/mods.scss b/src/css/states/mods.scss
index ab10d767..3935e390 100644
--- a/src/css/states/mods.scss
+++ b/src/css/states/mods.scss
@@ -3,7 +3,7 @@
     .modsGrid {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
-        @include S(gap, 10px);
+        gap: 1rem;
     }
 
     .modsGrid.noMods {
@@ -14,9 +14,9 @@
     .mod {
         width: 100%;
         box-sizing: border-box;
-        @include S(padding, 10px);
+        padding: 1rem;
 
-        @include S(border-radius, 4px);
+        border-radius: 0.4rem;
         background: #eee;
 
         @include DarkThemeOverride {
diff --git a/src/css/states/preload.scss b/src/css/states/preload.scss
index ed934784..caae6be7 100644
--- a/src/css/states/preload.scss
+++ b/src/css/states/preload.scss
@@ -1,6 +1,6 @@
 #state_PreloadState {
     .changelogDialogEntry {
-        @include S(margin-top, 10px);
+        margin-top: 1rem;
 
         width: 100%;
         flex-direction: column;
@@ -8,7 +8,7 @@
         padding: 10px;
         box-sizing: border-box;
         background: #eef1f4;
-        @include S(border-radius, $globalBorderRadius);
+        border-radius: $globalBorderRadius;
 
         @include DarkThemeOverride {
             background: #33343c;
@@ -27,21 +27,21 @@
 
         .changes {
             @include PlainText;
-            @include S(padding-left, 15px);
-            @include S(margin-top, 10px);
+            padding-left: 1.5rem;
+            margin-top: 1rem;
             strong {
                 background: $colorBlueBright;
                 color: #fff;
                 text-transform: uppercase;
-                @include S(padding, 1px, 2px);
-                @include S(margin-right, 3px);
+                padding: 0.1rem 0.2rem;
+                margin-right: 0.3rem;
             }
             a {
                 color: $colorBlueBright;
             }
             li {
                 @include SuperSmallText;
-                @include S(margin-bottom, 5px);
+                margin-bottom: 0.5rem;
             }
         }
     }
@@ -61,10 +61,10 @@
 
         .logo {
             img {
-                @include S(width, 240px);
+                width: 24rem;
             }
 
-            @include S(margin-bottom, 30px);
+            margin-bottom: 3rem;
         }
 
         @include InlineAnimation(0.3s ease-in-out) {
@@ -78,13 +78,13 @@
 
         .failureInner {
             // background: darken($mainBgColor, 6);
-            @include S(max-width, 350px);
+            max-width: 35rem;
             margin: 0 20px;
             text-align: left;
 
             @include BoxShadow3D(#fff);
-            @include S(padding, 15px);
-            @include S(border-radius, $globalBorderRadius);
+            padding: 1.5rem;
+            border-radius: $globalBorderRadius;
             @include DropShadow;
 
             .errorHeader {
@@ -99,13 +99,12 @@
                 overflow-wrap: break-word;
                 hyphens: auto;
                 // border: dotted #666;
-                // @include S(border-width, 1px, 0);
-                @include S(padding, 10px, 0);
-                @include S(margin-top, 10px);
+                padding: 1rem 0;
+                margin-top: 1rem;
             }
 
             .supportHelp {
-                @include S(margin-top, 10px);
+                margin-top: 1rem;
                 @include PlainText;
 
                 .email {
@@ -118,7 +117,7 @@
             .lower {
                 display: flex;
                 align-items: center;
-                @include S(margin-top, 16px);
+                margin-top: 1.6rem;
 
                 i {
                     flex-grow: 1;
@@ -130,7 +129,7 @@
                 button.resetApp {
                     @include Button3D($colorRedBright);
                     @include PlainText;
-                    @include S(padding, 5px, 8px, 4px);
+                    padding: 0.5rem 0.8rem 0.4rem;
                     color: #fff;
                 }
             }
diff --git a/src/css/states/puzzle_menu.scss b/src/css/states/puzzle_menu.scss
index ad326c49..94bcfc72 100644
--- a/src/css/states/puzzle_menu.scss
+++ b/src/css/states/puzzle_menu.scss
@@ -10,7 +10,7 @@
 
         .createPuzzle {
             background-color: $colorGreenBright;
-            @include S(margin-left, 5px);
+            margin-left: 0.5rem;
         }
     }
 
@@ -22,8 +22,8 @@
 
             color: #333;
             background: $accentColorBright;
-            @include S(padding, 5px);
-            @include S(border-radius, $globalBorderRadius);
+            padding: 0.5rem;
+            border-radius: $globalBorderRadius;
             flex-wrap: wrap;
 
             @include DarkThemeOverride {
@@ -35,8 +35,8 @@
                 margin: 0;
                 display: inline-block;
                 flex-grow: 1;
-                @include S(padding, 5px, 10px);
-                @include S(min-width, 50px);
+                padding: 0.5rem 1rem;
+                min-width: 5rem;
 
                 &::placeholder {
                     color: #aaa;
@@ -46,15 +46,15 @@
             select {
                 color: #333;
                 border: 0;
-                @include S(padding, 5px);
-                @include S(border-radius, $globalBorderRadius);
-                @include S(padding, 7px, 10px);
-                @include S(margin-left, 5px);
+                padding: 0.5rem;
+                border-radius: $globalBorderRadius;
+                padding: 0.7rem 1rem;
+                margin-left: 0.5rem;
                 @include PlainText;
             }
 
             .filterCompleted {
-                @include S(margin-left, 20px);
+                margin-left: 2rem;
                 pointer-events: all;
                 cursor: pointer;
                 display: flex;
@@ -62,26 +62,26 @@
                 justify-content: center;
                 text-transform: uppercase;
                 @include PlainText;
-                @include S(margin-right, 10px);
+                margin-right: 1rem;
 
                 @include DarkThemeOverride {
                     color: #bbbbc4;
                 }
 
                 input {
-                    @include S(width, 15px);
-                    @include S(height, 15px);
-                    @include S(margin-right, 5px);
-                    @include S(border-radius, $globalBorderRadius);
+                    width: 1.5rem;
+                    height: 1.5rem;
+                    margin-right: 0.5rem;
+                    border-radius: $globalBorderRadius;
                     border: 0;
                 }
             }
 
             button[type="submit"] {
-                @include S(padding, 7px, 10px, 5px);
-                @include S(margin-left, 20px);
-                @include S(margin-top, 4px);
-                @include S(margin-bottom, 4px);
+                padding: 0.7rem 1rem 0.5rem;
+                margin-left: 2rem;
+                margin-top: 0.4rem;
+                margin-bottom: 0.4rem;
                 margin-left: auto;
             }
         }
@@ -96,9 +96,9 @@
                     display: grid;
                     grid-auto-columns: 1fr;
                     grid-auto-flow: column;
-                    @include S(grid-gap, 2px);
-                    @include S(padding-right, 10px);
-                    @include S(margin-bottom, 5px);
+                    grid-gap: 0.2rem;
+                    padding-right: 1rem;
+                    margin-bottom: 0.5rem;
 
                     .category {
                         background: $accentColorBright;
@@ -108,8 +108,8 @@
                         transition-property: opacity, background-color, color;
 
                         &:first-child {
-                            @include S(border-top-left-radius, $globalBorderRadius);
-                            @include S(border-bottom-left-radius, $globalBorderRadius);
+                            border-top-left-radius: $globalBorderRadius;
+                            border-bottom-left-radius: $globalBorderRadius;
                         }
                         &:last-child {
                             border-top-right-radius: $globalBorderRadius;
@@ -134,8 +134,8 @@
                         }
 
                         &.root {
-                            @include S(padding-top, 10px);
-                            @include S(padding-bottom, 10px);
+                            padding-top: 1rem;
+                            padding-bottom: 1rem;
                             @include Text;
                         }
                         &.child {
@@ -147,11 +147,11 @@
 
             > .puzzles {
                 display: grid;
-                grid-template-columns: repeat(auto-fit, minmax(D(240px), 1fr));
-                @include S(grid-auto-rows, 65px);
-                @include S(grid-gap, 7px);
-                @include S(margin-top, 10px);
-                @include S(padding-right, 4px);
+                grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
+                grid-auto-rows: 6.5rem;
+                grid-gap: 0.7rem;
+                margin-top: 1rem;
+                padding-right: 0.4rem;
                 overflow-y: scroll;
                 flex-grow: 1;
                 pointer-events: all;
@@ -159,20 +159,20 @@
 
                 > .puzzle {
                     width: 100%;
-                    @include S(height, 65px);
+                    height: 6.5rem;
                     background: #f3f3f8;
-                    @include S(border-radius, $globalBorderRadius);
+                    border-radius: $globalBorderRadius;
 
                     display: grid;
                     grid-template-columns: auto 1fr;
-                    grid-template-rows: D(15px) D(15px) 1fr;
-                    @include S(padding, 5px);
-                    @include S(grid-column-gap, 5px);
+                    grid-template-rows: 1.5rem 1.5rem 1fr;
+                    padding: 0.5rem;
+                    grid-column-gap: 0.5rem;
                     box-sizing: border-box;
                     pointer-events: all;
                     cursor: pointer;
                     position: relative;
-                    @include S(padding-left, 10px);
+                    padding-left: 1rem;
 
                     @include DarkThemeOverride {
                         background: rgba(0, 0, 10, 0.2);
@@ -202,8 +202,8 @@
                         justify-self: start;
                         width: 100%;
                         box-sizing: border-box;
-                        @include S(padding, 2px, 5px);
-                        @include S(height, 17px);
+                        padding: 0.2rem 0.5rem;
+                        height: 1.7rem;
                     }
 
                     > .author {
@@ -215,7 +215,7 @@
                         overflow: hidden;
                         text-overflow: ellipsis;
                         white-space: nowrap;
-                        @include S(padding, 2px, 5px);
+                        padding: 0.2rem 0.5rem;
                     }
 
                     > .icon {
@@ -223,8 +223,8 @@
                         grid-row: 1 / 4;
                         align-self: center;
                         justify-self: center;
-                        @include S(width, 45px);
-                        @include S(height, 45px);
+                        width: 4.5rem;
+                        height: 4.5rem;
 
                         canvas {
                             width: 100%;
@@ -234,14 +234,14 @@
 
                     > button.delete {
                         position: absolute;
-                        @include S(top, 5px);
-                        @include S(right, 5px);
+                        top: 0.5rem;
+                        right: 0.5rem;
                         background-repeat: no-repeat;
                         background-position: center center;
                         background-size: 70%;
                         background-color: transparent !important;
-                        @include S(width, 20px);
-                        @include S(height, 20px);
+                        width: 2rem;
+                        height: 2rem;
                         padding: 0;
                         opacity: 0.7;
                         @include DarkThemeInvert;
@@ -259,14 +259,14 @@
                         justify-self: end;
                         justify-content: center;
                         align-self: end;
-                        @include S(height, 14px);
+                        height: 1.4rem;
 
                         > .downloads {
                             @include SuperSmallText;
                             color: #000;
                             font-weight: bold;
-                            @include S(margin-right, 5px);
-                            @include S(padding-left, 12px);
+                            margin-right: 0.5rem;
+                            padding-left: 1.2rem;
                             opacity: 0.7;
                             display: inline-flex;
                             align-items: center;
@@ -274,9 +274,8 @@
                             @include DarkThemeInvert;
 
                             & {
-                                background: uiResource("icons/puzzle_plays.png") #{D(2px)} #{D(2.5px)} / #{D(
-                                        8px
-                                    )} #{D(8px)} no-repeat;
+                                background: uiResource("icons/puzzle_plays.png") 0.2rem 0.25rem / 0.8rem
+                                    0.8rem no-repeat;
                             }
                         }
 
@@ -286,14 +285,13 @@
                             justify-content: center;
                             color: #000;
                             font-weight: bold;
-                            @include S(padding-left, 14px);
+                            padding-left: 1.4rem;
                             opacity: 0.7;
                             @include DarkThemeInvert;
 
                             & {
-                                background: uiResource("icons/puzzle_upvotes.png") #{D(2px)} #{D(2.4px)} / #{D(
-                                        9px
-                                    )} #{D(9px)} no-repeat;
+                                background: uiResource("icons/puzzle_upvotes.png") 0.2rem 0.24rem / 0.9rem
+                                    0.9rem no-repeat;
                             }
                         }
 
@@ -303,7 +301,7 @@
                             justify-content: center;
                             color: #000;
                             font-weight: bold;
-                            @include S(margin-right, 3px);
+                            margin-right: 0.3rem;
                             opacity: 0.7;
                             text-transform: uppercase;
 
@@ -339,10 +337,10 @@
                         &::after {
                             content: "";
                             position: absolute;
-                            @include S(top, 10px);
-                            @include S(right, 10px);
-                            @include S(width, 30px);
-                            @include S(height, 30px);
+                            top: 1rem;
+                            right: 1rem;
+                            width: 3rem;
+                            height: 3rem;
                             opacity: 0.1;
 
                             & {
diff --git a/src/css/states/settings.scss b/src/css/states/settings.scss
index 0b7b3b78..619a1772 100644
--- a/src/css/states/settings.scss
+++ b/src/css/states/settings.scss
@@ -7,7 +7,7 @@
     .container .content {
         display: grid;
         grid-template-columns: auto 1fr;
-        @include S(grid-gap, 10px);
+        grid-gap: 1rem;
 
         @include StyleBelowWidth($layoutBreak) {
             grid-template-columns: 1fr;
@@ -16,20 +16,20 @@
 
         .sidebar {
             display: flex;
-            @include S(min-width, 210px);
-            @include S(max-width, 320px);
+            min-width: 21rem;
+            max-width: 32rem;
             flex-direction: column;
 
             @include StyleBelowWidth($layoutBreak) {
                 display: grid;
                 grid-template-columns: 1fr 1fr 1fr;
-                @include S(grid-gap, 5px);
+                grid-gap: 0.5rem;
                 max-width: unset !important;
             }
 
             button {
                 text-align: left;
-                @include S(margin-bottom, 3px);
+                margin-bottom: 0.3rem;
                 &::after {
                     content: unset;
                 }
@@ -38,8 +38,8 @@
 
                 @include StyleBelowWidth($layoutBreak) {
                     text-align: center;
-                    height: D(30px) !important;
-                    padding: D(5px) !important;
+                    height: 3rem !important;
+                    padding: 0.5rem !important;
                 }
             }
 
@@ -55,7 +55,7 @@
                     margin-top: 0;
                     display: grid;
                     grid-template-columns: 1fr 1fr;
-                    @include S(grid-gap, 5px);
+                    grid-gap: 0.5rem;
                     max-width: unset !important;
                     grid-column: 1 / 3;
 
@@ -86,7 +86,7 @@
             }
 
             .versionbar {
-                @include S(margin-top, 10px);
+                margin-top: 1rem;
 
                 @include StyleBelowWidth($layoutBreak) {
                     display: none;
@@ -107,7 +107,7 @@
         .categoryContainer {
             overflow-y: scroll;
             pointer-events: all;
-            @include S(padding-right, 10px);
+            padding-right: 1rem;
 
             .category {
                 display: none;
@@ -117,13 +117,13 @@
                 }
 
                 .setting {
-                    @include S(padding, 10px);
+                    padding: 1rem;
                     background: #eeeff5;
-                    @include S(border-radius, $globalBorderRadius);
-                    @include S(margin-bottom, 5px);
+                    border-radius: $globalBorderRadius;
+                    margin-bottom: 0.5rem;
 
                     .desc {
-                        @include S(margin-top, 5px);
+                        margin-top: 0.5rem;
                         @include SuperSmallText;
                         color: #aaadb2;
                     }
@@ -162,7 +162,7 @@
                             background: rgba(#fff, 0.5);
                             text-transform: uppercase;
                             color: $colorRedBright;
-                            @include S(border-radius, $globalBorderRadius);
+                            border-radius: $globalBorderRadius;
 
                             @include DarkThemeOverride {
                                 background: rgba(#55585f, 0.95);
@@ -178,14 +178,14 @@
                         pointer-events: all;
                         cursor: pointer;
                         justify-content: center;
-                        @include S(min-width, 100px);
-                        @include S(border-radius, $globalBorderRadius);
-                        @include S(padding, 4px);
-                        @include S(padding-right, 15px);
+                        min-width: 10rem;
+                        border-radius: $globalBorderRadius;
+                        padding: 0.4rem;
+                        padding-right: 1.5rem;
 
                         & {
-                            background: #fff uiResource("icons/enum_selector.png") calc(100% - #{D(5px)})
-                                calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
+                            background: #fff uiResource("icons/enum_selector.png") calc(100% - 0.5rem)
+                                calc(50% + 0.1rem) / 1.5rem no-repeat;
                         }
 
                         transition: background-color 0.12s ease-in-out;
diff --git a/src/css/textual_game_state.scss b/src/css/textual_game_state.scss
index 83917ad5..bb637ddd 100644
--- a/src/css/textual_game_state.scss
+++ b/src/css/textual_game_state.scss
@@ -2,7 +2,7 @@
     display: grid;
     grid-template-rows: auto 1fr;
     box-sizing: border-box;
-    @include S(padding, 32px);
+    padding: 3.2rem;
     height: 100vh;
 
     .headerBar {
@@ -21,15 +21,15 @@
         }
 
         .backButton {
-            @include S(width, 30px);
-            @include S(height, 30px);
-            @include S(margin-right, 10px);
-            @include S(margin-left, -5px);
+            width: 3rem;
+            height: 3rem;
+            margin-right: 1rem;
+            margin-left: -0.5rem;
             & {
                 background: uiResource("icons/state_back_button.png") center center / 70% no-repeat;
             }
         }
-        @include S(margin-bottom, 20px);
+        margin-bottom: 2rem;
     }
 
     > .container {
@@ -41,8 +41,8 @@
         > .content {
             width: 100%;
             background: #fff;
-            @include S(border-radius, $globalBorderRadius);
-            @include S(padding, 10px);
+            border-radius: $globalBorderRadius;
+            padding: 1rem;
             height: 100%;
             overflow-y: auto;
             box-sizing: border-box;
@@ -55,8 +55,8 @@
             .categoryLabel {
                 display: block;
                 text-transform: uppercase;
-                @include S(margin-top, 15px);
-                @include S(margin-bottom, 15px);
+                margin-top: 1.5rem;
+                margin-bottom: 1.5rem;
                 @include Heading;
             }
         }
diff --git a/src/css/variables.scss b/src/css/variables.scss
index 4ea3f175..60e0a13c 100644
--- a/src/css/variables.scss
+++ b/src/css/variables.scss
@@ -1,24 +1,24 @@
-$globalBorderRadius: 6px;
+$globalBorderRadius: 0.6rem;
 
 // Font sizes and line heights
-$superHeadingFontSize: 25px;
-$superHeadingLineHeight: 24px;
+$superHeadingFontSize: 2.5rem;
+$superHeadingLineHeight: 2.4rem;
 
-$headingFontSize: 19px;
-$headingLineHeight: 21px;
+$headingFontSize: 1.9rem;
+$headingLineHeight: 2.1rem;
 
-$textFontSize: 16px;
-$textLineHeight: 21px;
+$textFontSize: 1.6rem;
+$textLineHeight: 2.1rem;
 
-$plainTextFontSize: 13px;
-$plainTextLineHeight: 17px;
+$plainTextFontSize: 1.3rem;
+$plainTextLineHeight: 1.7rem;
 
-$superDuperSmallTextFontSize: 8px;
-$superDuperSmallTextLineHeight: 9px;
-$superSmallTextFontSize: 10px;
-$superSmallTextLineHeight: 13px;
-$buttonFontSize: 14px;
-$buttonLineHeight: 18px;
+$superDuperSmallTextFontSize: 0.8rem;
+$superDuperSmallTextLineHeight: 0.9rem;
+$superSmallTextFontSize: 1rem;
+$superSmallTextLineHeight: 1.3rem;
+$buttonFontSize: 1.4rem;
+$buttonLineHeight: 1.8rem;
 
 // Main background color
 $mainBgColor: #dee1ea;
@@ -61,43 +61,43 @@ $mainFont: "GameFont", sans-serif;
 }
 
 @mixin SuperDuperSmallText {
-    font-size: D($superDuperSmallTextFontSize);
-    line-height: D($superDuperSmallTextLineHeight);
+    font-size: $superDuperSmallTextFontSize;
+    line-height: $superDuperSmallTextLineHeight;
     @include DebugText(green);
 }
 
 @mixin SuperSmallText {
-    font-size: D($superSmallTextFontSize);
-    line-height: D($superSmallTextLineHeight);
+    font-size: $superSmallTextFontSize;
+    line-height: $superSmallTextLineHeight;
     @include DebugText(green);
 }
 
 @mixin PlainText {
-    font-size: D($plainTextFontSize);
-    line-height: D($plainTextLineHeight);
+    font-size: $plainTextFontSize;
+    line-height: $plainTextLineHeight;
     @include DebugText(red);
 }
 
 @mixin Text {
-    font-size: D($textFontSize);
-    line-height: D($textLineHeight);
+    font-size: $textFontSize;
+    line-height: $textLineHeight;
     @include DebugText(blue);
 }
 
 @mixin Heading {
-    font-size: D($headingFontSize);
-    line-height: D($headingLineHeight);
+    font-size: $headingFontSize;
+    line-height: $headingLineHeight;
     @include DebugText(yellow);
 }
 
 @mixin SuperHeading {
-    font-size: D($superHeadingFontSize);
-    line-height: D($superHeadingLineHeight);
+    font-size: $superHeadingFontSize;
+    line-height: $superHeadingLineHeight;
     @include DebugText(orange);
 }
 
 @mixin ButtonText {
-    font-size: D($buttonFontSize);
-    line-height: D($buttonLineHeight);
+    font-size: $buttonFontSize;
+    line-height: $buttonLineHeight;
     @include DebugText(purple);
 }