change scroll effect for mission statement

src/components/Home.css

@@ -84,14 +84,19 @@
   container-name: mission-statement;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 1005px) {
   .mission-statement {
-    font-size: 3em;
+    font-size: 3.5em;
     padding-top: 4vw;
     padding-left: 2vw;
-    padding-right: 2vw;
+    padding-right: 10vw;
+  }
+}
+
+@media (max-width: 614px) {
+  .mission-statement {
+    font-size:3em;
   }
-
 }
 
 .border1 {
@@ -153,6 +158,13 @@
   transition: all 1s;
 }
 
+.slow-hidden {
+  opacity:0;
+  filter:blur(5px);
+  transform:translateX(-100%);
+  transition: all 4s;
+}
+
 
 .show {
   filter: blur(0);

src/components/Home.jsx

@@ -87,6 +87,23 @@ export default function Home() {
         })
     })
 
+    useEffect(() => {
+        const hiddenElements = document.querySelectorAll(".slow-hidden");
+        const observer = new IntersectionObserver((entries) => {
+            entries.forEach((element) => {
+                if (element.isIntersecting) {
+                    element.target.classList.add("show");
+                } else {
+                    element.target.classList.remove("show");
+                }
+            })
+        })
+        hiddenElements.forEach((entry) => {
+            observer.observe(entry);
+        })
+    })
+
+
     const periodTimes = getPeriodTimes(dayType);
     return (<>
         <Texture />
@@ -131,9 +148,9 @@ export default function Home() {
             </div>
             <div className="mission-box">
                 <h1 className="mission-statement">
-                    <span className="hidden">Welcome to the Yoo-Rhee caucus.</span><span className="hidden"> We are committed to delivering on our promises </span> 
-                    <span className="hidden">through well organized initiatives,</span><span className="hidden"> including cabinet restructuring,</span> <span className="hidden">enhancing
-                        college readiness,</span><span className="hidden"> and meaningful themed events.</span>
+                    <span className="slow-hidden">Welcome to the Yoo-Rhee caucus.</span><span className="slow-hidden"> We are committed to delivering on our promises </span> 
+                    <span className="slow-hidden">through well organized initiatives,</span><span className="slow-hidden"> including cabinet restructuring,</span> <span className="slow-hidden">enhancing
+                        college readiness,</span><span className="slow-hidden"> and meaningful themed events.</span>
                 </h1>
             </div>
             <div className="parallax">

src/components/NonPage/Footer.css

@@ -1,10 +1,11 @@
 .footer-banner {
     aspect-ratio: 3.5/1;
     position:absolute;
-    width:100vh;
-    width: 100%;
+    width: 100vw;
 }
 
+/* @media */
+
 
 .footer-image {
     height: 132px;
@@ -16,13 +17,13 @@
 }
 
 .footer-content {
-    top: 30.50px;
+    top: 0.75em;
     width: inherit;
     position: absolute;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 45px;
+    gap: 1em;
     display: inline-flex;
 
 }

src/components/NonPage/Nav.css

@@ -24,7 +24,7 @@
 .menu {
   list-style: none;
   display: inline-flex;
-  width: 40vw;
+  width: 60vw;
   justify-content: space-between;
 }
 
@@ -60,3 +60,16 @@
   text-align:center;
 }
 
+.hamburger {
+  display: none;
+}
+
+@media (max-width:625px) {
+  .hamburger {
+    display:block;
+  }
+  .menu {
+    display: none;
+  }
+
+}

src/components/NonPage/NavBar.jsx

@@ -19,6 +19,10 @@ function NavBar(props) {
                 <a href="/resources" className={currPageGet(props.page, "Resources")} >{getText(props.page, "Resources")}</a>
             </div>
 
+            {/* nav bar, by default hidden*/}
+            <a href="javascript:void(0)" class="nav-menu-item hamburger">
+                <span className="decorative">b</span> Menu <span className="decorative">a</span>
+            </a>
         </div>
     </ div>)
 }