@charset "UTF-8";

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

@media screen and (min-width: 768px) and (max-width: 992px){
    
    body{
        background-image: linear-gradient(to top,#B28F6E, #f8e99b, #CFB20B)
    }

    section#login{
        width: 90vw;
        height: 350px;
    }



    section#login > div#imagem{
        float: left;
        width: 30%;
        height: 100%;
        margin-right: 4px;
    }

    section#login > div#formulário {
        float: right;
        width: 70%;
    }
    form > input[type=submit]{
        display:inline-block;
        width: 70%;

    }
    form > a.botao{
        display: inline-block;
        width: 70%;
    }

    form > div.campo{
        display: inline-block;
        width: 70%;
    }
}

@media screen and (min-width: 992px) {

    body{
        background-image: linear-gradient(to top,#B28F6E, #f8e99b, #CFB20B)
    }

    section#login{
    width: 950px;
    height: 420px;
    float: left;
    }

    section#login > div#imagem{
        float: right;
        width: 50%;
        height: 100%;

    }

    div#formulario > p{
        font-size: 1.2em;
    }

    form > input[type=submit]{
        display: inline-block;
        width: 48%;
    }

    form > a.botao{
        display: inline-block;
        width: 48%;
    }

    form > div.campo{
        display: inline-block;
        width: 48%;
    }
}