v3

styles/Home.module.scss

@@ -1,128 +0,0 @@
-@import '_variables';
-
-.bodySection {
-    margin-top: 8rem;
-    margin-left: 10%;
-    margin-right: 10%;
-}
-
-.mainLayout {
-    h1 {
-        line-height: .2;
-        font-size: 3rem;
-        font-weight: 700;
-    }
-
-    p {
-        color: $secondary-color;
-        font-size: 1rem;
-        font-weight: 400;
-    }
-}
-
-
-.iconLayout {
-    margin-bottom: 5%;
-
-    svg {
-        font-size: 1.4em;
-        cursor: pointer;
-        margin-right: 6%;
-        margin-bottom: 1em;
-    }
-}
-
-.time {
-    svg {
-        font-size: .9em;
-    }
-}
-
-.weather {
-    img {
-        float: left;
-    }
-
-    p {
-        display: inline;
-    }
-
-    span {
-        font-size: .8rem;
-    }
-    
-    a:hover {
-        text-decoration: none;
-        color: #C7D2FE;
-    }
-    svg {
-        font-size: .9em;
-    }
-}
-    
-.spotify {
-    font-size: 1em;
-    margin-top: 5%;
-    padding: 1rem 1rem 1.8rem 1rem;
-    border: 1px solid $spotify-box-color;
-    border-radius: .5rem;
-
-    img {
-        border-radius: 10px;
-        float: left;
-        margin-right: 5%;
-    }
-
-    p {
-        display: inline;
-    }
-
-    .tinyText {
-        font-weight: 300;
-        font-size: .8em;
-
-        svg {
-            margin-top: 5px;
-            color: #1DB954;
-        }
-    }
-}
-
-
-.footerLayout {
-    position: absolute;
-    bottom: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-
-    a {
-        cursor: pointer;
-        text-decoration: none;
-
-        &:hover {
-            color: #C7D2FE
-        }
-    }
-}
-
-@media (min-width: 1200px) {
-    .bodySection {
-        margin-left: 30%;
-        margin-right: 45%;
-    }
-
-    .iconLayout {
-        margin-bottom: 2%;
-    }
-
-    .spotify {
-        margin-top: 8%;
-        width: 80%;
-    }
-}
-
-@media (min-height: 800px) {
-    .bodySection {
-        margin-top: 15rem;
-    }
-}

styles/_variables.scss

@@ -1,6 +0,0 @@
-$background-color: #000000;
-$primary-color: #ffffff;
-$secondary-color: #9CA3AF;
-$selection-color: #8039e2;
-$spotify-box-color: #521c9e;
-$font: 'Inter', sans-serif;

styles/globals.scss

@@ -1,26 +1,56 @@
-@import '_variables';
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;400;700&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
-html,
-body {
-    background-color: $background-color;
-    color: $primary-color;
-    padding: 0;
-    margin: 0;
-    font-family: $font;
-    font-weight: 400;
+@layer base {
+    html {
+        scrollbar-width: thin;
+        scrollbar-color: #8a58e0 transparent;
+    }
+
+    body {
+        background-color: #000;
+        color: #fff;
+    }
+
+    ul, ol {
+        list-style: revert;
+    }
 }
 
-::selection {
-  background: rgba($selection-color, .7);
-  color: $primary-color;
+@layer components {
+    ::selection {
+        background-color: #8039e2;
+        color: #fff;
+    }
+
+    ::-webkit-scrollbar {
+        width: 3px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: #8a58e0;
+        border-radius: 10px;
+    }
 }
 
-a {
-    color: inherit;
-    text-decoration: none;
-}
-
-* {
-    box-sizing: border-box;
-}
+@layer utilities {
+    .gradient {
+        color: transparent;
+        background-clip: text;
+        background-image: linear-gradient(to right, #800a18, #a82044, #9e4a60);
+        animation: gradient 5s ease infinite
+    }
+    
+    @keyframes gradient {
+        0%, 100% {
+            background-size: 200%;
+            background-position: left center;
+        }
+    
+        50% {
+            background-size: 200%;
+            background-position: right center;
+        }
+    }
+}