.parent-container { /* basic container to fit all content to component size */
    border: 5px red;
    top: 0;
    left: 0;
    position: relative; 
    overflow: hidden;
    width: 100%; 
    height: 100%; 
    z-index: 5;
}

    .parent-container .rain,
    .parent-container .wind {
        border: 5px red;
        top: 0;
        left: 0;
        overflow: hidden;
    }
/*power arrows*/
.grid-power,
.used-power,
.battery-power,
.grid-power-e,
.used-power-e,
.battery-power-e {
    width: 1%;
    height: 2.5%;
    border-top: 0.25em solid lightcyan;
    border-left: 0.25em solid lightcyan;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 61%;
    left: 55%;
    opacity: 0;
    z-index: 2;
}

.grid-ball,
.used-ball,
.battery-ball {
    width: 1%;
    height: 2.5%;
    border-top: 0.25em solid lightcyan;
    border-left: 0.25em solid lightcyan;
    border-bottom: 0.25em solid lightcyan;
    border-right: 0.25em solid lightcyan;
    border-radius: 50%;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 63%;
    left: 57%;
    opacity: 0;
    z-index: 2;
}

.grid-power-g,
.used-power-g,
.battery-power-g,
.grid-power-ge,
.used-power-ge,
.battery-power-ge {
    width: 1%;
    height: 2.5%;
    border-top: 0.25em solid cyan;
    border-left: 0.25em solid cyan;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 61%;
    left: 55%;
    opacity: 0;
    filter: blur(3px);
    z-index: 1;
}

.grid-ball-g,
.used-ball-g,
.battery-ball-g {
    width: 1%;
    height: 2.5%;
    background-color: cyan;
    border-radius: 50%;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform: scale(2);
    top: 61%;
    left: 55%;
    opacity: 0;
    filter: blur(2px);
    z-index: 1;
}

/*power arrows*/
.rev-grid-power,
.rev-used-power,
.rev-battery-power {
    width: 1%;
    height: 2.5%;
    border-top: 0.25em solid lightcyan;
    border-left: 0.25em solid lightcyan;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 61%;
    left: 55%;
    opacity: 0;
    z-index: 2;
}

.rev-grid-ball,
.rev-used-ball,
.rev-battery-ball {
    width: 1%;
    height: 2.5%;
    border-top: 0.25em solid lightcyan;
    border-left: 0.25em solid lightcyan;
    border-bottom: 0.25em solid lightcyan;
    border-right: 0.25em solid lightcyan;
    border-radius: 50%;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 63%;
    left: 57%;
    opacity: 0;
    z-index: 2;
}

.rev-grid-power-g,
.rev-used-power-g,
.rev-battery-power-g {
    width: 1%;
    height: 2.5%;
    border-top: 0.25em solid cyan;
    border-left: 0.25em solid cyan;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    top: 61%;
    left: 55%;
    opacity: 0;
    filter: blur(3px);
    z-index: 1;
}

.rev-grid-ball-g,
.rev-used-ball-g,
.rev-battery-ball-g {
    width: 1%;
    height: 2.5%;
    background-color: cyan;
    border-radius: 50%;
    position: absolute;
    animation-duration: 4.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    transform: scale(2);
    top: 61%;
    left: 55%;
    opacity: 0;
    filter: blur(2px);
    z-index: 1;
}

.grid-power-g {
    animation-name: gridMove;
}

.grid-power {
    animation-name: gridMove;
}

.used-power-g {
    animation-name: carMove;
}

.used-power {
    animation-name: carMove;
}

.battery-power-g {
    animation-name: batMove;
}

.battery-power {
    animation-name: batMove;
}

.grid-ball-g {
    animation-name: gridBallBlur;
}

.grid-ball {
    animation-name: gridBall;
}

.used-ball-g {
    animation-name: carBallBlur;
}

.used-ball {
    animation-name: carBall;
}

.battery-ball-g {
    animation-name: batBallBlur;
}

.battery-ball {
    animation-name: batBall;
}

.rev-grid-power-g {
    animation-name: gridMoveRev;
}

.rev-grid-power {
    animation-name: gridMoveRev;
}

.rev-used-power-g {
    animation-name: carMoveRev;
}

