/* Estilos para o corpo da página */
body {
    margin: 0; /* Remove a margem padrão */
    font-family: Arial, sans-serif; /* Define a fonte */
    background-color: #f0f2f5; /* Cor de fundo da página */
    display: flex; /* Usa flexbox para centralizar o conteúdo */
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100vh; /* Altura total da tela */
    background: url('https://images.unsplash.com/photo-1612813562440-f3f455f77bf7?q=80&w=465&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D') center/cover no-repeat;
}

/* Estilos para o container do login */
.login-container {
    background-color: #ffffff; /* Cor de fundo do container */
    padding: 40px; /* Espaçamento interno */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para dar profundidade */
    width: 350px; /* Largura do container */
    text-align: center; /* Alinha o texto ao centro */
}

/* Estilos para o logotipo */
.logo {
    width: 100px; /* Largura do logo */
    margin-bottom: 20px; /* Margem inferior */
}

/* Estilos para o grupo de input (label e campo de texto) */
.input-group {
    margin-bottom: 15px; /* Margem inferior */
    text-align: left; /* Alinha o texto à esquerda */
}

/* Estilos para as labels dos campos */
.input-group label {
    display: block; /* Faz a label ocupar uma linha inteira */
    margin-bottom: 5px; /* Margem inferior */
    font-weight: bold; /* Texto em negrito */
    color: #333; /* Cor do texto */
}

/* Estilos para os campos de input */
.input-group input {
    width: 100%; /* Largura total */
    padding: 10px; /* Espaçamento interno */
    border: 1px solid #ccc; /* Borda */
    border-radius: 4px; /* Bordas arredondadas */
    box-sizing: border-box; /* Garante que o padding não afete a largura total */
}

/* Estilos para o botão de login */
button {
    width: 100%; /* Largura total */
    padding: 12px; /* Espaçamento interno */
    background-color: #007BFF; /* Cor de fundo do botão */
    color: white; /* Cor do texto */
    border: none; /* Remove a borda */
    border-radius: 4px; /* Bordas arredondadas */
    font-size: 16px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    cursor: pointer; /* Muda o cursor para uma mão ao passar por cima */
    transition: background-color 0.3s ease; /* Efeito de transição suave na cor de fundo */
}

/* Efeito hover para o botão (quando o mouse está sobre ele) */
button:hover {
    background-color: #0056b3; /* Cor de fundo mais escura */
}