[class^="fireworks"]{
    display: inline-block;
    position: absolute;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
}

#fireworks-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    filter:
    drop-shadow(0 0 3px rgba(255, 255, 240, 0.95))
    drop-shadow(0 0 8px rgba(255, 215,   0, 0.85))

}


.happy-new-year{
    position: fixed;
    text-align: center;
    z-index: 9999999;

    background: linear-gradient(to right, #4c0027, #4c000e, #43141d);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;

    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6))
            drop-shadow(0 0 18px rgba(255,255,255,0.35));

    top: 50%;
    left: 50%;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    font-size: 4rem;
    opacity: 0;
    transform: translate(-150%, -50%);
    will-change: transform, opacity;
}

.happy-new-year.animateHappyNewYear{
    animation: happyNewYear 7000ms forwards;
}

@keyframes happyNewYear{
    0% {
        transform: translate(-150%, -50%);
        opacity: 0;
    }

    10% {
        transform: translate(-50%, -50%);
        opacity: 0.5;
    }

    20% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    50% {
        transform: translate(-50%, -50%);
        opacity: 0.5;
    }

    80% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    100% {
        transform: translate(150%, -50%);
        opacity: 1;
    }
}