@charset "UTF-8";

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


/* Tablet */

:root{
    --verde: #49a09d ;
    --lilas: #5f2c82 ;
}
@media screen and (min-width: 768px) and (max-width:992px){
    #viewport{
        background-image: linear-gradient(360deg, #49a09d, #5f2c82);
     
    }
       
    section#tela {
       
        max-width: 80vw;
        width: 80vw;
        height: 70vh;

        display:flex;
        align-items: center;
        flex-direction: row;
        justify-content: center;
    }
    #imagem{
        height: 100%;
        width: 30%;
        }
    #formulario{
                
        height: 100%;        
        width: 70%;
        padding: 60px;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #botoes{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-top: 50px;
    }
    .entrar,.botao-esqueci-senha{
        margin: 0px;
    }

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

    #viewport{
        background-image: linear-gradient(360deg, #49a09d, #5f2c82);
     
    }

    #tela {
       
        max-width: 950px;
        width: 950px;
        height: 80vh;

        display:flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: center;
    }
    #imagem{
        
        height: 100%;
        width: 50%;
    }


    #formulario{
                
        height: 100%;        
        width: 50%;
        padding: 60px;
        
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    #botoes{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: 50px;
    }
    .entrar, .botao-esqueci-senha{
        max-width: 170px;
        margin: 0px;
    }
    
}