@charset "utf-8";

/* todas as outras mídias */
/* Typical Device Breakpoints
Pequenas telas: 600px pra baixo
Celular: 600px pra cima
Tablet: 768px pra cima
Desktop: 992px pra cima
Grandes telas: maiores que 1200px
*/

:root{
    --cor0: #49a09d;
    --cor1: #532c6d;
}

/* configuração para tablet */
@media screen and (min-width: 768px) and (max-width: 992px){
    body{
        background-image: linear-gradient(var(--cor1) , var(--cor0));
    }
    section#login{
        width: 85vw;
        height: 400px;
    }
    section#login>div#imagem{
        background-size: cover;
        float:left;
        width: 35%;
        height: 100%;
        
    }
    section#login>div#formulario{
        float:right;
        width: 65%;
    }
}

/* configuração para desktop e telas grandes */
@media screen and (min-width: 992px){
    body{
        background-image: linear-gradient(var(--cor1) , var(--cor0));
    }
    section#login{
        width: 950px;
        height: 450px;
    }
    section#login>div#imagem{
        float:right;
        width: 50%;
        height: 100%;
    }
    section#login>div#formulario{
        float:left;
        width: 50%;
    }
    #formulario>p{
    font-size: 1em;
    margin: 20px 20px;
    }
}