@charset "UTF-8";

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

/* As demais Medias Queries */

/*Tablets e Ipads e Desktops */
@media screen and (min-width: 1080px) and (max-width:1400px) {
    html,body{
       background-image: linear-gradient(to top,#49a09d, #5f2c82);
    }
    
    section#login{
        width:80vw;
        height: 330px;
    }
    section#login > #imagem{
        float: left;
        width:30%;
        height:100% ;
    }

    section#login > #formulario{
        float: right;
        width:70%;
    }

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

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


    
    div.campo >span {
    color:white;
    font-size: 2em;
    width: 40px;
    
}
    
    div.campo >input {
        width: 92%;
        height: 45px;
        transform: translateY(-8px);
        border:none;
        border-radius: 7px;
        
    }


}


/* telas grandes*/
@media screen and (min-width:1400px) {
    html,body{
        background-image: linear-gradient(to top,#49a09d, #5f2c82);
     }

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

    section#login > div#formulario{
        float:left;
        width:50%;
    }
    #formulario > h1{
        font-size: 2em;
    }
    #formulario > p {
        font-size: 1.2em;
        margin: 20px 0px;
    }

    div.campo >span {
        color:white;
        font-size: 2em;
        width: 40px;
        
    }
        
        div.campo >input {
            width: 90%;
            height: 45px;
            transform: translateY(-8px);
            border:none;
            border-radius: 7px;
        }
}