📱 Better mobile compatibility for Homepage

src/styles/Button.scss

@@ -18,6 +18,9 @@
   margin: 0.5rem;
   color: var(--black);
   display: flex;
+  @media (max-width: 966px) {
+    width: 80%;
+  }
 
   svg {
     width: 1.8rem;

src/styles/Header.module.scss

@@ -20,9 +20,15 @@ header.heroBanner {
     font-size: 8rem;
     font-family: 'Racing Sans One', cursive;
     text-shadow: var(--heading-shadow);
+    @media (max-width: 966px) {
+      font-size: 6rem;
+    }
   }
   h3.heroSubTitle {
     text-shadow: var(--sub-heading-shadow);
+    @media (max-width: 966px) {
+      font-size: 1.5rem;
+    }
   }
   img.starButton {
     position: absolute;
@@ -75,8 +81,10 @@ header.heroBanner {
   margin: 0 1rem;
   font-size: 1.2rem;
   font-weight: bold;
+  color: var(--text-color);
 }
 
 .scrollDownIcon {
   width: 2rem;
+  path { fill:  var(--text-color); }
 }

src/styles/HomePageFeatures.scss

@@ -83,5 +83,13 @@ html[data-theme='light'] { /* Dark Theme */
         margin: 0 0.5rem;
       }
     }
+    &.align-left, &.align-right {
+      @media (max-width: 966px) {
+        flex-direction: column;
+        .feature-half {
+          width: 95%;
+        }
+      }
+    }
   }
 }