@charset "UTF-8";

/*
   Paletas de cores 
   Azul claro: #E5F6FD
   lilás: #8785DC
   Azul escuro: #102E6E

*/

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

}

body, html {
   background-color: #E0C8F0;
   height: 100vh;
   width: 100vw;

}

main {
   height: 100vh;
   width: 100vw;

}
main.container {
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
  

}

section#login {
   background-color: #dfc0f7c4;
   width: 300px;
   height: 600px;
   border-radius: 10px;
   box-shadow: 0px 0px 10px #00000071;

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

section#login > div#imagem-fundo {
   display: block;
   background:  #0A3D6C url(../imagens/pexels-mitchel3.jpg) no-repeat;
   background-size: cover;
   background-position: bottom right;
   height: 327px;


}

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


}

div#formulario > h1 {
   text-align: center;
   

}

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

}

form > div.campo {
   background-color: white;
   border: 2px solid #F0E2E1;
   display: block;
   width: 100%;
   height: 41px;
   border-radius: 8px;
   margin: 5px 0px;

}

div.campo > label {
   display: none;

}

div.campo > span {
   color: rgb(53, 77, 7);
   font-size: 2em;
   width: 40px;
   padding: 5px;


}

div.campo > input {
   background-color:  rgb(3, 3, 63);
   border: 2px solid #F0E2E1;
   font-size: 1em;
   height: 33px;
   border: 0px;
   border-radius: 8px;
   padding: 4px;
  
   transform: translateY(-11px);
   width: calc(100% - 45px);


}

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


}


form > input[type=submit] {
   display: block;
   font-size: 1.1em;
   width: 100%;
   height: 35px;
   background-color:white;
   color: rgb(3, 3, 63);
   border-radius: 8px;
   cursor: pointer;
  
   
}

form > input[type=submit]:hover {
   background-color: rgb(3, 3, 63);
   color: white;

}

form >  a.botao {
   display: block;
   text-align: center;
   font-size: 1.1em;
   width: 100%;
   height: 30px;
   background-color:#DEC4F3;
   color:  rgb(8, 43, 8);
   border-radius: 5px;
   border: 1px solid rgb(4, 4, 31);
   cursor: pointer;
   margin-top: 4px;
    
}

form > a.botao:hover {
   background-color: white;
   color: rgb(3, 3, 63);
   

}

form > a.botao > i {
   font-size: 1em;

}