updates

styles/main.css

@@ -1,11 +1,14 @@
+@import url("https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap");
+
 html {
     width: 100%;
     /* overflow-x: hidden; */
     scroll-behavior: smooth;
-    font-family: Helvetica;
+    font-family: "Source Code Pro", Helvetica;
     font-size: 16px;
     line-height: 1.5;
     color: #222;
+    letter-spacing: -0.8px;
 }
 
 * {
@@ -21,6 +24,7 @@ html {
     --sec-color-4: #adb2d3;
     --sec-color-5: #c2a878;
     --light-color-1: #ddd;
+    --test-color: rgb(224, 64, 64);
     --transparent-white: rgba(255, 255, 255, 0.2);
 }
 
@@ -213,7 +217,7 @@ nav a:hover {
 .hero-ctas-section {
     display: flex;
     align-items: center;
-    margin-top: 20px;
+    margin-top: 40px;
     gap: 20px;
 }
 
@@ -305,6 +309,12 @@ textarea {
     border: 2px solid #d42222;
 }
 
+#homepage-animation-wrapper {
+    width: 150%;
+    height: 100%;
+    background-color: var(--dark-color);
+}
+
 /* ###############################################################################################
 ##################################################################################################
 ##################################################################################################

styles/tw_main.css

@@ -0,0 +1,126 @@
+*, ::before, ::after {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  
+}
+
+.fixed {
+  position: fixed
+}
+
+.absolute {
+  position: absolute
+}
+
+.top-4 {
+  top: 1rem
+}
+
+.left-4 {
+  left: 1rem
+}
+
+.right-4 {
+  right: 1rem
+}
+
+.top-0 {
+  top: 0px
+}
+
+.right-0 {
+  right: 0px
+}
+
+.left-0 {
+  left: 0px
+}
+
+.-z-10 {
+  z-index: -10
+}
+
+.block {
+  display: block
+}
+
+.h-10 {
+  height: 2.5rem
+}
+
+.h-28 {
+  height: 7rem
+}
+
+.h-96 {
+  height: 24rem
+}
+
+.h-full {
+  height: 100%
+}
+
+.w-10 {
+  width: 2.5rem
+}
+
+.w-28 {
+  width: 7rem
+}
+
+.w-96 {
+  width: 24rem
+}
+
+.w-full {
+  width: 100%
+}
+
+.bg-slate-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(71 85 105 / var(--tw-bg-opacity))
+}
+
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(220 38 38 / var(--tw-bg-opacity))
+}