/* Reset global - Remove margens e paddings padrão e ajusta a caixa de elementos */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Configuração geral do corpo da página */
body {
    font-family: Arial, sans-serif;
    width: 90%; /* Define a largura geral da página */
    justify-content: center;
    background-color: #f4f4f4;
}

/* Container principal */
.container {
    text-align: center; /* Centraliza os elementos dentro do container */
}

/* Estilização do formulário */
#form1 {
    padding: 20px;
    border: 2px solid rgb(101, 255, 90); /* Borda verde */
    border-radius: 8px; /* Bordas arredondadas */
    background-color: beige; /* Cor de fundo */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para destacar */

    display: flex; /* Deixa os elementos lado a lado */
    flex-direction: row; /* Mantém os elementos na mesma linha */
    justify-content: center; /* Centraliza os inputs e botão */
    gap: 10px; /* Espaçamento entre os elementos */
    align-items: center; /* Alinha verticalmente */

    max-width: 605px; /* Define a largura máxima */
    margin: 0 auto; /* Centraliza o formulário na página */
}

/* Estilização dos inputs */
input {
    padding: 10px;
    border: 2px solid #ccc; /* Borda cinza */
    border-radius: 5px; /* Bordas arredondadas */
    font-size: 16px;
}

/* Estilização do botão */
button {
    padding: 10px 15px;
    border-radius: 16px; /* Bordas arredondadas */
    color: #fff;
    background-color: rgba(3, 92, 3, 0.5); /* Verde transparente */
    cursor: pointer; /* Muda o cursor para indicar clicável */
    font-weight: bold;
    text-transform: uppercase;
    border: none;
    transition: background 0.3s ease-in-out; /* Animação de hover */
}

/* Espaçamento do título principal */
h1 {
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Estilização da tabela */
#table {
    width: 100%; /* Faz a tabela ocupar toda a largura disponível */
    max-width: 605px; /* Limita a largura da tabela para ficar igual ao form */
    margin: 20px auto; /* Centraliza a tabela abaixo do formulário */
    border-collapse: collapse; /* Remove espaços extras entre as células */
    text-align: center; /* Centraliza o texto */
}

/* Estilização do cabeçalho e das células da tabela */
#table th, #table td {
    padding: 16px;
    font-size: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* Linha separadora leve */
    text-align: center; /* Alinha o conteúdo das células ao centro */
}