@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap'); /* Importa a fonte 'Itim' do Google Fonts */

*{
    margin: 0; /* Remove a margem padrão */
    padding: 0; /* Remove o preenchimento padrão */
    box-sizing: border-box; /* Define o box model para incluir bordas e padding no cálculo de largura e altura */
}

body{
    background-color: #4C3111; /* Define a cor de fundo do corpo */
}

.fundo_tela{
    display: flex; /* Usa Flexbox para alinhamento */
    flex-direction: row; /* Alinha os itens em linha */
    gap: 200px; /* Define o espaçamento entre os itens */
    align-items: center; /* Centraliza os itens verticalmente */
    position: absolute; /* Posiciona o elemento de forma absoluta */
    top: 50%; /* Centraliza verticalmente */
    left: 50%; /* Centraliza horizontalmente */
    transform: translate(-50%,-50%); /* Ajusta o elemento para garantir que ele fique bem no centro da tela */
}

.tela_principal{
    display: flex; /* Usa Flexbox para layout */
    flex-direction: column; /* Alinha os itens na direção da coluna */
    text-align: center; /* Centraliza o texto */
    background-color: white; /* Define o fundo como branco */
    align-items: center; /* Centraliza os itens dentro do painel */
    width: 350px; /* Define a largura do painel */
    height: 570px; /* Define a altura do painel */
    border-radius: 25px; /* Aplica bordas arredondadas */
}

.fundo_tela h1{
    font-size: 30px; /* Define o tamanho da fonte */
    padding: 5%; /* Adiciona espaçamento interno */
    border-bottom: solid 2px black; /* Adiciona uma borda inferior */
    width: 100%; /* Faz o título ocupar toda a largura do painel */
    font-family: "Itim"; /* Aplica a fonte 'Itim' */
}

input{
    margin-right: 180px; /* Define a margem à direita do input */
    padding: 10px; /* Adiciona preenchimento dentro do input */
    background-color: black; /* Define o fundo do input como preto */
    color: white; /* Define a cor do texto como branco */
    border: none; /* Remove a borda padrão */
    width: 170px; /* Define a largura do input */
    height: 30px; /* Define a altura do input */
    outline: none; /* Remove o contorno ao focar no input */
    font-family: Inter; /* Aplica a fonte 'Inter' */
}

input::placeholder{
    color: white; /* Define a cor do texto de sugestão como branco */
}

.input_email{
    margin-top: 14%; /* Adiciona uma margem superior*/
}

.input_senha{
    margin-top: 9% /* Adiciona uma margem superior*/
}

.linha_email{
    border-top: solid 2px black; /* Cria uma linha superior de 2px de largura e cor preta */
    margin-top: -25px; /* Ajusta a posição da linha para cima */
}

.tela_caixa_piano{
    margin-right: 180px; /* Define a margem à direita */
    margin-top: 14%; /* Define a margem superior */
    background-color: black; /* Define o fundo como preto */
    width: 170px; /* Define a largura do painel */
    height: 30px; /* Define a altura do painel */
    position: relative; /* Permite o posicionamento relativo de elementos dentro do painel */
}

.linha_piano{
    border-top: solid 2px black; /* Cria uma linha superior de 2px de largura e cor preta */
    margin-top: -25px; /* Ajusta a posição da linha para cima */
}

.linha_div{
    border-bottom: solid 2px black; /* Cria uma linha inferior de 2px de largura e cor preta */
    margin-top: 15%; /* Adiciona uma margem superior de 15% */
    width: 100%; /* A linha ocupa toda a largura do elemento */
}

.linha_senha{
    border-bottom: solid 2px black; /* Cria uma linha inferior de 2px de largura e cor preta */
    margin-top: -6px; /* Ajusta a posição da linha para cima */
}

.botao_logar{
    position: relative; /* Permite o posicionamento relativo do botão */
    float: inline-end; /* Posiciona o botão à direita do elemento pai */
    width: 350px; /* Define a largura do botão */
    height: 55px; /* Define a altura do botão */
    margin-top: 56px; /* Adiciona uma margem superior de 56px */
    border-radius: 0px 0px 25px 25px; /* Aplica bordas arredondadas na parte inferior */
    padding-left: 150px; /* Adiciona preenchimento à esquerda para centralizar o texto */
    font-family: "Inter"; /* Aplica a fonte 'Inter' */
    font-size: 15px; /* Define o tamanho da fonte */
    border: none; /* Remove a borda do botão */
}

.botao_logar:hover{
    background-color: rgb(182, 180, 180); /* Altera a cor de fundo quando o mouse passa sobre o botão */
}