/*
########################################
This file contains all CSS needed for
the rain animation to work
########################################
 */

.rain__drop {
    -webkit-animation-delay: calc(var(--d) * 1s);
    animation-delay: calc(var(--d) * 1s);
    -webkit-animation-duration: calc(var(--a) * 1s);
    animation-duration: calc(var(--a) * 1s);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: drop;
    animation-name: drop;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    /* Height of a singe rain drop */
    height: 30px;
    left: calc(var(--x) * 1%);
    position: absolute;
    /* Increasing the value 50 moves the rain up, decreasing it moves the rain down */
    top: calc((var(--y) + 50) * -1px);
    z-index: 0;
}

.rain__drop path {
    fill: #a1c6cc;
    opacity: var(--o);
    transform: scaleY(calc(var(--s) * 1.5));
    z-index: 0;
}

@-webkit-keyframes drop {
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}

@keyframes drop {
    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(100vh);
    }
}