@keyframes confetti-slow {
    0%{
        transform: translate3d(0,0,0) rotateX(0) rotateY(0);
    }
    100%{
        transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg);
    }
}

@keyframes confetti-medium {
    0%{
        transform: translate3d(0,0,0) rotateX(0) rotateY(0);
    }
    100%{
        transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg);
    }
}

@keyframes confetti-fast {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0) rotateY(0);
    }
    100% {
        transform: translate3d(-50px, 110vh, 0) rotateX(10deg) rotateY(250deg);
    }
}

.confeteiner{
    width: 100vw;
    height: 100vh;
    background: #F0F0F0;
}

.confetti-confeteiner{
    perspective: 700px;
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.confetti{
    position: absolute;
    z-index: 1;
    top: -10px;
    border-radius: 0%;
    animation: confetti-fast 5s linear infinite;
}

.confetti--animation-slow{
    animation: confetti-slow 5s linear 1 forwards;
}

.confetti--animation-medium{
    animation: confetti-medium 3s linear 1 forwards;
}

.confetti--animation-fast{
    animation: confetti-fast 1s linear 1 forwards;
}