Fix bird button naming scheme

index.html

@@ -35,6 +35,10 @@
             <span>-</span>
             <a href="/photography" data-link>Photography</a>
         </nav>
+    </header>
+    
+    <!-- Nav Bar -->
+
 
     <div id="app"></div>
 
@@ -131,8 +135,8 @@
 
        
         // Bird Button
-        const DISTANCE = 40
-        const birdIcon = document.getElementById("birdButton");
+        const DISTANCE = 20
+        const birdButton = document.getElementById("birdButton");
         const birdSound = new Audio("SnowBuntingSound.ogg");
         const template = document.getElementById("barTemplate");
         const wrap = document.querySelector(".bird-wrap");
@@ -144,7 +148,7 @@
             clone.style.setProperty("--angle", `${angle}deg`);
             clone.style.setProperty("--distance", `${-distance}px`);
             clone.style.setProperty("--delay", `${delay}s`);
-            wrap.appendChild(clone);
+            birdButton.appendChild(clone);
 
             clone.addEventListener("animationend", () => clone.remove());
         }
@@ -158,7 +162,7 @@
             spawnBar(DISTANCE, -rightRandom, 0.8)
         }
 
-        birdIcon.addEventListener("click", (e) => {
+        birdButton.addEventListener("click", (e) => {
             if (!birdSound.paused) return;
             birdSound.play();
             birdSoundAnim()