@charset "UTF-8";

/** 
    Paleta de cores
    Roxo: #9330C8
    Azul: #192AE5
*/

/* variáveis css */
:root {
    --roxo: #8a10cc;
    --laranja: #F59100;
}

* {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
    /* deixa a borda contar como parte da largura */
}

body,
html {
    background-image: linear-gradient(to bottom, var(--roxo), var(--roxo), white);
    height: 100vh;
    width: 100vw;
}

main {
    position: relative; /* passos para centralizar a div filha dentro de outra div (section#login) - passo 1*/
    height: 100vh;
    width: 100vw;
}

/* alterando configs da parte de login da section apenas*/
section#login {
    position: absolute; /* passos para centralizar a div filha dentro de outra div (section#login) - passo 2*/
    top: 50%; /* passos para centralizar a div filha dentro de outra div (section#login) - passo 3*/
    left: 50%; /* passos para centralizar a div filha dentro de outra div (section#login) - passo 4*/
    background-color: white; 
    width: 250px;
    height: 510px;
    border-radius: 15px;
    overflow: hidden; /* tudo que estiver fora do conteúdo dessa div (ou seja, vazar), será escondido e não aparecerá*/
    box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.514);
    transition: width 0.5s, height 0.5s; /* adicionando uma transição em toda a section de largura e altura. Ou seja, quando houver a mudança de altura ou largura, terá um transição de 0.5s*/
    transition-timing-function: ease; /* deixa mais fluida a transição*/
    transform: translate(-50%, -50%); /* passos para centralizar a div filha dentro de outra div (section#login) - passo 5*/
}

/* alterando as configs apenas da div que contém a imagem*/
section#login > div#imagem { /* adicionando a imagem de fundo, considerando que irá ocupar todo o espaço */
    background: var(--roxo) url('../img/pintura.jpg') left bottom / cover no-repeat fixed;
    height: 200px;
    display: block;
}

/* configurando apenas a segunda parte, que contém o h1, p e form*/
section#login > div#formulario {
    display: block;
    padding: 8px;
}

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

section#login > div#formulario > p {
    text-align: justify;
    line-height: 1.3em;
}

/* configs das divs que possuem a class campo e que contém dois inputs*/
 form > div.campo {
    display: block;
    width: 100%;
    height: 36px;
    background-color: var(--laranja);
    color: white;
    border-radius: 5px;
    margin: 3px auto;
    overflow: hidden;
}

form > div.campo > label {
    display: none; /* tirar os labels que estavam aparecendo*/
}

/* formatando o icon dentro do form*/
form > div.campo > i {
    font-size: 1.5em; /* aumentando o tamanho do icon */
    width: 30px;
    padding: 5px;
}

/* configs dos inputs dentro das divs que tem a class campo */
form > div.campo > input {
    background-color: #ca79f5;
    width: calc(100% - 34px); /* calculando uma largura específica com a função cal()*/
    height: 100%;
    border: 1px solid #eba845;
    border-radius: 8px;
    padding: 5px; 
    transform: translateY(-7px); /* aplicando um transform do tipo translate para subir o elemento, fazendo sua altura igualar a da div pai */
}

/* quando o campo estiver focado, ou seja, selecionado */
form > div.campo > input:focus-within {
    background-color: white;
}

/* formando apenas inputs que tem o type de submit */
form > input[type=submit] {
    display: block;
    font-size: 1em;
    width: 100%; /* faz o input ocupar 100% da classe pai(container) em que está incluído */
    height: 35px;
    background-color: var(--roxo);
    color: white;
    border: none; /* tirando a borda */
    border-radius: 5px;
    cursor: pointer;
}

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

/* configs do link dentro do form que tem a class botao*/
form > a.botao {
    display: block;
    text-align: center;
    text-decoration: none;
    font-size: 1em;
    width: 100%; /* faz o input ocupar 100% da classe pai(container) em que está incluído */
    height: 35px;
    margin-top: 3px;
    background-color: #ad1cfc;
    color: white;
    border: 1px solid var(--roxo);
    border-radius: 5px;
    cursor: pointer;
}

form > a.botao:hover {
    background-color: #5a0f83;
}

/* configs do icone dentro do <a> apenas*/
form > a.botao > i {
    color: #390953;
}