:root {
    --speed: 2;
}

#falling-leaves {
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
}

.leaf {
    display: inline-flex;
    width: 3.25rem;
    animation: anim calc(2.5s * var(--speed)) ease-in-out infinite;
    transform: translateY(-120%) rotate(0deg);
}

.n1 {
    animation-delay: calc(0.1s * var(--speed));
}
.n2 {
    animation-delay: calc(1.2s * var(--speed));
}
.n3 {
    animation-delay: calc(2s * var(--speed));
}
.n4 {
    animation-delay: calc(1.4s * var(--speed));
}
.n5 {
    animation-delay: calc(2.4s * var(--speed));
}
.n6 {
    animation-delay: calc(0.6s * var(--speed));
}

@keyframes anim {
    0% {
        transform: translateY(-120%) rotate(0deg);
    }
    100% {
        transform: translateY(120vh) rotate(-360deg);
    }
}