.rev-used-power {
    animation-name: carMoveRev;
}

.rev-battery-power-g {
    animation-name: batMoveRev;
}

.rev-battery-power {
    animation-name: batMoveRev;
}

.rev-grid-ball-g {
    animation-name: gridBallBlurRev;
}

.rev-grid-ball {
    animation-name: gridBallRev;
}

.rev-used-ball-g {
    animation-name: carBallBlurRev;
}

.rev-used-ball {
    animation-name: carBallRev;
}

.rev-battery-ball-g {
    animation-name: batBallBlurRev;
}

.rev-battery-ball {
    animation-name: batBallRev;
}

.grid-power-ge {
    animation-name: extGridMove;
}
.grid-power-e {
    animation-name: extGridMove;
}
.used-power-ge {
    animation-name: extCarMove;
}

.used-power-e {
    animation-name: extCarMove;
}

.battery-power-ge {
    animation-name: extBatMove;
}

.battery-power-e {
    animation-name: extBatMove;
}


/*ball anim 1*/
@keyframes gridMove {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: rotate(-90deg);
    }

    10% {
        opacity: 1;
    }

    25% {
        top: 75%;
        left: 48%;
        transform: rotate(-90deg);
    }

    26% {
        top: 75%;
        left: 48%;
        transform: rotate(-10deg);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 33%;
        left: 18%;
        opacity: 0;
        transform: rotate(-10deg);
    }

    100% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: rotate(90deg);
    }
}

@keyframes gridMoveRev {
    0% {
        top: 33%;
        left: 18%;
        opacity: 0;
        transform: rotate(180deg);
    }
    1% {
        transform: rotate(180deg)
    }

    10% {
        opacity: 1;
    }

    75% {
        top: 75%;
        left: 48%;
        transform: rotate(180deg);
    }

    76% {
        top: 75%;
        left: 48%;
        transform: rotate(90deg)
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: rotate(90deg)
    }

    100% {
        top: 33%;
        left: 18%;
        opacity: 0;
        transform: rotate(180deg)
    }
}

@keyframes gridBall {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.5);
    }

    25% {
        top: 75%;
        left: 48%;
    }

    26% {
        top: 75%;
        left: 48%;
    }

    90% {
        transform: scale(1.5);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 33%;
        left: 18%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes gridBallRev {
    0% {
        top: 33%;
        left: 18%;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.5);
    }

    75% {
        top: 75%;
        left: 48%;
    }

    90% {
        transform: scale(1.5);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 55%;
        opacity: 0;
    }

    100% {
        top: 33%;
        left: 18%;
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes gridBallBlur {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 1;
        transform: scale(2);
    }

    25% {
        top: 75%;
        left: 48%;
    }

    26% {
        top: 75%;
        left: 48%;
    }

    90% {
        transform: scale(2);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 33%;
        left: 18%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes gridBallBlurRev {
    0% {
        top: 33%;
        left: 18%;
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 1;
        transform: scale(2);
    }

    75% {
        top: 75%;
        left: 48%;
    }

    76% {
        top: 75%;
        left: 48%;
    }

    90% {
        transform: scale(2);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 55%;
        opacity: 0;
    }

    100% {
        top: 33%;
        left: 18%;
        opacity: 0;
        transform: scale(1);
    }
}

/*ball anim 2*/
@keyframes batMove {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: rotate(270deg);
    }

    10% {
        opacity: 1;
    }

    25% {
        top: 75%;
        left: 48%;
        transform: rotate(270deg);
    }

    26% {
        top: 75%;
        left: 48%;
        transform: rotate(170deg);
    }

    50% {
        top: 85%;
        left: 58%;
        transform: rotate(170deg);
    }

    51% {
        top: 85%;
        left: 58%;
        transform: rotate(90deg);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 70%;
        opacity: 0;
        transform: rotate(90deg);
    }

    100% {
        top: 65%;
        left: 53%;
        opacity: 0;
        transform: rotate(-90deg);
    }
}

@keyframes batMoveRev {
    0% {
        top: 65%;
        left: 70%;
        transform: rotate(-90deg);
        opacity: 0;
        
    }

    10% {
        opacity: 1;
    }

    50% {
        top: 85%;
        left: 58%;
        transform: rotate(-90deg);
    }

    51% {
        top: 85%;
        left: 58%;
        transform: rotate(0deg);
    }

    75% {
        top: 75%;
        left: 48%;
        transform: rotate(0deg);
    }
    76% {
        top: 75%;
        left: 48%;
        transform: rotate(90deg);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 55%;
        transform: rotate(90deg);
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 70%;
        opacity: 0;
      
    }
}

@keyframes batBall {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.5);
    }

    25% {
        top: 75%;
        left: 48%;
    }

    26% {
        top: 75%;
        left: 48%;
    }

    50% {
        top: 85%;
        left: 58%;
        transform: scale(1.5);
    }

    51% {
        top: 85%;
        left: 58%;
    }

    90% {
        transform: scale(1.5);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 70%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 53%;
        opacity: 0;
        transform: scale(0.5);
    }
}
@keyframes batBallRev {
    0% {
        top: 65%;
        left: 70%;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.5);
    }

    50% {
        top: 85%;
        left: 58%;
        transform: scale(1.5);
    }

    51% {
        top: 85%;
        left: 58%;
    }


    75% {
        top: 75%;
        left: 48%;
    }

    90% {
        transform: scale(1.5);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 55%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 70%;
        opacity: 0;
        transform: scale(0.5);
    }
}
@keyframes batBallBlur {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 1;
        transform: scale(2);
    }

    25% {
        top: 75%;
        left: 48%;
    }

    26% {
        top: 75%;
        left: 48%;
    }

    50% {
        top: 85%;
        left: 58%;
        transform: scale(2);
    }

    51% {
        top: 85%;
        left: 58%;
    }

    90% {
        transform: scale(2);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 70%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 53%;
        opacity: 0;
        transform: scale(1);
    }
}

