body {
    background-image: url("background.webp");
}

.pp_thumbnail_container {
    position:relative;
}
.pp_thumbnail {
    border-radius: 4px;
}


.fireworks-container {
    position:fixed;
    height:100%;
    width:100%;
    top:0;
    left:0;
    z-index:-1;
    background-image:url('menu.png');
    background-size:100%;
    background-repeat:no-repeat;
    background-position:bottom center;
    animation: fadeIn 2s;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}


#loading .spinner-grow {
    background: linear-gradient(to bottom, var(--theme-accent-2), var(--theme-accent-1));
    --bs-spinner-animation-name: none;
    opacity:1;
    position:relative;
    height:4.5rem !important;
    animation: balloon 3s infinite;
    top:-10px;
    margin-left:61px;
    box-shadow:1px 2px 5px black;
    -webkit-animation: balloon 3s infinite;
}

#loading .spinner-grow::after {
    content:"";
    width: 0;
    height: 0;
    border-left: .5rem solid transparent;
    border-right: .5rem solid transparent;
    border-bottom: .5rem solid var(--theme-accent-1);
    bottom:-0.25rem;
    left:1.5rem;
    position:absolute;
}

#loading .spinner-grow::before {
    content:"";
    height:30px;
    width:1px;
    background:white;
    position:absolute;
    bottom:-2.6rem;
    left:2rem;
    opacity: .3;
}

@keyframes balloon {
    0% {
        transform: rotate(-7deg);
        left:-.6rem;
    }
    50% {
        transform: rotate(7deg);
        left:.6rem;
    }
    100% {
        transform: rotate(-7deg);
        left:-.6rem;
    }
}

:root {
    --fw-delay: 0s;
    --fw-final-size: 200px;
}

.firework {
    height:var(--fw-final-size);
    width:var(--fw-final-size);
    background-size:100%;
    background-repeat:no-repeat;
    position:absolute;
    left:calc(50% - 100px);
    bottom:50%;
    transform: scale(0);
    animation: firework 2s var(--fw-delay);
    -webkit-animation: firework 2s var(--fw-delay);
}

/* .firework:nth-child(2) {
    left: 25%;
    bottom:35%;
    --fw-delay: .5s;
}

.firework:nth-child(3) {
    left: 60%;
    bottom:35%;
    --fw-delay: .7s;
}

.firework:nth-child(4) {
    left: 22%;
    bottom:70%;
    --fw-delay: -.5s;
}

.firework:nth-child(5) {
    left: 62%;
    bottom:70%;
    --fw-delay: -.7s;
} */

@keyframes firework {
    0% { transform: scale(0); }
    30% { transform: scale(1) }
    50% { opacity:1; transform: scale(1) }
    100% { opacity:0; transform: scale(1) }
}

.firework1 {
    background-image: url('firework1.png');
}

.firework2 {
    background-image: url('firework2.png');
}

.firework3 {
    background-image: url('firework3.png');
}

.firework4 {
    background-image: url('firework4.png');
}

.firework5 {
    background-image: url('firework5.png');
}

.firework6 {
    background-image: url('firework6.png');
}