Updates styles

src/styles/Header.module.scss

@@ -57,3 +57,26 @@ header.heroBanner {
   cursor: pointer;
   text-decoration: underline;
 }
+
+.scrollDown {
+  display: flex;
+  width: fit-content;
+  cursor: pointer;
+  margin: 2rem auto;
+  position: absolute;
+  bottom: 2rem;
+  left: 42%;
+  @media (max-width: 966px) {
+   display: none;
+  }
+}
+
+.scrollDownText {
+  margin: 0 1rem;
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+
+.scrollDownIcon {
+  width: 2rem;
+}

src/styles/HomePageFeatures.scss

@@ -43,7 +43,7 @@ html[data-theme='light'] { /* Dark Theme */
         height: fit-content;
         border-radius: 8px;
         box-shadow: var(--feature-img-shadow);
-        img.demo {
+        img.demo, span.not-demo {
           background: var(--kinda-transparent);
           width: 100%;
           max-height: 36rem;
@@ -53,6 +53,11 @@ html[data-theme='light'] { /* Dark Theme */
           border-radius: 8px;
           box-shadow: var(--feature-img-shadow);
         }
+        span.not-demo {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
       }
     }
     .feature-title {

src/styles/custom.scss

@@ -15,7 +15,7 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
   --ifm-code-font-size: 95%;
-  --ifm-navbar-background-color: var(--primary);
+  --ifm-navbar-background-color: var(--hero-background);
   --ifm-navbar-link-color: var(--text-color);
 }