@keyframes batBallBlurRev {
    0% {
        top: 65%;
        left: 70%;
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 1;
        transform: scale(2);
    }

    50% {
        top: 85%;
        left: 58%;
        transform: scale(2);
    }

    51% {
        top: 85%;
        left: 58%;
    }

    75% {
        top: 75%;
        left: 48%;
    }

    90% {
        transform: scale(2);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 65%;
        left: 55%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 70%;
        opacity: 0;
        transform: scale(1);
    }
}
/*ball anim 3*/

@keyframes carMove {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: rotate(-90deg);
    }

    10% {
        opacity: 1;
    }

    25% {
        top: 75%;
        left: 48%;
    }


    50% {
        top: 82%;
        left: 43%;
        transform: rotate(-90deg);
    }

    51% {
        top: 82%;
        left: 43%;
        transform: rotate(-10deg);
    }

    70% {
        opacity: 1;
    }

    75% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: rotate(-10deg);
    }

    76% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: rotate(-90deg);
    }


    100% {
        top: 65%;
        left: 55%;
        opacity: 0;
    }
}

@keyframes carMoveRev {
    0% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: rotate(180deg);
    }

    25% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: rotate(180deg);
    }
    26% {
        transform: rotate(180deg);
        top: 66%;
        left: 30%;
    }
    30% {
        transform: rotate(180deg);
        opacity: 1;
    }
    49% {
        transform: rotate(180deg);
        opacity: 1;
    }
    50% {
        transform: rotate(90deg);
        top: 82%;
        left: 43%;
    }

    75% {
        transform: rotate(90deg);
        top: 75%;
        left: 48%;
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
    99% {
        transform: rotate(90deg);
        top: 65%;
        left: 55%;
        opacity: 0;
    }
    100% {
        transform: rotate(180deg);
        top: 66%;
        left: 30%;
        opacity: 0;
    }
}

@keyframes carBall {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(0.5);
    }

    10% {
        opacity: 1;
        transform: scale(1.5);
    }


    25% {
        top: 75%;
        left: 48%;
    }


    50% {
        top: 82%;
        left: 43%;
        transform: scale(1.5);
    }

    65% {
        transform: scale(1.5);
    }

    70% {
        opacity: 1;
    }

    75% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: scale(0.5);
    }


    76% {
        top: 66%;
        left: 30%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(0.5);
    }
}

