@charset "UTF-8";

/*

  preto forte= #111111
  madeira escuro= #887a4f
  madeira claro= #D3C188
  preto claro= #333333
  branco

*/

*{
    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:#887a4f ;
    height: 100vh;
    width: 100vw;
}

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

#login{
    background-color: white;
    width: 250px;
    height: 515px;
    border-radius: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    

    overflow: hidden; /*Controla o que acontece quando o conteúdo "transborda" da caixa do elemento. 
    Valores mais comuns
    [visible]:
       O conteúdo que excede as dimensões do elemento é exibido, mesmo que ultrapasse as bordas. Este é o valor padrão. 
    [hidden]:
       O conteúdo excedente é ocultado, como se fosse cortado. Não há barras de rolagem. 
    [scroll]:
       Adiciona barras de rolagem (vertical e/ou horizontal) para que o usuário possa visualizar todo o conteúdo, mesmo que ele não esteja todo visível inicialmente. 
    [auto]:
       Semelhante a scroll, mas as barras de rolagem são adicionadas apenas quando necessário, ou seja, quando o conteúdo excede as dimensões do elemento. 
    */

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.452);
    display: block;

    transition: width 0.32s, height 0.32s;
    transition-timing-function: ease;
    transform: translate(-50%, -50%);
}

#imagem{
    background:#C2B078 url(../imagem\ de\ tela.jpg) center center;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
}

#formulario{
    padding: 10px;
    display: block;
}

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

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

form > .campo{
    background-color: rgb(250, 250, 217);
    width: 100%;
    height: 40px;
    border-radius: 5px;
    margin: 5px 0px;
    border: 1px solid black;

}

form label{
    display: none;
}

.campo i{
    color: black;
    font-size: 2em;
    width: 40px;
    padding: 5px;
}

.campo input{
    background-color: white;
    font-size: 1em;

    width: calc(100% - 24%); /*Width + calc(): É uma calculadora no CSS. Você usa para fazer contas direto no tamanho dos elementos, como "pegar 100% do espaço e subtrair 50 pixels". Ideal para layouts que precisam se adaptar a diferentes telas.*/

    height: 100%;
    border: 0px;
    padding: 5px;
    border: 2px solid black;
    transform: translateY(-12.2px); /*Transform: É um efeito que modifica um elemento visualmente sem atrapalhar os outros ao redor. Com ele você pode: mover (translate), girar (rotate), aumentar/diminuir (scale) ou inclinar (skew) qualquer coisa na página de forma suave e sem quebrar o layout.
    Seus valores:
    Primeiro valor: eixo X (horizontal → positivo = direita, negativo = esquerda)
    Segundo valor: eixo Y (vertical → positivo = baixo, negativo = cima)
    Terceiro valor: eixo Z (profundidade → positivo = para frente, negativo = para trás)
    Valores Aceitos
    [Pixels]: translate(20px, 30px)
    [Porcentagem]: translate(50%, -25%) → % do próprio elemento
    [Unidades relativas]: rem, em, vh, vw
    [Valores negativos]: Movem na direção oposta
    [Decimal]: translate(2.5px, 3.1px)
    */
    /*OBS: SEMPRE QUE VC TIVER UMA TRANSFORMAÇÃO OU ANIMAÇÃO PARA FAZER ELA SEMPRE DEVE FICAR AO FINAL DO SELETOR DA MESMA!! */
}

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

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

form > a.botao{
    display: block;
    text-align: center;
    font-size: 1em;
    padding-top: 7px;
    width: 100%;
    height: 40px;
    margin-top: 5px;
    background-color: bisque;
    border: 1px solid black;
    text-decoration: none;
    color: black;
    font-weight: bolder;
}

form > a.botao:hover{
    background-image: linear-gradient(to right,#ffee56a4,#f54bf5a4);
}