.rain-drops {
    pointer-events: none;
    position: fixed;
    top: 0px;
    height: 120px;
    width: 6px;
    background: linear-gradient(70deg, #344d7b,transparent 70%);
    rotate: -35deg;
    border-radius: 50px;
    translate: -350px 0px;
    animation: fallingRain 1.2s linear forwards;
    background-attachment: scroll;
    opacity: 1;
    transition: opacity 0.5s ease;
    z-index: 9999;
}
@keyframes fallingRain {
    0%{
        transform: translateY(0);
        opacity: 0.7;
    }
    100% {
        transform: translateY(325vh);
        opacity: 1;
    }
}

@media screen and (max-width: 850px) {
    .rain-drops {
        pointer-events: none;
        position: fixed;
        top: 0px;
        height: 120px;
        width: 6px;
        background: linear-gradient(70deg, #344d7b,transparent 70%);
        rotate: -10deg;
        border-radius: 50px;
        translate: -80px 0px;
        animation: fallingRain 1.2s linear forwards;
        background-attachment: scroll;
        opacity: 1;
        transition: opacity 0.5s ease;
        z-index: 9999;
    }
}