feat: make emailbr only appear when form appears

src/pages/index.astro

@@ -37,7 +37,7 @@ import "../styles/index.css";
           </div>
         </div>
         <EmailForm />
-        <span class="emailbr"></span>
+        <span class="emailbr" id="emailbr"></span>
         <button class="chevron-button" id="chevron-button"></button>
         <div class="home-features">
           <div class="home-container1">
@@ -144,6 +144,7 @@ import "../styles/index.css";
   const buttons = document.querySelectorAll("[form-button]");
   const scroll = document.getElementById("chevron-button");
   const form = document.getElementById("email-form");
+  const emailbr = document.getElementById("emailbr");
 
   form.style.visibility = "hidden";
 
@@ -155,9 +156,11 @@ import "../styles/index.css";
     if (form.style.visibility == "hidden") {
       form.style.visibility = "visible";
       scroll.style.visibility = "hidden";
+      emailbr.classList.add("show");
     } else {
       form.style.visibility = "hidden";
       scroll.style.visibility = "visible";
+      emailbr.classList.remove("show");
     }
   }
   scroll.addEventListener("click", () => {
@@ -171,6 +174,11 @@ import "../styles/index.css";
 </script>
 
 <style>
+  .emailbr {
+    display: block;
+    margin: 0px 0;
+  }
+
   @media (max-width: 825px) {
     .home-container {
       display: flex;
@@ -213,7 +221,8 @@ import "../styles/index.css";
       width: 100%;
       height: 100%;
     }
-    .emailbr {
+
+    .emailbr.show {
       display: block;
       margin: 140px 0;
     }