updates

styles/main.css

@@ -1,10 +1,9 @@
-@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");
+@import url("https://fonts.googleapis.com/css?family=Cutive+Mono&display=swap");
 
 html {
     width: 100%;
-    /* overflow-x: hidden; */
     scroll-behavior: smooth;
-    font-family: "Source Code Pro", Helvetica;
+    font-family: "Cutive Mono", Helvetica;
     font-size: 16px;
     line-height: 1.5;
     color: #222;
@@ -18,9 +17,9 @@ html {
 }
 
 :root {
-    --main-color: #1668e4;
-    --main-color-lighter: #5698fc;
-    --dark-color: #201e1e;
+    --main-color: #7174ff;
+    --main-color-lighter: #9d9eff;
+    --dark-color: #181515;
     --sec-color-3: #688e26;
     --sec-color-4: #adb2d3;
     --sec-color-5: #c2a878;
@@ -32,7 +31,6 @@ html {
 body {
     width: 100%;
     margin: 0px;
-    padding: 40px;
     top: 0;
     justify-content: center;
     background-color: var(--dark-color);
@@ -49,19 +47,25 @@ a:hover {
     color: var(--sec-color-2);
 }
 
-button {
+button,
+.button {
     padding: 10px 25px;
     border: none;
     cursor: pointer;
     font-size: inherit;
     border: 1px solid transparent;
+    color: var(--dark-color);
+    background-color: white;
+    font-size: 18px;
+    font-weight: 600;
 }
 
 hr {
     opacity: 0.3;
 }
 
-button:hover {
+button:hover,
+.button:hover {
     background-color: var(--dark-color);
     /* background-color: #c52532; */
     color: white;
@@ -75,7 +79,6 @@ form * {
 
 header {
     z-index: 1000000;
-    margin-bottom: 40px;
 }
 
 h1 {
@@ -84,6 +87,18 @@ h1 {
     margin-bottom: 10px;
 }
 
+h2 {
+    font-size: 38px;
+}
+
+h3 {
+    font-size: 30px;
+}
+
+h4 {
+    font-size: 22px;
+}
+
 /* * */
 /* * */
 /* * */
@@ -204,9 +219,7 @@ nav a:hover {
 /*############################################# -- Shuffled Text */
 
 #__next {
-    max-width: 1200px;
     width: 100%;
-    height: 100%;
     opacity: 0;
     animation-name: shuffle;
     animation-timing-function: ease-out;
@@ -329,7 +342,7 @@ textarea {
 }
 
 .tech-stack-header {
-    color: rgb(113, 116, 255);
+    color: #7174ff;
     margin-bottom: 3px;
 }
 
@@ -412,11 +425,6 @@ html.is-animating .transition-fade {
         gap: 15px;
     }
 
-    body {
-        padding: 20px;
-        padding-bottom: 80px;
-    }
-
     .hero-ctas-section {
         flex-wrap: wrap;
     }