delete old files, rename existing, add main.js

fire.css

@@ -14,7 +14,7 @@
     width: 100%;
     height: 100%;
     background-position: 51% bottom;
-    background-image: url(bonfire_black_min.png);
+    background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
     filter: drop-shadow(0px 10px 15px black);
@@ -55,12 +55,14 @@
                 transparent 88% /* ignore the fire */
             )
             /* linear gradient for the smog */,
-        url(noise2.svg), url(noise2.svg), url(noise.svg), url(noise1.svg);
+        url(noiseMedium.svg), url(noiseMedium.svg), url(noiseSmall.svg),
+        url(noiseBig.svg);
 
     filter: sepia(1);
-    background-blend-mode: color-burn /* smog gradient and noise2 */,
-        color-burn /* noise2 and noise2 */, color-burn /* noise2 and noise */,
-        difference /* noise and noise1 */;
+    background-blend-mode: color-burn /* smog gradient and noiseMedium */,
+        color-burn /* noiseMedium and noiseMedium */,
+        color-burn /* noiseMedium and noiseSmall */,
+        difference /* noiseSmall and noiseBig */;
     mix-blend-mode: hard-light;
     animation: firing 100s linear infinite;
 }
@@ -97,7 +99,7 @@
     height: 100%;
     filter: drop-shadow(0px 11px 14px black);
     background-position: 51% bottom;
-    background-image: url(bonfire_black_min.png);
+    background-image: url(bonfire.png);
     background-repeat: no-repeat;
     background-size: 30%;
     mix-blend-mode: overlay;

index.html

@@ -15,61 +15,8 @@
         </div>
 
         <audio id="fireSound" loop>
-            <source src="fire_min.mp3" type="audio/mpeg" />
+            <source src="fire.mp3" type="audio/mpeg" />
         </audio>
-        <script>
-            function startSound() {
-                const fireSound = document.getElementById("fireSound");
-                const start = document.getElementById("start");
-                const fire = document.getElementById("fire");
-
-                fire.classList.add("on");
-                start.style.display = "none";
-
-                fireSound.play();
-            }
-
-            let lastClickTime = 0;
-            document.addEventListener("click", function (event) {
-                const currentTime = new Date().getTime();
-                const tapLength = currentTime - lastClickTime;
-                if (tapLength < 500 && tapLength > 0) {
-                    toggleFullScreen();
-                    event.preventDefault();
-                }
-                lastClickTime = currentTime;
-            });
-
-            // Toggle fullscreen mode
-            function toggleFullScreen() {
-                const element = document.documentElement;
-                const isFullScreen =
-                    document.fullscreenElement ||
-                    document.mozFullScreenElement ||
-                    document.webkitFullscreenElement ||
-                    document.msFullscreenElement;
-                if (!isFullScreen) {
-                    if (element.requestFullscreen) {
-                        element.requestFullscreen();
-                    } else if (element.mozRequestFullScreen) {
-                        element.mozRequestFullScreen();
-                    } else if (element.webkitRequestFullscreen) {
-                        element.webkitRequestFullscreen();
-                    } else if (element.msRequestFullscreen) {
-                        element.msRequestFullscreen();
-                    }
-                } else {
-                    if (document.exitFullscreen) {
-                        document.exitFullscreen();
-                    } else if (document.mozCancelFullScreen) {
-                        document.mozCancelFullScreen();
-                    } else if (document.webkitExitFullscreen) {
-                        document.webkitExitFullscreen();
-                    } else if (document.msExitFullscreen) {
-                        document.msExitFullscreen();
-                    }
-                }
-            }
-        </script>
+        <script src="main.js"></script>
     </body>
 </html>

main.js

@@ -0,0 +1,52 @@
+function startSound() {
+    const fireSound = document.getElementById("fireSound");
+    const start = document.getElementById("start");
+    const fire = document.getElementById("fire");
+
+    fire.classList.add("on");
+    start.style.display = "none";
+
+    fireSound.play();
+}
+
+let lastClickTime = 0;
+document.addEventListener("click", function (event) {
+    const currentTime = new Date().getTime();
+    const tapLength = currentTime - lastClickTime;
+    if (tapLength < 500 && tapLength > 0) {
+        toggleFullScreen();
+        event.preventDefault();
+    }
+    lastClickTime = currentTime;
+});
+
+// Toggle fullscreen mode
+function toggleFullScreen() {
+    const element = document.documentElement;
+    const isFullScreen =
+        document.fullscreenElement ||
+        document.mozFullScreenElement ||
+        document.webkitFullscreenElement ||
+        document.msFullscreenElement;
+    if (!isFullScreen) {
+        if (element.requestFullscreen) {
+            element.requestFullscreen();
+        } else if (element.mozRequestFullScreen) {
+            element.mozRequestFullScreen();
+        } else if (element.webkitRequestFullscreen) {
+            element.webkitRequestFullscreen();
+        } else if (element.msRequestFullscreen) {
+            element.msRequestFullscreen();
+        }
+    } else {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+            document.msExitFullscreen();
+        }
+    }
+}