Converted the css to sass

styles/_styles.scss

@@ -1,8 +1,8 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
-@import "header.css";
-@import "anchoring.css";
-@import "carousel.css";
+@import "header";
+@import "anchoring";
+@import "carousel";
 
 @tailwind base;
 @tailwind components;

styles/anchoring.css

@@ -1,28 +0,0 @@
-.anchoring {
-    font-family: 'Questrial', sans-serif;
-}
-
-.anchoring h1 {
-    margin-bottom: -35px;
-    font-size: 2.5rem;
-}
-
-.anchoring h1, .anchoring h1:hover {
-    color: white;
-}
-
-.anchoring > a {
-    margin: 0 auto;
-    display: block;
-    width: fit-content;
-}
-
-.anchoring > a:hover {
-    cursor:pointer;
-}
-
-.anchoring img {
-    width: 128px;
-    height: 128px;
-    margin: 0 auto;
-}

styles/anchoring.scss

@@ -0,0 +1,29 @@
+.anchoring {
+    font-family: 'Questrial', sans-serif;
+
+    h1 {
+        margin-bottom: -35px;
+        font-size: 2.5rem;
+        color: white;
+
+        &:hover {
+            color: white;
+        }
+    }
+
+    > a {
+        margin: 0 auto;
+        display: block;
+        width: fit-content;
+
+        &:hover {
+            cursor:pointer;
+        }
+    }
+
+    img {
+        width: 128px;
+        height: 128px;
+        margin: 0 auto;
+    }
+}

styles/header.scss

@@ -5,39 +5,38 @@
     z-index: 9999;
     height: var(--header-Height);
     padding: 0 3.75rem;
-}
 
-.navbar .navbar-brand img {
-    height: 3rem;
-    width: 2.625rem;
-}
+    .navbar-brand {
+        h3 {
+            margin-bottom: 0;
+        }
+        img {
+            height: 3rem;
+            width: 2.625rem;
+        }
+        .title {
+            font-size: 1.75rem;
+            font-weight: 350;
+            line-height: 2.1rem;
+        }
+        .subtitle {
+            font-size: 1.125rem;
+            font-weight: 250;
+        }
+    }
 
-.navbar .navbar-brand h3 {
-    margin-bottom: 0;
-}
+    .nav-item .nav-link {
+        font-family: 'Nunito', sans-serif;
+        font-size: 1.4rem;
+        line-height: 1.5rem;
+        font-weight: 250;
+        white-space: nowrap;
 
-.navbar .navbar-brand .title {
-    font-size: 1.75rem;
-    font-weight: 350;
-    line-height: 2.1rem;
-}
-
-.navbar .navbar-brand .subtitle {
-    font-size: 1.125rem;
-    font-weight: 250;
-}
-
-.navbar .nav-item .nav-link {
-    font-family: 'Nunito', sans-serif;
-    font-size: 1.4rem;
-    line-height: 1.5rem;
-    font-weight: 250;
-    white-space: nowrap
-}
-
-.navbar .nav-item .nav-link:hover {
-    color: rgba(255,255,255, .75);
-    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+        &:hover {
+            color: rgba(255,255,255, .75);
+            transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+        }
+    }
 }
 
 .external-link-icon:after {