@charset "UTF-8";

/* versão para tablets - telas entre 768 e 992px */
@media screen and (min-width: 768px) and (max-width: 992px) {
    
    html, body {
        background: var(--roxo) url('../img/background.png') center center / cover no-repeat fixed;
    }
    
    section#login {
        width: 75vw;
        height: 28vh;
    }

    section#login > div#imagem {
        float: left; /* como estamos com display block nessa div, é possível posicioná-la com float: ladoDesejado*/
        width: 35%; /* também é necessário definir a largura e altura dela*/
        height: 100%;
    }

    section#login > div#formulario {
        float: right; /* como estamos com display block nessa div, é possível posicioná-la com float: ladoDesejado*/
        width: 65%; /* completando o restante da largura da div pai*/
    }
}

/* versão para telas grandes - telas a partir de 992 de largura */
@media screen and (min-width: 992px) {
    html, body {
        background: var(--roxo) url('../img/background.png') center center / cover no-repeat fixed;
    }

    section#login {
        width: 800px;
        height: 275px;
    }

    section#login > div#imagem {
        float: right; /* alterando a imagem para o outro lado */
        width: 40%;
        height: 100%;
    }

    section#login > div#formulario {
        float: left;
        width: 60%;
    }

    section#login > div#formulario > h1 {
        font-size: 2.2em;
    }

    section#login > div#formulario > p {
        font-size: 1.2em;
        line-height: 1.5em;
    }
}