Extended scss files.

frontend/styles/global.scss

@@ -1,4 +1,49 @@
-@import './frontend/styles/variables';
+@import 'frontend/styles/variables';
+
+@font-face {
+  font-family: "Mabry";
+  font-style: normal;
+  font-weight: 400;
+  src: url("/frontend/assets/fonts/mabry/Mabry-Regular-Pro.woff") format("woff");
+}
+
+body {
+  font-family: "Mabry", sans-serif; 
+  background-color: #19171A;
+  color: white;
+
+  margin-bottom: 2rem;
+}
+
+h1,h2,h3,h4,h5 {
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  font-size: var(--text-xxl);
+
+  @include mobile {
+    font-size: var(--text-xl);
+  }
+}
+
+h2 {
+  font-size: var(--text-lg);
+
+  @include mobile {
+    font-size: var(--text-md);
+  }
+}
+h3 {
+  font-size: var(--text-lg);
+
+  &.h3-alt {
+    font-size: calc(0.785 * var(--text-lg));
+  }
+}
+
+
 
 .flex {
   display: flex;
@@ -17,6 +62,11 @@
   flex-direction: column;
 }
 
+.justify-around {
+  display: flex;
+  justify-content: space-around;
+}
+
 @include desktop {
   .mobile-only {
     display: none;
@@ -27,4 +77,83 @@
   .desktop-only {
     display: none;
   }
-}
+}
+
+.col-wrap {
+  padding-left: 120px;
+  padding-right: 120px;
+
+  @include tablet {
+    padding: 0 48px;
+  }
+
+  @include mobile {
+    padding-left: 12px;
+    padding-right: 12px;
+  }
+}
+
+.max-width {
+  max-width: 1520px;
+  margin: auto;
+}
+
+.top-show {
+  box-sizing: border-box;
+  padding-bottom: var(--space-xxl);
+  padding-top: var(--space-xxxxl);
+
+  &-sm {
+    padding-top: var(--space-xxl);
+  }
+
+  @include mobile {
+    padding-top: var(--space-xl);
+  }
+}
+
+
+.page-header {
+  @include mobile {
+    margin-top: 2rem; 
+  }
+}
+
+
+.accent--xl {
+    font-size:calc(1.375 * var(--text-base-size))
+}
+
+@media (max-width: 992px) {
+    .accent--xl {
+        font-size:calc(1.25 * var(--text-base-size))
+    }
+}
+
+@media (max-width: 520px) {
+    .accent--xl {
+        font-size:calc(1.125 * var(--text-base-size))
+    }
+}
+
+.accent--lg {
+    font-size:calc(1.25 * var(--text-base-size))
+}
+
+@media (max-width: 992px) {
+    .accent--lg {
+        font-size:calc(1.125 * var(--text-base-size))
+    }
+}
+
+.accent--md {
+    font-size:calc(1.125 * var(--text-base-size))
+}
+
+@media (max-width: 992px) {
+    .accent--md {
+        font-size:calc(1 * var(--text-base-size))
+    }
+}
+
+