@charset "UTF-8";

:root{
    --cor1: #124559;
    --cor2: #518EA6;
    --cor3: #93B3BF;
    --cor4: #D9D4D2;
}

@media (min-width:768px){
    html, body{
        background-image: linear-gradient(
            to top,
            var(--cor2),
            var(--cor1)
        );
        background-attachment: fixed;
    }

    section.login-container{
        box-shadow: 0 0 25px #6abada;
    }
}

@media (min-width:992px){
    body{
        background: var(--cor2) url(../imagens/login-imagem.png) center no-repeat;
        background-size: cover;
    }

    section.login-container{
        background-color: #93b3bf27;
        background: transparent;
        backdrop-filter: blur(5px);

        border-top: 1px solid rgba(255, 255, 255, 0.4);
        border-left: 1px solid rgba(255, 255, 255, 0.4);

        box-shadow: 3px 3px 3px #4d4b4a32;
    }

    div#imagem-container{
        display: none;
    }

    div.campos{
        background-color: var(--cor2);
        box-shadow: 0 0 25px #0000007a;
    }

    span{
        color: var(--cor1);
    }

    button.btn-login{
        background-color: var(--cor2);
        color: var(--cor1);
        box-shadow: 0 0 25px #0000007a;
    }

    .btn-login:hover{
        background-color: var(--cor1);
    }
}