@keyframes carBallRev {
    0% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: scale(0.5);
    }

    25% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: scale(0.5);
    }

    26% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: scale(0.5);
    }
    30% {
        transform: scale(1.5);
        opacity: 1;
    }

    50% {
        top: 82%;
        left: 43%;
    }

    75% {
        top: 75%;
        left: 48%;
        
    }
    90% {
        transform: scale(1.5);
        opacity: 1;
    }
    99% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(0.5);
    }

    100% {
        top: 66%;
        left: 30%;
        opacity: 0;
    }
}

@keyframes carBallBlur {
    0% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(1);
    }

    10% {
        opacity: 1;
        transform: scale(2);
    }


    25% {
        top: 75%;
        left: 48%;
    }


    50% {
        top: 82%;
        left: 43%;
        transform: scale(2);
    }

    65% {
        transform: scale(2);
    }

    70% {
        opacity: 1;
    }

    75% {
        top: 66%;
        left: 30%;
        opacity: 0;
        transform: scale(1);
    }


    76% {
        top: 66%;
        left: 30%;
        opacity: 0;
    }

    100% {
        top: 65%;
        left: 55%;
        opacity: 0;
        transform: scale(0.5);
    }
}
@keyframes carBallBlurRev {
    0% {
        top: 66%;
        left: 30%;
        opacity: 0;
    }

    25% {
        top: 66%;
        left: 30%;
        opacity: 0;
    }

    26% {
        top: 66%;
        left: 30%;
        opacity: 1;
    }

    50% {
        top: 82%;
        left: 43%;
    }

    75% {
        top: 75%;
        left: 48%;
    }
    90% {
        opacity: 1;
    }
    99% {
        top: 65%;
        left: 55%;
        opacity: 0;
    }

    100% {
        top: 66%;
        left: 30%;
        opacity: 0;
    }
}
@keyframes extGridMove {
    0% {
        top: 60%;
        left: 55%;
        opacity: 0;
        transform: rotate(-90deg);
    }

    10% {
        opacity: 1;
    }

    25% {
        top: 70%;
        left: 48%;
        transform: rotate(-90deg);
    }

    26% {
        top: 70%;
        left: 48%;
        transform: rotate(-10deg);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 28%;
        left: 17%;
        opacity: 0;
        transform: rotate(-10deg);
    }

    100% {
        top: 60%;
        left: 55%;
        opacity: 0;
        transform: rotate(90deg);
    }

}
@keyframes extCarMove {
    0% {
        top: 60%;
        left: 55%;
        opacity: 0;
        transform: rotate(-90deg);
    }

    10% {
        opacity: 1;
    }

    25% {
        top: 70%;
        left: 48%;
    }


    50% {
        top: 77%;
        left: 43%;
        transform: rotate(-90deg);
    }

    51% {
        top: 77%;
        left: 43%;
        transform: rotate(-10deg);
    }

    70% {
        opacity: 1;
    }

    75% {
        top: 61%;
        left: 30%;
        opacity: 0;
        transform: rotate(-10deg);
    }

    76% {
        top: 61%;
        left: 30%;
        opacity: 0;
        transform: rotate(-90deg);
    }


    100% {
        top: 60%;
        left: 55%;
        opacity: 0;
    }
}
@keyframes extBatMove {
    0% {
        top: 60%;
        left: 55%;
        opacity: 0;
        transform: rotate(270deg);
    }

    10% {
        opacity: 1;
    }

    25% {
        top: 70%;
        left: 48%;
        transform: rotate(270deg);
    }

    26% {
        top: 70%;
        left: 48%;
        transform: rotate(170deg);
    }

    50% {
        top: 80%;
        left: 58%;
        transform: rotate(170deg);
    }

    51% {
        top: 80%;
        left: 58%;
        transform: rotate(90deg);
    }

    95% {
        opacity: 1;
    }

    99% {
        top: 60%;
        left: 70%;
        opacity: 0;
        transform: rotate(90deg);
    }

    100% {
        top: 60%;
        left: 53%;
        opacity: 0;
        transform: rotate(-90deg);
    }
}



