.glow {
  
  animation: glow 1s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}
.new-year-glowing{
     text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
    color: #fff6a9;
    font-size: 20px;
  font-family: "Sacramento", cursive;
  text-align: center;
  animation: blink 12s infinite;
  -webkit-animation: blink 12s infinite;
}

/* I forgot to add positon absolute to the firework group */
.firework_group {
    position: absolute;
    z-index: 99 !important;
}
.explosion {
    position: absolute;
    left: -2px;
    bottom: 0;
    width: 4px;
    height: 80px;
    transform: var(--transform);
    transform-origin: 50% 100%;
    overflow: hidden;
    /* just like this */
    /* now just paste the CSS variable to the transform property */
    /* now for each line we'll add a transform rotate to make it like circular */
    /* but instead of selecing each .explosion individually I'll show you a trick you can do with CSS variables. You can specify the property you want in HTML. */
}
.explosion::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 40px;
    background-color: #FFD729;
}

@keyframes explode {
    0% { top: 105%; }
    33%, 100% { top: -55%; }
}

/* now we'll add some stylings to each firework */
.firework1 {
    left: 50%;
    top: 50%;
    transform: scale(1);
}
.firework1 .explosion::before {
    animation: explode 3000ms ease-in-out infinite;
}

.firework2 {
    left: 40%;
    top: 45%;
    transform: scale(.7);
}
.firework2 .explosion::before {
    animation: explode 2000ms .6s ease-in-out infinite;
}

.firework3 {
    left: 60%;
    top: 65%;
    transform: scale(.4);
}
.firework3 .explosion::before {
    animation: explode 4000ms .4s ease-in-out infinite;
}

.firework4 {
    left: 40%;
    top: 65%;
    transform: scale(.8);
}
.firework4 .explosion::before {
    animation: explode 1000ms .8s ease-in-out infinite;
}

.firework5 {
    left: 20%;
    top: 40%;
    transform: scale(1);
}
.firework5 .explosion::before {
    animation: explode 5000ms .8s ease-in-out infinite;
}

.firework6 {
    left: 20%;
    top: 80%;
    transform: scale(.7);
}
.firework6 .explosion::before {
    animation: explode 3000ms .6s ease-in-out infinite;
}

.firework7 {
    left: 80%;
    top: 20%;
    transform: scale(1);
}
.firework7 .explosion::before {
    animation: explode 2000ms 1s ease-in-out infinite;
}

.firework8 {
    left: 80%;
    top: 80%;
    transform: scale(1.1);
}
.firework8 .explosion::before {
    animation: explode 4500ms .3s ease-in-out infinite;
}

.firework9 {
    left: 60%;
    top: 30%;
    transform: scale(.9);
}
.firework8 .explosion::before {
    animation: explode 6000ms .7s ease-in-out infinite;
}

.firework10 {
    left: 40%;
    top: 70%;
    transform: scale(.9);
}
.firework10 .explosion::before {
    animation: explode 2000ms .9s ease-in-out infinite;
}
/* Its kinda lagging since my laptop's performance is not that good... But it won't lag normally. */
/* now I'll also add a bcg image and a text */