@charset "UTF-8";

/*
    Paleta de cores
    Verde: #49a09d
    Lilás: #5f2c82
    Branco 
    Preto
 */

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

 *{
    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;
 }

 body, html{
    background-color: #5f2c82;
    height: 100vh;
    width: 100vw;
 }

 main{
    position: relative;
    height: 100vh;
    width: 100vw;
 }

 section#login{
    background-color: white;
    width: 250px;
    height: 500px;
    border-radius: 20px;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.437);

    transition: width 1s, height 1s;
    transition-timing-function: ease;
 }

 section#login > div#imagem{
    display: block;
    background: #5f2c82 url('../imagens/pexels-padrao-1.jpg') no-repeat;
    background-size: cover;
    background-position: left bottom;
    height: 200px;
 }

 section#login > div#formulario{
    display: block;
    padding: 10px;
 }

 div#formulario > h1{
   text-align: center;
   margin-bottom: 10px;
 }

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


 /* Aula 05 */
 form > div.campo{
   background-color: #5f2c82;
   border: 3px solid #5f2c82;
   display: block;
   width: 100%;
   height: 40px;
   border-radius: 5px;
   margin: 5px 0px; /* significa que vai ter uma margem de 5px em cima e em baixo e dos lados não vai ter*/
 }

 div.campo > label{
   display: none;

 }

 div.campo > span{
   color: white;
   /* background-color: black; */
   font-size: 2em;
   width: 40px;
   padding: 5px;

 }

 div.campo > input{
   background-color: #57c4c0;
   font-size: 1em;
   width: calc(100% - 45px);
   height: 100%;
   border: 0px;
   border-radius: 5px;
   padding: 4px;
   transform: translateY(-12px);
 }

 div.campo > input:focus-within{
   background-color: white;
 }

 form > input[type=submit]{
   display: block;
   font-size: 1em;
   width: 100%;
   height: 40px;
   background-color: #49a09d;
   color: white;
   border: none;
   border-radius: 5px;
   cursor: pointer;
 }

 form > input[type=submit]:hover{
   background-color: #2c6d6b;
 }

 form > a.botao{
   display: block;
   text-align: center;
   background-color: white;
   color: #59c7c3;
   width: 100%;
   height: 40px;
   padding-top: 7px;
   margin-top: 5px;
   text-decoration: none;
   border: 1px solid #49a09d;
   border-radius: 5px;
 }

 form > a.botao:hover{
   background-color: #59c7c3;
   color: white;
 }

 form > a.botao > span{
   font-size: 0.8em;
 }