@charset "UTF-8";

@media all {
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        
        font-family: Arial, Helvetica, sans-serif
    }
    
    body{
        background-color: #5f2c82;
    }
    
    div#area{
        width: 300px;
        height: 500px;
        margin: auto;
        
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        
        transition: width 0.3s, heigth 0.3s;
        transition-timing-function: ease;
    
        border-radius: 30px;
        background-color: white;
        box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.315);
    }
    
    section#imagem{
        height: 25%;
        border-radius: 30px 30px 0 0;
        background-image: url("../imagem/metal.jpg");
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    section#login{
        height: 65%;
    }
    
    h1{
        text-align: center;
        padding: 10px 20px;
    }
    
    p#texto{
        padding: 0 15px;
    }
    
    
    p.p-dados-login{
        width: 90%;
        margin: 10px auto;
        padding: 5px 5px 5px 10px;
    
        display: flex;
        justify-content: space-evenly;
        align-items: center;
    
        border-radius: 10px;
        background-color: #5F2C82;
    }
    
    input.dados-login { 
        width: 100%;
        padding: 10px;
    
        border-radius: 8px;
        border: none;
        background-color: #94CFCD
    }
    
    input.dados-login:focus { background-color: white; }
    
    .bt-login:active{ background-color: #94CFCD; }
    
    input.bt-login{ 
        width: 90%; 
        background-color: #94CFCD; 
    }
    
    #entrar{
        color: white;
        height: 40px;
        background-color: #56a4a2;
    }
    
    #entrar:hover{
        background-color: #94CFCD;
    }
    
    #entrar:active { background-color: #56a4a2; }
    
    p.botoes{
        text-align: center;
        margin: 0 auto 10px auto;
    }
    
    a{
        color: #2D6462;
        text-align: center;
        text-decoration: none;
        display: block;
    }
    
    #esqueci-senha{
        width: 90%;
        margin: auto;
        padding: 10px;
        border-radius: 8px;
        border: 1px solid rgb(144, 141, 141);
        background-color: white; 
    }
    
    #esqueci-senha:hover{
        background-color: #94CFCD;
    }
    
    #esqueci-senha:active{
        background-color: rgba(128, 128, 128, 0.381);
    }
    
    a:hover{
        background-color: aqua;
    }
    
    .material-symbols-outlined { 
        color: white;
        margin: auto;
        padding-right: 5px;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
     }
}