only need to set and make pictures

autumn.css

@@ -13,10 +13,14 @@
   font-family: Arial, sans-serif;
   text-shadow: 0 0 5px #000;
   user-select: none;
+  -webkit-animation-name: leaf-fall, leaf-shake;
+  -webkit-animation-duration: 10s, 6s;
+  -webkit-animation-timing-function: linear, ease-in-out;
+  -webkit-animation-iteration-count: infinite, infinite;
   -webkit-user-select: none;
   cursor: default;
   animation-name: leaf-fall, leaf-shake;
-  animation-duration: 10s, 3s;
+  animation-duration: 10s, 6s;
   animation-timing-function: linear, ease-in-out;
   animation-iteration-count: infinite, infinite;
 }

autumn.js

@@ -45,9 +45,9 @@ observer.observe(document.body, {
 
 /*
 const images = [
-    "/web/seasonal/ghost_20x20.png",
-    "/web/seasonal/bat_20x20.png",
-    "/web/seasonal/pumpkin_20x20.png",
+    "./web/seasonal/ghost_20x20.png",
+    "./web/seasonal/bat_20x20.png",
+    "./web/seasonal/pumpkin_20x20.png",
 ];*/
 const images = [
   "./images/ghost_20x20.png",
@@ -65,35 +65,34 @@ function addRandomLeaves(count) {
   // Array of leave characters
   for (let i = 0; i < count; i++) {
     // create a new leave element
-    const leave = document.createElement('div');
-    leave.classList.add('leave');
+    const leaveDiv = document.createElement('div');
+    leaveDiv.classList.add('leave');
+
+    // pick a random leaf symbol
+    const imageSrc = images[Math.floor(Math.random() * images.length)];
+    const img = document.createElement("img");
+    img.src = imageSrc;
+
+    leaveDiv.appendChild(img);
 
-    // pick a random leave symbol
-    if (enableColoredSnowflakes) {
-      leave.textContent = autumnSymbolsMobile[Math.floor(Math.random() * autumnSymbolsMobile.length)];
-    } else {
-      leave.textContent = autumnSymbols[Math.floor(Math.random() * autumnSymbols.length)];
-    }
 
     // set random horizontal position, animation delay and size(uncomment lines to enable) 
     const randomLeft = Math.random() * 100; // position (0% to 100%)
-    //const randomSize = Math.random() * 1.5 + 0.5; // size (0.5em to 2em) //uncomment to enable random size
-    const randomAnimationDelay = Math.random() * 8; // delay (0s to 8s)
-    const randomAnimationDelay2 = Math.random() * 5; // delay (0s to 5s)
+    const randomAnimationDelay = Math.random() * 10; // delay (0s to 10s)
+    const randomAnimationDelay2 = Math.random() * 6; // delay (0s to 6s)
 
     // apply styles
-    leave.style.left = `${randomLeft}%`;
-    //leave.style.fontSize = `${randomSize}em`; //uncomment to enable random size
-    leave.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
+    leaveDiv.style.left = `${randomLeft}%`;
+    leaveDiv.style.animationDelay = `${randomAnimationDelay}s, ${randomAnimationDelay2}s`;
 
     // add the leave to the container
-    autumnContainer.appendChild(leave);
+    autumnContainer.appendChild(leaveDiv);
   }
   console.log('Random leaves added');
 }
 
 // initialize standard leaves
-function initSnowflakes() {
+function initLeaves() {
   const container = document.querySelector('.autumn-container') || document.createElement("div");
 
   if (!document.querySelector('.autumn-container')) {
@@ -102,28 +101,26 @@ function initSnowflakes() {
     document.body.appendChild(container);
   }
 
-  for (let i = 0; i < 1; i++) {
-    images.forEach(imageSrc => {
+  for (let i = 0; i < 12; i++) {
     const leafDiv = document.createElement("div");
     leafDiv.className = "leaf";
 
     const img = document.createElement("img");
-      img.src = imageSrc;
+    img.src = images[Math.floor(Math.random() * images.length)];
 
     leafDiv.appendChild(img);
     container.appendChild(leafDiv);
-    });
   }
 }
 
 // initialize leaves and add random leaves after the DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
   if (!leaves) return; // exit if leaves are disabled
-  initSnowflakes();
-  toggleSnowflakes();
+  initLeaves();
+  toggleAutumn();
 
   const screenWidth = window.innerWidth; // get the screen width to detect mobile devices
-  if (randomSnowflakes && (screenWidth > 768 || randomSnowflakesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices
-    addRandomSnowflakes(snowflakeCount);
+  if (randomLeaves && (screenWidth > 768 || randomLeavesMobile)) { // add random leaves only on larger screens, unless enabled for mobile devices
+    addRandomLeaves(leafCount);
   }
 });