@charset "UTF-8"; 

:root { 
 
    --color1 : #4f81e3 ;
    --color2 : #6b99ea ;
    --color3 : #86b2f1 ;
    --color4 : #a2caf8 ;
    --color5 : #bde2ff ;
    --color6 : #b9c8db;
    --color7 : #49a09d;
    --color8 : #5f2c82;
}

* { 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;

}
/*Configuraçoes body e Html*/
body , html { 
    background-color: var(--color6);
    height: 100vh;
    width: 100vw;
    background-image: linear-gradient(to top,#5f2c82, #49a09d);
    
}
/*Configuraçoes main*/
main { 
    position: relative;
    height: 100vh;
    width: 100vw;
    text-align: center;
}
/*Configuraçoes class login */
section#login { 
    background-color: #e0e9f088;
    width: 250px;
    height: 500px;
    border-radius: 20px;

    position: absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    overflow: hidden;

    transition: width 0.3s , heigth 0.3s ;
    transition-timing-function: ease;
}
section#login >div#imagem { 
    display: block;
    background: var(--color3)  url(../imagens/pexels-jack-gittoes-1274850.jpg)no-repeat;
    height: 250px;
    background-size: cover;
    background-position: cover;
}
section#login >div#formulario { 
    padding: 10px;
    display: block;
    
}
/*Configuraçoes class formularios*/
div#formulario>h1 { 
    text-align: center;
    margin-bottom: 10px;
    
}
div#formulario>p { 
    font-size: 0.8em;
}
form >div.campo { 
    height: 40px;
    border-radius: 15px;
    display: block;
   
    
}
/*Configuraçoes de input*/
form >input[type=submit]{
    display: block;
    font: 0.5em;
    width: 100%;
    height: 30px;
    background-color: #49a09d;
    border-radius: 5px;
    border: none;
    color: white;
    margin: 3px 0px;
}
form>input[type=submit]:hover { 
    background-color: #602c82a0;
    
}
form>input[type=button] { 
    display: block;
    font: 0.5em;
    width: 100%;
    height: 30px;
    background-color: #49a09d;
    border-radius: 5px;
    border: none;
    color: white;
}
form>input[type=button]:hover{ 
    background-color: #602c82a0;   
}