try to set schweif

fireworks.css

@@ -4,8 +4,8 @@
     position: fixed;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     overflow: hidden;
     z-index: 10; /* put it on top */
   }
@@ -16,42 +16,58 @@
     width: 6px;
     height: 6px;
     border-radius: 50%;
-    background: rgba(255, 255, 255, 0.9); /* standard colors */
-    animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;
-    /*animation: explode 1s ease-out forwards;*/
+    background: var(--color);
+    animation: move 2.5s ease-out, fadeOut 2.5s ease-out, shrink 2.5s ease-out;
+    /*animation: explode 2.5s ease-out forwards, colorShift 2.5s linear infinite;*/
     transform-origin: center;
   }
-  
-  /* animation for the explosion */
-  @keyframes explode {
-    0% {
-      transform: scale(0.5);
-      opacity: 1;
-    }
-    100% {
-      transform: translate(var(--x), var(--y)) scale(0.4);
-      opacity: 0;
-    }
+
+  /* every rocket */
+  .rocket {
+    position: absolute;
+    width: 4px;
+    height: 20px;
+    background: var(--color);
+    border-radius: 2px;
+    animation: rise 1s ease-out;
   }
   
-/* colors for the fireworks */
-@keyframes colorShift {
-  0% {
-    background: rgba(255, 0, 0, 1); /* Kräftiges Rot */
+/* movement of particles */
+@keyframes move {
+  from {
+    transform: translate(0, 0);
   }
-  20% {
-    background: rgba(0, 255, 0, 1); /* Kräftiges Grün */
+  to {
+    transform: translate(var(--x), var(--y));
   }
-  40% {
-    background: rgba(0, 0, 255, 1); /* Kräftiges Blau */
+}
+
+/* fadeout of particles */
+@keyframes fadeOut {
+  from {
+    opacity: 1;
   }
-  60% {
-    background: rgba(255, 255, 0, 1); /* Gelb */
+  to {
+    opacity: 0;
   }
-  80% {
-    background: rgba(255, 0, 255, 1); /* Magenta */
+}
+
+/* shrinking of particles */
+@keyframes shrink {
+  from {
+    transform: scale(1);
   }
-  100% {
-    background: rgba(0, 255, 255, 1); /* Türkis */
+  to {
+    transform: scale(0.5);
+  }
+}
+
+/* movement of rockets */
+@keyframes rise {
+  from {
+    transform: translate(0, 100vh);
+  }
+  to {
+    transform: translate(0, var(--y));
   }
 }