* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Mountains of Christmas', sans-serif;

    /* IAP EFFECT IMAGE URL */
    --iapEffectImage: url("../img/iap_greenJewel.png");

    /* ANIMATION SPEED */
    --type1Duration: 2500ms;
    --type2Duration: 3000ms;
    --type3Duration: 4500ms;
    --type4Duration: 6000ms;
    --type5Duration: 6750ms;
    --type6Duration: 7500ms;
    --type7Duration: 9000ms;
}

.firework {
    display: none;
    pointer-events: none; 
}

.iap-msg-panel{
    position: absolute;
    /* TOP ALIGN */
    top: 1%;
    left: 50%; 
}

.iap-msg-panel h1 {
    text-align: center;
    width: 90vw;
    /* CENTER ALIGN */
    /* top: 50%;  */
    /* left: 50%;  */
    /* transform: translate(-50%, -50%); */
    transform: translate(-50%, 0);

    font-size: 2rem;
    color: #FFD729;
    /* background-color: white; */
    text-shadow: 0 0 .5rem rgba(0, 0, 0, .6);
    
    animation: twinkle 1100ms ease-in-out infinite;
}
@keyframes twinkle {
    25% { color: orangered;}
    50% { font-size: 2.1rem; }
    75% { color: aqua;}
}

.iap-msg-panel h3 {
    padding-top: 2.5rem;
    color: whitesmoke;
    font-size: 1.2rem;
    transform: translate(-50%, 0);
}

/* I forgot to add positon absolute to the firework group */
.firework_group {
    position: absolute;
}
.explosion {
    position: absolute;
    left: -2px;
    bottom: 0;
    width: 128px;
    height: 256px;
    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: 128px;
    /* background-color: #FFD729; */
    background-image: var(--iapEffectImage);
}

@keyframes explode {
    0% { top: 105%; opacity: 1;}
    10% {opacity: 1;}
    23% {opacity: 0;}
    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 var(--type3Duration) ease-in-out infinite;
}

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

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

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

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

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

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

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

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

.firework10 {
    left: 40%;
    top: 70%;
    transform: scale(.9);
}
.firework10 .explosion::before {
    animation: explode var(--type2Duration) .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 */