.confettiWrap {
    min-height: 100vh;
    overflow: hidden;
    position: fixed;
    width: 100%;
    z-index: -1;
}

.confetti {
    background: linear-gradient(
        0deg,
        rgba(166,124,0,1) 0%,
        rgba(191,155,48,1) 10%,
        rgba(255,191,0,1) 20%,
        rgba(255,207,64,1) 30%,
        rgba(255,220,115,1) 40%,
        rgba(255,216,99,1) 50%,
        rgba(255,220,115,1) 60%,
        rgba(255,207,64,1) 70%,
        rgba(255,191,0,1) 80%,
        rgba(191,155,48,1) 90%,
        rgba(166,124,0,1) 100%
    );

    border: 1px solid #A57C01;
    position: absolute;
    display: flex;
    width: 5px;
    height: 12px;
    top: -100px;
}

/* SLOWER SPEED (6-9s) */

.confetti:nth-child(1) { animation: fall 8s ease-in infinite; left:10%; }
.confetti:nth-child(2) { animation: fall 7.6s ease-in infinite .2s; left:20%; }
.confetti:nth-child(3) { animation: fall 7.8s ease-in infinite .4s; left:30%; }
.confetti:nth-child(4) { animation: fall 8.2s ease-in infinite .1s; left:40%; }
.confetti:nth-child(5) { animation: fall 8.5s ease-in infinite .7s; left:50%; }
.confetti:nth-child(6) { animation: fall 7.7s ease-in infinite .2s; left:60%; }
.confetti:nth-child(7) { animation: fall 6.8s ease-in infinite .7s; left:70%; }
.confetti:nth-child(8) { animation: fall 8.1s ease-in infinite .9s; left:80%; }
.confetti:nth-child(9) { animation: fall 8.8s ease-in infinite .9s; left:90%; }
.confetti:nth-child(10) { animation: fall 7.2s ease-in infinite 1.1s; left:100%; }

.confetti:nth-child(11) { animation: fall2 8s ease-in infinite; left:95%; }
.confetti:nth-child(12) { animation: fall2 7.6s ease-in infinite 1.1s; left:85%; }
.confetti:nth-child(13) { animation: fall2 7.8s ease-in infinite 1.2s; left:75%; }
.confetti:nth-child(14) { animation: fall2 8.2s ease-in infinite 1.3s; left:65%; }
.confetti:nth-child(15) { animation: fall2 8.5s ease-in infinite 1.4s; left:55%; }
.confetti:nth-child(16) { animation: fall2 7.7s ease-in infinite 1.5s; left:45%; }
.confetti:nth-child(17) { animation: fall2 6.8s ease-in infinite 1.6s; left:35%; }
.confetti:nth-child(18) { animation: fall2 8.1s ease-in infinite 1.7s; left:25%; }
.confetti:nth-child(19) { animation: fall2 8.8s ease-in infinite 1.8s; left:15%; }
.confetti:nth-child(20) { animation: fall2 7.2s ease-in infinite 1.9s; left:5%; }

.confetti:nth-child(21) { animation: fall 8s ease-in infinite; left:3%; }
.confetti:nth-child(22) { animation: fall 7.6s ease-in infinite 1.3s; left:13%; }
.confetti:nth-child(23) { animation: fall 7.8s ease-in infinite 1.4s; left:23%; }
.confetti:nth-child(24) { animation: fall 8.2s ease-in infinite 1.5s; left:33%; }
.confetti:nth-child(25) { animation: fall 8.5s ease-in infinite 1.6s; left:43%; }
.confetti:nth-child(26) { animation: fall 7.7s ease-in infinite 1.2s; left:53%; }
.confetti:nth-child(27) { animation: fall 6.8s ease-in infinite 1.7s; left:63%; }
.confetti:nth-child(28) { animation: fall 8.1s ease-in infinite 1.8s; left:73%; }
.confetti:nth-child(29) { animation: fall 8.8s ease-in infinite 1.9s; left:83%; }
.confetti:nth-child(30) { animation: fall 7.2s ease-in infinite 1.1s; left:93%; }

.confetti:nth-child(31) { animation: fall2 7.2s ease-in infinite 1.1s; left:7%; }
.confetti:nth-child(32) { animation: fall2 8.8s ease-in infinite .9s; left:17%; }
.confetti:nth-child(33) { animation: fall2 8.1s ease-in infinite .1s; left:27%; }
.confetti:nth-child(34) { animation: fall2 6.8s ease-in infinite .7s; left:37%; }
.confetti:nth-child(35) { animation: fall2 7.7s ease-in infinite .2s; left:47%; }
.confetti:nth-child(36) { animation: fall2 8.5s ease-in infinite .7s; left:57%; }
.confetti:nth-child(37) { animation: fall2 8.2s ease-in infinite .9s; left:67%; }
.confetti:nth-child(38) { animation: fall2 7.8s ease-in infinite .4s; left:77%; }
.confetti:nth-child(39) { animation: fall2 7.6s ease-in infinite .2s; left:87%; }
.confetti:nth-child(40) { animation: fall2 8s ease-in infinite .3s; left:97%; }

@keyframes fall {
    0% {
        top: -110px;
        transform: rotate(0deg) rotateY(-90deg);
        opacity: 1;
    }

    100% {
        top: 1400px;
        transform: rotate(360deg) rotateY(180deg);
        opacity: 0.7;
    }
}

@keyframes fall2 {
    0% {
        top: -110px;
        transform: rotate(0deg) rotateY(90deg);
        opacity: 1;
    }

    100% {
        top: 1400px;
        transform: rotate(-360deg) rotateY(-180deg);
        opacity: 0.5;
    }
}