diff --git a/seperate single seasonals/Seasonals-Fireworks/add_to_index_html.html b/seperate single seasonals/Seasonals-Fireworks/add_to_index_html.html
new file mode 100644
index 0000000..d1e33a4
--- /dev/null
+++ b/seperate single seasonals/Seasonals-Fireworks/add_to_index_html.html	
@@ -0,0 +1,3 @@
+<div class="fireworks" aria-hidden="true"></div>
+<script src="seasonal/fireworks.js"></script>
+<link rel="stylesheet" href="seasonal/fireworks.css">
diff --git a/seperate single seasonals/Seasonals-Fireworks/fireworks.css b/seperate single seasonals/Seasonals-Fireworks/fireworks.css
new file mode 100644
index 0000000..aded202
--- /dev/null
+++ b/seperate single seasonals/Seasonals-Fireworks/fireworks.css	
@@ -0,0 +1,63 @@
+.fireworks {
+  position: fixed;
+  overflow: hidden;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.rocket-trail {
+  position: absolute;
+  left: var(--trailX);
+  top: var(--trailStartY);
+  width: 4px;
+
+  /* activate the following for rocket trail */
+  height: 60px;
+  background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
+  filter: blur(2px);
+
+  /* activate the following for rocket trail as a point */
+  /*height: 4px;*/
+  /*background: white;*/
+  /*border-radius: 50%;
+  box-shadow: 0 0 8px 2px white;*/
+
+  animation: rocket-trail-animation 1s linear forwards;
+}
+
+@keyframes rocket-trail-animation {
+  0% {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(calc(var(--trailEndY) - var(--trailStartY)));
+    opacity: 0;
+  }
+}
+
+/* Animation for the particles */
+@keyframes fireworkParticle {
+  0% {
+    opacity: 1;
+    transform: translate(0, 0);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(var(--x), var(--y));
+  }
+}
+
+.firework {
+  position: absolute;
+  width: 5px;
+  height: 5px;
+  background: white;
+  border-radius: 50%;
+  animation: fireworkParticle 1.5s ease-out forwards;
+  filter: blur(1px);
+}
\ No newline at end of file
diff --git a/seperate single seasonals/Seasonals-Fireworks/fireworks.js b/seperate single seasonals/Seasonals-Fireworks/fireworks.js
new file mode 100644
index 0000000..968ca2a
--- /dev/null
+++ b/seperate single seasonals/Seasonals-Fireworks/fireworks.js	
@@ -0,0 +1,159 @@
+const fireworks = true; // enable/disable fireworks
+const scrollFireworks = true; // enable fireworks to scroll with page content
+const particlesPerFirework = 50; // count of particles per firework
+const minFireworks = 3; // minimum number of simultaneous fireworks
+const maxFireworks = 6; // maximum number of simultaneous fireworks
+const intervalOfFireworks = 3200; // interval for the fireworks in milliseconds
+
+// array of color palettes for the fireworks
+const colorPalettes = [
+  ['#ff0000', '#ff7300', '#ff4500'], // red's
+  ['#0040ff', '#5a9bff', '#b0d9ff'], // blue's
+  ['#47ff00', '#8eff47', '#00ff7f'], // green's
+  ['#ffd700', '#c0c0c0', '#ff6347'], // gold, silver, red
+  ['#ff00ff', '#ff99ff', '#800080'], // magenta's
+  ['#ffef00', '#ffff99', '#ffd700'], // yellow's
+  ['#ff4500', '#ff6347', '#ff7f50'], // orange's
+  ['#e3e3e3', '#c0c0c0', '#7d7c7c'], // silver's
+];
+
+let msgPrinted = false; // flag to prevent multiple console messages
+let spacing = 0; // spacing between fireworks
+
+// function to check and control fireworks
+function toggleFirework() {
+  const fireworksContainer = document.querySelector('.fireworks');
+  if (!fireworksContainer) return;
+
+  const videoPlayer = document.querySelector('.videoPlayerContainer');
+  const trailerPlayer = document.querySelector('.youtubePlayerContainer');
+  const isDashboard = document.body.classList.contains('dashboardDocument');
+  const hasUserMenu = document.querySelector('#app-user-menu');
+
+  // hide fireworks if video/trailer player is active or dashboard is visible
+  if (videoPlayer || trailerPlayer || isDashboard || hasUserMenu) {
+    fireworksContainer.style.display = 'none'; // hide fireworks
+    if (!msgPrinted) {
+      console.log('Fireworks hidden');
+      clearInterval(fireworksInterval);
+      msgPrinted = true;
+    }
+  } else {
+    fireworksContainer.style.display = 'block'; // show fireworks
+    if (msgPrinted) {
+      console.log('Fireworks visible');
+      startFireworks();
+      msgPrinted = false;
+    }
+  }
+}
+
+// observe changes in the DOM
+const observer = new MutationObserver(toggleFirework);
+
+// start observation
+observer.observe(document.body, {
+  childList: true,    // observe adding/removing of child elements
+  subtree: true,      // observe all levels of the DOM tree
+  attributes: true    // observe changes to attributes (e.g. class changes)
+});
+
+
+// Function to create a rocket trail
+function createRocketTrail(x, startY, endY) {
+  const fireworkContainer = document.querySelector('.fireworks');
+  const rocketTrail = document.createElement('div');
+  rocketTrail.classList.add('rocket-trail');
+  fireworkContainer.appendChild(rocketTrail);
+
+  // Set position and animation
+  rocketTrail.style.setProperty('--trailX', `${x}px`);
+  rocketTrail.style.setProperty('--trailStartY', `${startY}px`);
+  rocketTrail.style.setProperty('--trailEndY', `${endY}px`);
+
+  // Remove the element after the animation
+  setTimeout(() => {
+    fireworkContainer.removeChild(rocketTrail);
+  }, 2000); // Duration of the animation
+}
+
+// Function for particle explosion
+function createExplosion(x, y) {
+  const fireworkContainer = document.querySelector('.fireworks');
+
+  // Choose a random color palette
+  const chosenPalette = colorPalettes[Math.floor(Math.random() * colorPalettes.length)];
+
+  for (let i = 0; i < particlesPerFirework; i++) {
+    const particle = document.createElement('div');
+    particle.classList.add('firework');
+
+    const angle = Math.random() * 2 * Math.PI; // Random direction
+    const distance = Math.random() * 180 + 100; // Random distance
+    const xOffset = Math.cos(angle) * distance;
+    const yOffset = Math.sin(angle) * distance;
+
+    particle.style.left = `${x}px`;
+    particle.style.top = `${y}px`;
+    particle.style.setProperty('--x', `${xOffset}px`);
+    particle.style.setProperty('--y', `${yOffset}px`);
+    particle.style.background = chosenPalette[Math.floor(Math.random() * chosenPalette.length)];
+
+    fireworkContainer.appendChild(particle);
+
+    // Remove particle after the animation
+    setTimeout(() => particle.remove(), 3000);
+  }
+}
+
+// Function for the firework with trail
+function launchFirework() {
+  // Random horizontal position
+  const x = Math.random() * window.innerWidth; // Any value across the entire width
+
+  // Trail starts at the bottom and ends at a random height around the middle
+  let startY, endY;
+  if (scrollFireworks) {
+    // Y-position considers scrolling
+    startY = window.scrollY + window.innerHeight; // Bottom edge of the window plus the scroll offset
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2 + window.scrollY; // Area around the middle, but also with scrolling
+  } else {
+    startY = window.innerHeight; // Bottom edge of the window
+    endY = Math.random() * window.innerHeight * 0.5 + window.innerHeight * 0.2; // Area around the middle
+  }
+
+  // Create trail
+  createRocketTrail(x, startY, endY);
+
+  // Create explosion
+  setTimeout(() => {
+    createExplosion(x, endY); // Explosion at the end height
+  }, 1000); // or 1200
+}
+
+// Start the firework routine
+function startFireworks() {
+  const fireworkContainer = document.querySelector('.fireworks') || document.createElement("div");
+
+  if (!document.querySelector('.fireworks')) {
+    fireworkContainer.className = "fireworks";
+    fireworkContainer.setAttribute("aria-hidden", "true");
+    document.body.appendChild(fireworkContainer);
+  }  
+  
+  fireworksInterval = setInterval(() => {
+    const randomCount = Math.floor(Math.random() * maxFireworks) + minFireworks;
+    for (let i = 0; i < randomCount; i++) {
+      setTimeout(() => {
+        launchFirework();
+      }, i * 200); // 200ms delay between fireworks
+    }
+  }, intervalOfFireworks); // Interval between fireworks
+}
+
+// Initialize fireworks and add random fireworks after the DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+  if (!fireworks) return; // exit if fireworks are disabled
+  startFireworks();
+  toggleFirework();
+});
diff --git a/seperate single seasonals/Seasonals-Fireworks/test-site.html b/seperate single seasonals/Seasonals-Fireworks/test-site.html
new file mode 100644
index 0000000..50347a4
--- /dev/null
+++ b/seperate single seasonals/Seasonals-Fireworks/test-site.html	
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Fireworks Display</title>
+    <link rel="stylesheet" href="fireworks.css">
+    
+    <style>
+        body {
+            background-color: black;
+        }
+    </style>
+</head>
+
+<body>
+    <div class="fireworks" aria-hidden="true"></div>
+    <script src="fireworks.js"></script>
+</body>
+
+</html>
\ No newline at end of file