@charset "UTF-8";

/* Typical Device Breakpoints
------------------------------
Pequenas telas: até 600px
Celular: de 600px até 768px
Tablet: 768px até 992px
Desktop: 992px até 1200px
Grandes telas: acima de 1200px
*/

:root {
    --verde: #49a09d;
    --lilas: #5f2c82;
}

@media screen and (min-width: 768px) and (max-width: 992px) /*tablets*/ {
   
    body{
        background-image: linear-gradient(to top, var(--verde), var(--lilas));
    }
    
    section#login{
        width: 80vw;
        height: 280px;
    }

    div#imagem{
        float: left;
        width: 30%;
        height: 100%;
    }

    div#formulario{
        float: right;
        width: 70%;
    }
}

@media screen and (min-width: 992px) /*telas maiores*/ {
    
    body{
        background-image: linear-gradient(to top, var(--verde), var(--lilas) );
    }
    
    section#login{
            width: 950px;
            height: 350px;
        }

        div#imagem{
            float: right;
            width: 50%;
            height: 100%;
        }

        div#formulario{
            float: left;
            width: 50%;
        }

        div#formulario > h1{
            font-size: 2em;
        }

        div#formulario > p{
            font-size: 1em;
            margin: 20px 0px;
        }
}