[refactor] Moving global styling out of "loader"

css/_reset.scss

@@ -0,0 +1,15 @@
+@import "theme";
+
+* {
+    font-size: $defaultFontSize;
+    font-family: $fontFamily;
+}
+
+*,
+*:before,
+*:after {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    vertical-align: top;
+}

css/_theme.scss

@@ -1 +1,2 @@
 $fontFamily: 'Lucida Console', 'Lucida Sans Unicode', 'Fira Mono', 'Consolas', 'Courier New', Courier, monospace, 'Times New Roman';
+$defaultFontSize: 16px;

css/loader.scss

@@ -1,4 +1,5 @@
 @import "mixins";
+@import "reset";
 
 @include keyframes(LOADERSPINNER) {
     0% {
@@ -28,13 +29,6 @@
     }
 }
 
-*, *:before, *:after {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    vertical-align: top;
-}
-
 .loaderoverlay {
     $spinnerBoxSize: 200px;
     $themeColor: #6f3;
@@ -100,13 +94,3 @@
         left: 50%;
     }
 }
-
-button[type="button"] {
-    @include transform(translateX(-50%));
-
-    padding: 0.5rem 1rem;
-    position: absolute;
-    z-index: 1;
-    bottom: 10px;
-    left: 50%;
-}

css/styles.scss

@@ -1,19 +1,14 @@
 @import "mixins";
 @import "theme";
 
+@import "reset";
+
 :root{
     --my-font-color: #6f3;
     --my-background-color: #000;
     --my-highlight-color: #fff;
 }
 
-* {
-    margin: 0;
-    padding: 0;
-    font-size: 16px;
-    font-family: $fontFamily;
-}
-
 body {
     background-color: var(--my-background-color);
 }
@@ -26,7 +21,7 @@ h2,
 }
 
 h1 {
-    font-size: 22px;
+    font-size: $defaultFontSize * 1.375;
     color: var(--my-font-color);
 }
 
@@ -44,6 +39,16 @@ span {
     padding: 4px;
 }
 
+button[type="button"] {
+    @include transform(translateX(-50%));
+
+    padding: 0.5rem 1rem;
+    position: absolute;
+    z-index: 1;
+    bottom: 10px;
+    left: 50%;
+}
+
 #entire-game-container {
     background-color: transparent;
 }
@@ -130,7 +135,8 @@ tr:focus {
 }
 
 /* Make html links ("a" elements) nice looking buttons with this class */
-a:link, a:visited {
+a:link,
+a:visited {
     color: #fff;
 }