/* Estilos básicos */
body {
    font-family: Arial, sans-serif; /* Define a fonte principal da página como Arial */
    background-color: #f4f4f4; /* Cor de fundo suave para a página */
    display: flex; /* Usa o Flexbox para a disposição do conteúdo */
    justify-content: center; /* Centraliza o conteúdo horizontalmente */
    align-items: center; /* Centraliza o conteúdo verticalmente */
    height: 100vh; /* Define a altura da tela como 100% da altura da janela */
    margin: 0; /* Remove as margens padrão do body */
}

/* Estilo para o container de login */
.login-container {
    background-color: white; /* Cor de fundo branca para o container de login */
    padding: 20px; /* Adiciona 20px de espaçamento interno em todos os lados */
    border-radius: 10px; /* Bordas arredondadas de 10px para o container */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1); /* Sombra suave ao redor do container */
    width: 100%; /* O container ocupará 100% da largura disponível */
    max-width: 350px; /* Limita a largura máxima do container a 350px */
    text-align: center; /* Centraliza o texto dentro do container */
    display: flex; /* Usa o Flexbox para organizar os elementos internos */
    flex-direction: column; /* Organiza os itens em uma coluna (verticalmente) */
    justify-content: center; /* Centraliza os elementos verticalmente dentro do container */
    align-items: center; /* Centraliza os elementos horizontalmente dentro do container */
}

/* Logo no topo */
.logo img {
    width: 80px; /* Define a largura da imagem do logo para 80px */
    margin-bottom: 20px; /* Adiciona 20px de espaço abaixo da logo */
}

/* Estilos para os inputs (campos de email e senha) */
input {
    width: 100%; /* Faz com que o campo de input ocupe toda a largura disponível */
    padding: 12px; /* Adiciona 12px de padding no campo, tornando-o mais alto */
    margin: 10px 0; /* Adiciona 10px de espaçamento acima e embaixo de cada campo */
    border: 1px solid #ccc; /* Adiciona uma borda cinza clara ao redor do campo */
    border-radius: 5px; /* Adiciona bordas arredondadas de 5px */
    font-size: 16px; /* Define o tamanho da fonte dentro do campo como 16px */
    box-sizing: border-box; /* Faz o padding ser incluído no tamanho total do elemento */
}

/* Estilo para o botão de login */
button {
    width: 100%; /* O botão ocupará toda a largura disponível */
    padding: 12px; /* Adiciona 12px de padding no botão para torná-lo maior */
    background-color: #2a56fc; /* Define o fundo do botão como verde */
    color: white; /* Define a cor do texto do botão como branca */
    border: none; /* Remove a borda padrão do botão */
    border-radius: 5px; /* Adiciona bordas arredondadas ao botão */
    font-size: 16px; /* Define o tamanho da fonte do botão como 16px */
    cursor: pointer; /* Muda o cursor para "mãozinha" quando passar sobre o botão */
    box-sizing: border-box; /* Faz o padding ser incluído no tamanho total do botão */
    margin-top: 20px; /* Aumenta o espaço acima do botão */
}

/* Efeito hover para o botão (quando o mouse passa sobre o botão) */
button:hover {
    background-color: #0066ff; /* Muda a cor de fundo do botão para um tom mais escuro de verde quando o mouse passa sobre ele */
}

/* Links abaixo do formulário */
.links {
    margin-top: 15px; /* Adiciona 15px de margem acima dos links */
}

/* Estilo para os links abaixo do formulário */
.links a {
    color: #007BFF; /* Define a cor dos links como azul */
    text-decoration: none; /* Remove o sublinhado padrão dos links */
}

/* Efeito de hover nos links (quando o mouse passa sobre o link) */
.links a:hover {
    text-decoration: underline; /* Adiciona sublinhado ao link quando o mouse passa sobre ele */
}

/* Responsividade para telas menores (max-width: 768px) */
@media (max-width: 768px) {
    .login-container {
        padding: 15px; /* Reduz o padding do container para telas menores */
    }

    input, button {
        font-size: 14px; /* Reduz o tamanho da fonte dos inputs e botões para telas pequenas */
    }

    .logo img {
        width: 60px; /* Diminui o tamanho da logo para telas pequenas */
    }
}