began rewrite

src/styles/_var.scss

@@ -0,0 +1,28 @@
+@font-face {
+    font-family: 'Tanker-Regular';
+    src: url('/fonts/Tanker-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Satoshi-Regular';
+    src: url('/fonts/Satoshi-Regular.ttf') format('truetype');
+    font-weight: 400;
+    font-display: swap;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Satoshi-Bold';
+    src: url('/fonts/Satoshi-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-display: swap;
+    font-style: normal;
+}
+
+$primary: #1C1427;
+$accent: #7ECA9C;
+$link: #CCFFBD;
+$highlight-primary: #40394A;

src/styles/_variables.scss

@@ -1,3 +0,0 @@
-$primary-color: #66D48E;
-$accent-color: #8400ff;
-$accent-gradient: linear-gradient(45deg, $primary-color, $accent-color 50%, white 60%);

src/styles/global.scss

@@ -1,85 +0,0 @@
-@import "./_variables.scss";
-
-
-:root {
-	color-scheme: dark;
-	accent-color: $accent-color;
-	caret-color: $accent-color;
-}
-::selection{
-	background-color: $accent-color;
-}
-::marker{
-	color: $accent-color;
-}
-body {
-    font-family: system-ui, sans-serif;
-    background-color: #0a0a0a;
-    height: 100vh;
-    width: 100vw;
-    margin: 0;
-}
-.page{
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    width: 100%;
-    box-shadow:
-      inset 60px 0 120px rgba($primary-color, 0.2),
-      inset -60px 0 120px rgba($accent-color, 0.07);
-}
-
-.wip-title {
-    font-size: 50px;
-    text-align: center;
-    color: white;
-    margin-top: 100px;
-}
-
-.text-gradient {
-    background-image: $accent-gradient;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
-}
-
-.card {
-    background-color: #1d1d1d;
-    border-color: #2d2d2d;
-    border-style: solid;
-    border-width: 1px;
-    border-radius: 15px;
-    padding: 35px;
-    color: white;
-    width: 35%;
-    margin: auto;
-    margin-top: 7%;
-    display: flex;
-    justify-content: center;
-
-    box-shadow: rgba($primary-color, 0.4) 5px 5px, rgba($primary-color, 0.3) 10px 10px, rgba($primary-color, 0.2) 15px 15px, rgba($primary-color, 0.1) 20px 20px, rgba($primary-color, 0.05) 25px 25px;
-    a {
-        color: #2525ca;
-        text-decoration: underline 2px;
-        margin: auto;
-        max-width: 500px;
-    }
-    p{
-        font-size: 20px;
-        margin: auto;
-        max-width: 500px;
-    }
-}
-@media (max-width: 800px) {
-	.wip-title{
-        margin-top: 50px;
-        font-size: 30px;
-    }
-    .card {
-        margin-top: 10%;
-	    width: 65%;
-	}
-}

src/styles/main.scss

@@ -0,0 +1,23 @@
+@import './_var.scss';
+
+:root {
+    color-scheme: dark;
+}
+
+body {
+    background-color: $primary;
+    font-family: "Satoshi-Regular", "Arial";
+}
+
+h1 {
+    font-family: "Tanker-Regular", "Arial";
+    font-size: 72px;
+}
+
+.content {
+    background-color: $highlight-primary;
+    margin: 10vw;
+    margin-right: 30vw;
+    padding: 2vw;
+    border-radius: 25px;
+}