*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    animation: espera 10s alternate-reverse infinite;
}
section{
    position: relative;
    width: 100%;
    height: 100vh;
    background: url(../img/fundo.png);
    background-size: cover;
    animation: animate 3s linear infinite;
    
}
section:before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../img/chuva.png);
    animation: chuva 0.4s linear infinite;
}

@keyframes espera{
    from{
        filter: brightness(1) opacity(10);
    }
    to{
        filter: brightness(0.60) opacity(0.90);
    }
}


@keyframes chuva{
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: 40% 100%;
    }
}

@keyframes animate{
    0%{
        filter: hue-rotate(0deg);
    }
    100%{
        filter: hue-rotate(360deg)
    }
}