@charset "UTF-8";

/* Typical Device Breakpoints
------------------------------
Extra Small (Phones): até 576px 
Small (Larger Phones/Small Tablets): de 576px até 768px 
Medium (Tablets): de 768px até 992px 
Large (Laptops/Small Desktops): de 992px até 1200px 
Extra Large (Desktops/TVs): acima de 1200px 
*/

@media screen and (min-width: 768px) and (max-width: 992px){ /* CONFIGURAÇÃO PARA TABLET */
    body {
        background-image: linear-gradient(to top, #49a09d, #5f2c82);
    }
    #login {
        display: flex !important;
        flex-direction: row;
        width: 80vw;
        max-width: 750px;
        height: 450px;
    }
    #imagem {
        display: block;
        width: 40%;
        height: 100%;
    }
    #formulario {
        width: 60%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

@media screen and (min-width:992px){ /* CONFIGURAÇÃO PARA DESKTOP */
    body {
        background-image: linear-gradient(to top, #49a09d, #5f2c82);
    }
    #login {
        display: flex !important;
        flex-direction: row-reverse;
        max-width: 950px;
        height: 500px;
    }
    #imagem {
        width: 50%;
        height: 100%;
    }
    #formulario {
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
    }
    h1 {
        font-size: 2em;
    }
    p {
        font-size: 1.2em;
        margin: 10px 0px;
    }
    .campo-senha {
        margin-bottom: 100px;
    }
}