/*rain drop*/
.rain {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
    /*(length, height)*/
    .rain:nth-of-type(0) {
        opacity: 1;
        --duration: 1.7s;
        --delay: 1.1s;
        transform: translate(30%, -10%) scale(0.9);
    }

    .rain:nth-of-type(1) {
        opacity: 1;
        --duration: 1.7s;
        --delay: 1.1s;
        transform: translate(20%, -10%) scale(0.9);
    }

    .rain:nth-of-type(2) {
        opacity: 1;
        --duration: 1.4s;
        --delay: 1.3s;
        transform: translate(-30%, 40%) scale(0.9);
    }

    .rain:nth-of-type(3) {
        opacity: 1;
        --duration: 1.3s;
        --delay: 1.2s;
        transform: translate(-40%, 20%) scale(0.9);
    }

    .rain:nth-of-type(4) {
        opacity: 1;
        --duration: 1.1s;
        --delay: 1.3s;
        transform: translate(40%, 0%) scale(0.9);
    }

    .rain:nth-of-type(5) {
        opacity: 1;
        --duration: 1.4s;
        --delay: 1.0s;
        transform: translate(30%, -20%) scale(0.9);
    }

    .rain:nth-of-type(6) {
        opacity: 1;
        --duration: 1.7s;
        --delay: 1.2s;
        transform: translate(-30%, 10%) scale(0.9);
    }

    .rain:nth-of-type(7) {
        opacity: 1;
        --duration: 1.4s;
        --delay: 1.4s;
        transform: translate(10%, 10%) scale(0.9);
    }

    .rain:nth-of-type(8) {
        opacity: 1;
        --duration: 1.2s;
        --delay: 1.4s;
        transform: translate(-10%, 0%) scale(0.9);
    }

    .rain:nth-of-type(9) {
        opacity: 1;
        --duration: 1.0s;
        --delay: 1.2s;
        transform: translate(20%, 25%) scale(0.9);
    }

    .rain:nth-of-type(10) {
        opacity: 1;
        --duration: 1.5s;
        --delay: 1.3s;
        transform: translate(-20%, 15%) scale(0.9);
    }

    .rain:nth-of-type(11) {
        opacity: 1;
        --duration: 1.3s;
        --delay: 1.1s;
        transform: translate(15%, 35%) scale(0.9);
    }

    .rain:nth-of-type(12) {
        opacity: 1;
        --duration: 1.1s;
        --delay: 1.1s;
        transform: translate(-15%, 5%) scale(0.9);
    }

    .rain:nth-of-type(13) {
        opacity: 1;
        --duration: 1.8s;
        --delay: 1.3s;
        transform: translate(5%, -5%) scale(0.9);
    }

    .rain:nth-of-type(14) {
        opacity: 1;
        --duration: 1.4s;
        --delay: 1.5s;
        transform: translate(-5%, -15%) scale(0.9);
    }

    .rain:nth-of-type(15) {
        opacity: 1;
        --duration: 1.6s;
        --delay: 1.2s;
        transform: translate(25%, 10%) scale(0.9);
    }


.waterDrop {
    width: 5px;
    height: 30px;
    position: absolute;
    background-color: lightblue;
    top: calc(50% - 100px);
    left: calc(50% - 1.5px);
    animation: RainFall;
    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}

.rainCircle {
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    border: 50px solid white;
    border-radius: 50%;
    animation-name: circleAnim;
    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    opacity: 0;
}

    .rainCircle:nth-child(2) {
        animation-timing-function: linear;
        animation-delay: calc(var(--delay) + 0.3s);
    }

.wind {
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}
    /*(length, height)*/
    .wind:nth-of-type(0) {
        opacity: 1;
        --duration: 11s;
        --delay: 6.2s;
        transform: translate(0%, -10%) scale(0.9) rotate(2deg);
    }

    .wind:nth-of-type(1) {
        opacity: 1;
        --duration: 11s;
        --delay: 7.1s;
        transform: translate(0%, -10%) scale(0.9) rotate(4deg);
    }

    .wind:nth-of-type(2) {
        opacity: 1;
        --duration: 11s;
        --delay: 7.3s;
        transform: translate(0%, 40%) scale(0.9) rotate(6deg);
    }

    .wind:nth-of-type(3) {
        opacity: 1;
        --duration: 11s;
        --delay: 6.2s;
        transform: translate(0%, 20%) scale(0.9) rotate(8deg);
    }

    .wind:nth-of-type(4) {
        opacity: 1;
        --duration: 11s;
        --delay: 6.8s;
        transform: translate(0%, 0%) scale(0.9) rotate(10deg);
    }

    .wind:nth-of-type(5) {
        opacity: 1;
        --duration: 11s;
        --delay: 6.0s;
        transform: translate(0%, -20%) scale(0.9) rotate(-2deg);
    }

    .wind:nth-of-type(6) {
        opacity: 1;
        --duration: 11s;
        --delay: 6.2s;
        transform: translate(0%, 10%) scale(0.9) rotate(-4deg);
    }

    .wind:nth-of-type(7) {
        opacity: 1;
        --duration: 11s;
        --delay: 7.4s;
        transform: translate(0%, 10%) scale(0.9) rotate(-6deg);
    }

    .wind:nth-of-type(8) {
        opacity: 1;
        --duration: 11s;
        --delay: 6.4s;
        transform: translate(0%, 0%) scale(0.9) rotate(-8deg);
    }

    .wind:nth-of-type(9) {
        opacity: 1;
        --duration: 11s;
        --delay: 7.2s;
        transform: translate(0%, 25%) scale(0.9) rotate(-10deg);
    }

    .wind:nth-of-type(10) {
        opacity: 1;
        --duration: 11s;
        --delay: 6.5s;
        transform: translate(0%, 15%) scale(0.9) rotate(0deg);
    }

.leaves {
    width: 25px;
    height: 15px;
    position: absolute;
    background: linear-gradient(to right, #77ed9e,#53ad71);
    top: calc(50% - 100px);
    left: calc(50% - 1.5px);
    border-radius: 85% 75% 0% 75%;
    animation: Windy;
    animation-duration: var(--duration);
    animation-delay: var(--delay);
    animation-timing-function: ease-in;
    animation-iteration-count: infinite;
    filter: blur(2px);
    animation-fill-mode: backwards;
    box-shadow: 4px 5px 10px -5px #3a5d46, 100px -50px 8px -8px #77ed9e, 100px -50px 0 -5px #058026, -70px 33px 8px -5px #77ed9e, -70px 33px 0px -7px #058026, 70px 33px 0px -7px #77ed9e;
}


.image-sequence {
    position: absolute;
    width: 100%;
    height: 100%;
}

    .image-sequence img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        animation-fill-mode: forwards;
    }


@keyframes fadeInOut1 {
    0%, 19% {
        opacity: 0;
    }

    20%, 40% {
        opacity: 1;
    }

    41%, 100% {
        opacity: 0;
    }
}

@keyframes fadeInOut2 {
    0%, 39% {
        opacity: 0;
    }

    40%, 60% {
        opacity: 1;
    }

    61%, 100% {
        opacity: 0;
    }
}

@keyframes fadeInOut3 {
    0%, 59% {
        opacity: 0;
    }

    60%, 80% {
        opacity: 1;
    }

    81%, 100% {
        opacity: 0;
    }
}

@keyframes fadeInOut4 {
    0%, 79% {
        opacity: 0;
    }

    80%, 99% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


@keyframes Windy {
    0% {
        transform: translate(-50vw, 30vh) rotate(0deg);
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    40% {
        opacity: 1;
    }

    50% {
        transform: translate(50vw, -10vh) rotate(180deg);
        opacity: 1;
    }

    51% {
        opacity: 0;
    }

    100% {
        transform: translateX(-50vh, 30vh) rotate(0deg);
        opacity: 0;
    }
}
/*rain fall animation*/
@keyframes RainFall {
    0% {
        transform: translateY(-105vh);
        opacity: 0;
    }

    1% {
        opacity: 1;
    }

    40% {
        transform: translateY(200%);
        opacity: 1;
    }

    41% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}



@keyframes circleAnim {

    0% {
        transform: scale(0);
        opacity: 1;
    }

    40% {
        transform: scale(0);
        opacity: 1;
    }

    100% {
        transform: scale(0.03);
        opacity: 1;
    }
}