.confetti-container {
    position      : absolute;
    width         : 100vw;
    height        : 100vh;
    top           : 0px;
    user-select   : none;
    pointer-events: none;
    z-index       : 150;
}

.confetti {
    width           : 15px;
    height          : 15px;
    background-color: #f2d74e;
    position        : absolute;
    left            : 50%;
    animation       : confetti 5s ease-in-out -2s infinite;
    transform-origin: left top;
    user-select   : none;
    pointer-events: none;
}

.confetti:nth-child(1) {
    background-color: #f2d74e;
    left            : 5%;
    animation-delay : 0;
}

.confetti:nth-child(2) {
    background-color: #95c3de;
    left            : 10%;
    animation-delay : -5s;
}

.confetti:nth-child(3) {
    background-color: #ff9a91;
    left            : 15%;
    animation-delay : -3s;
}

.confetti:nth-child(4) {
    background-color: #f2d74e;
    left            : 20%;
    animation-delay : -2.5s;
}

.confetti:nth-child(5) {
    background-color: #95c3de;
    left            : 25%;
    animation-delay : -4s;
}

.confetti:nth-child(6) {
    background-color: #ff9a91;
    left            : 30%;
    animation-delay : -6s;
}

.confetti:nth-child(7) {
    background-color: #f2d74e;
    left            : 35%;
    animation-delay : -1.5s;
}

.confetti:nth-child(8) {
    background-color: #95c3de;
    left            : 40%;
    animation-delay : -2s;
}

.confetti:nth-child(9) {
    background-color: #ff9a91;
    left            : 45%;
    animation-delay : -3.5s;
}

.confetti:nth-child(10) {
    background-color: #f2d74e;
    left            : 50%;
    animation-delay : -2.5s;
}

.confetti:nth-child(11) {
    background-color: #f2d74e;
    left            : 55%;
    animation-delay : 0;
}

.confetti:nth-child(12) {
    background-color: #95c3de;
    left            : 60%;
    animation-delay : -5s;
}

.confetti:nth-child(13) {
    background-color: #ff9a91;
    left            : 65%;
    animation-delay : -3s;
}

.confetti:nth-child(14) {
    background-color: #f2d74e;
    left            : 70%;
    animation-delay : -2.5s;
}

.confetti:nth-child(15) {
    background-color: #95c3de;
    left            : 75%;
    animation-delay : -4s;
}

.confetti:nth-child(16) {
    background-color: #ff9a91;
    left            : 80%;
    animation-delay : -6s;
}

.confetti:nth-child(17) {
    background-color: #f2d74e;
    left            : 85%;
    animation-delay : -1.5s;
}

.confetti:nth-child(18) {
    background-color: #95c3de;
    left            : 90%;
    animation-delay : -2s;
}

.confetti:nth-child(19) {
    background-color: #ff9a91;
    left            : 95%;
    animation-delay : -3.5s;
}

.confetti:nth-child(20) {
    background-color: #f2d74e;
    left            : 100%;
    animation-delay : -2.5s;
}

@keyframes confetti {
    0% {
        transform: rotateZ(15deg) rotateY(0deg) translate(0, 0) scale(0);
    }

    25% {
        transform: rotateZ(5deg) rotateY(360deg) translate(-5vw, 20vh) scale(1);
    }

    50% {
        transform: rotateZ(15deg) rotateY(720deg) translate(5vw, 60vh);
    }

    75% {

        transform: rotateZ(5deg) rotateY(1080deg) translate(-10vw, 80vh) scale(1);
    }

    100% {
        transform: rotateZ(15deg) rotateY(1440deg) translate(10vw, 110vh) scale(0);
    }
}