body {
    font-family: Verdana; /* Seleciona Verdana como a fonte padrão */
    background-color: #f4f4f4; /* Cor de fundo da página (background) */
}

.login-container { /* Cria um container para os campos de login, um container centraliza e agrupa os elementos da página */
    width: 500px; /* Largura */
    margin: 0 auto; /* Margem, está no modo automático para centralizar na página */
    padding: 50px; /* Distância entre o conteúdo e a borda */
    background-color: #ffffff; /* Cor do background do container */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Sombra do container { esq./dir. e cima/baixo e tamanho da sombra } (red, green, blue, opacidade) */
    margin-top: 300px; /* Topo da margem, distância entre container e topo da página */
    border-radius: 20px; /* Arredondamento das bordas do container */
}

h2 { /* Header 2 */
    text-align: center; /* Alinhamento do texto ao centro */
    margin-bottom: 60px; /* Margem da parte de baixo */
}

.input-group { /* Grupo de input, são as caixas para digitar */
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
}

button { /* Botão */ 
    width: 100%;
    padding: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover { /* Efeito ao passar o mouse por cima do botão */
    background-color: #555;
}

.error {
    color: red;
    text-align: center;
}