@charset "UF-8";

/* PALETA DE CORES
   verde: #49a09d
   lilas: #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;

}

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

}

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

section#login {
   position: absolute;
   top: 50%;
   left: 45%;
   overflow: hidden;
   background-color: white;
   width: 260px;
   height: 530px;
   border-radius: 20px;
   box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.450);
   transition: width .3s, height .3s;
   transition-timing-function: ease;
   transform: translate(-50%, -50%);
}

section#login > div#imagem {
   display: block;
   background: #5f2c82 url(../../resources/imagens/Frente_escola.jpg) no-repeat;
   height: 200px;
   background-size: cover;
}

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

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

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

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

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: #45ddd8;
   font-size: 1em;
   width: calc(100% - 45px);
   height: 100%;
   border: 0px;
   border-radius: 8px;
   padding: 6px;
   transform: translatey(-13px);
}

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

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

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

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

form > a.botao:hover {
   background-color: #45ddd8;
}

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