diff --git a/src/sass/base.sass b/src/sass/base.sass
new file mode 100644
index 0000000..f6d658c
--- /dev/null
+++ b/src/sass/base.sass
@@ -0,0 +1,27 @@
+*,
+*::before,
+*::after
+ box-sizing: border-box
+
+body, h1, h2, h3, h4, h5, h6, p
+ margin: 0
+
+body
+ line-height: 1.5
+ min-height: 100vh
+
+img, picture
+ max-width: 100%
+ display: block
+
+input, button, textarea, select
+ font: inherit
+
+@media (prefers-reduced-motion: reduce)
+ *,
+ *::before,
+ *::after
+ animation-duration: 0.01ms !important
+ animation-iteration-count: 1 !important
+ transition-duration: 0.01ms !important
+ scroll-behaviour: auto !important
diff --git a/src/sass/classes.sass b/src/sass/classes.sass
new file mode 100644
index 0000000..f1139dc
--- /dev/null
+++ b/src/sass/classes.sass
@@ -0,0 +1,47 @@
+@import 'responsive'
+
+.overlay
+ width: 100%
+ height: 100vh
+
+ position: fixed
+
+ //opacity: 0.03
+ opacity: 0.2
+ z-index: 1 !important
+ background-image: url('../img/noise.gif')
+ background-size: 25%
+
+ @include mobile()
+ background-size: 200%
+
+.contentholder
+ justify-content: flex-start
+ overflow: scroll
+ div
+ width: 30rem
+ margin: 1% 0
+
+ @include mobile
+ width: 20rem
+
+ .contentholder__topfiller
+ height: 5%
+ background-color: transparent
+
+/* New */
+
+.flex
+ display: flex
+ gap: 2rem
+
+.center
+ justify-content: center
+ align-items: center
+ flex-direction: column
+ align-content: center
+
+.container
+ padding-inline: 2em
+ margin-inline: auto
+ max-width: 90rem
diff --git a/src/sass/global.sass b/src/sass/global.sass
index b2fc8c7..6273e88 100644
--- a/src/sass/global.sass
+++ b/src/sass/global.sass
@@ -1,3 +1,5 @@
+@import 'base'
+@import 'classes'
@import 'responsive'
@import 'anim'
@@ -8,18 +10,11 @@ $outer-bg: #091519
//$outer-bg: #f2e1ba // nice sand color, light theme maybe?
$inner-bg: #112932
-@mixin div-center()
- display: flex
- justify-content: center
- align-items: center
- flex-direction: column
- align-content: center
*
border-color: $tertiary-color
body
- @include div-center()
width: 100%
height: 100%
padding: 0 0 0 0
@@ -31,22 +26,7 @@ body
@include mobile()
--is-mobile: 1
-.overlay
- width: 100%
- height: 100vh
-
- position: fixed
-
- opacity: 0.03
- z-index: 1
- background-image: url('../img/noise.gif')
- background-size: 25%
-
- @include mobile()
- background-size: 200%
-
.outerdiv
- @include div-center()
width: 90%
height: 100vh
background-color: $outer-bg
@@ -55,19 +35,6 @@ body
@include mobile()
width: 100%
-.contentholder
- justify-content: flex-start
- overflow: scroll
- div
- width: 30rem
- margin: 1% 0
-
- @include mobile
- width: 20rem
-
- .contentholder__topfiller
- height: 5%
- background-color: transparent
.content
z-index: 100