/*
    Created on : Jan 29, 2024, 8:03:11 PM
    Author     : Raphael Martin
*/

.firework {
    position: absolute;
    width: 5px;
    height: 5px;
    opacity: 1;
}

@keyframes launchFirework {
    to {
        opacity: 0;
    }
}

@for $i from 1 through 50 {
    @keyframes launchFirework#{$i} {
        to {
            transform: translate(random(201) - 101 + px, random(201) - 101 + px);
        }
    }
    .firework#{$i} {
        animation: launchFirework random(1001) + 499 + ms linear forwards, launchFirework#{$i} random(1001) + 499 + ms linear forwards;
    }
}