body {
    font-family: Arial, sans-serif;
    /* Define a fonte usada no corpo da página */
    background-image: url('/assets/Imagens/2.jpg');
    /* Define uma imagem de fundo para a página */
    background-size: cover;
    /* Faz com que a imagem de fundo cubra toda a área do fundo */
    background-position: center;
    /* Centraliza a imagem de fundo */
    background-repeat: no-repeat;
    /* Impede que a imagem de fundo seja repetida */
    display: flex;
    /* Aplica o layout flexbox no corpo da página */
    flex-direction: column;
    /* Organiza os elementos do body em coluna */
    justify-content: center;
    /* Centraliza os elementos verticalmente no centro da página */
    align-items: center;
    /* Centraliza os elementos horizontalmente no centro da página */
    height: 100vh;
    /* Define a altura do body como 100% da altura da tela */
    margin: 0;
    /* Remove a margem padrão do body */
    color: #fff;
    /* Define a cor do texto como branca para contraste com o fundo */
}

h1 {
    margin-bottom: 20px;
    /* Define uma margem inferior para o título para espaçamento */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* Adiciona sombra ao texto para melhorar a legibilidade */
}

.login-container {
    background-color: rgba(255, 255, 255, 0.8);
    /* Define um fundo branco semi-transparente */
    padding: 10px;
    /* Define o espaço interno em torno do conteúdo da caixa */
    border-radius: 8px;
    /* Arredonda as bordas da caixa */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Adiciona sombra ao redor da caixa */
    width: 300px;
    /* Define a largura da caixa */
    text-align: center;
    /* Centraliza o texto dentro da caixa */
    color: #333;
    /* Define a cor do texto dentro da caixa */
}

.form-group {
    margin-bottom: 15px;
    /* Define um espaçamento inferior para separar os grupos de formulário */
    text-align: left;
    /* Alinha o texto à esquerda dentro do grupo de formulário */
}

.form-group label {
    display: block;
    /* Faz com que o label ocupe toda a largura disponível */
    margin-bottom: 5px;
    /* Define um espaço inferior para o label */
}

.form-group input {
    width: 100%;
    /* Define que o campo de entrada ocupará toda a largura do contêiner */
    padding: 8px;
    /* Adiciona espaço interno no campo de entrada */
    box-sizing: border-box;
    /* Inclui o padding e a borda dentro da largura total do input */
    border: 1px solid #ccc;
    /* Define a borda do campo de entrada */
    border-radius: 4px;
    /* Arredonda as bordas do campo de entrada */
}

.form-group button {
    width: 100%;
    /* Faz o botão ocupar toda a largura da caixa de entrada */
    padding: 8px;
    /* Define o mesmo padding dos campos de entrada */
    border: none;
    /* Remove a borda padrão */
    border-radius: 4px;
    /* Arredonda as bordas do botão */
    background-color: #4CAF50;
    /* Define a cor verde inicial */
    color: white;
    /* Cor do texto no botão */
    cursor: pointer;
    /* Muda o cursor para a mão ao passar sobre o botão */
    font-size: 16px;
    /* Ajusta o tamanho do texto para uma melhor legibilidade */
    transition: background 0.3s ease;
    /* Define uma transição suave para o efeito de hover */
    background-image: linear-gradient(to right, #4CAF50, #66bb6a);
    /* Gradiente verde */
}

.form-group button:hover {
    background-image: linear-gradient(to right, #66bb6a, #a5d6a7);
    /* Gradiente mais claro ao passar o mouse */
}

#validacao {
    color: red;
    font-size: 20px;
}