*
{
   font-family: Arial, sans-serif;
} 

body {
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    /*height: 100vh;*/
    overflow-y: auto;
    margin-top: 25px;
    line-height: 1.6;
}

.container {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 900px; /* Aumentado o tamanho máximo do container */
    box-sizing: border-box; /* Inclui o padding na largura total */
  }

	h1, h3 {
		text-align: center;
	}



.table-container {
    overflow-x: auto;
    margin-bottom: 20px;
}

#numeros {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
}

#numeros td {
    padding: 10px;
    border: 1px solid #ccc;
    text-align: center;
    color: #333;
    cursor: pointer;
    transition: background-color 0.3s;
}

#numeros td:hover {
    background-color: #e0e0e0;
}

.instructions {
    margin-bottom: 20px;
    font-size: 13px;
    color: gray;
    line-height: 1.7;
}

.input-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.input-container label {
    margin-bottom: 5px;
    font-weight: bold;
}

.input-container input {
    padding: 8px;
    border: 1px solid #ccc;
   border-radius: 5px;
}
.button-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #A9CF46;
    color: black;
    font-size: 14px;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

#jogosGerados {
    font-size: 14px;
    line-height: 1.6;
    word-wrap: break-word;
    text-align: center;
}
.userInformation{
    text-align: center; /* Alinha o texto à esquerda */
    /*text-align: justify;*/
    font-size: 0.9em;
    margin-top: 20px;
  }

.userInformationUnderstanding{
    text-align: left; /* Alinha o texto à esquerda */
    font-size: 0.9em; /* Ajuste o tamanho da fonte conforme necessário */
  
  }
  .info-container{
    text-align: justify;
    font-size: 0.8em;
  }
.erro {
    color: red;
    font-size: 12px;
}
input::placeholder {
    color: #A9CF46;
    font-style: italic;
    font-size: 12px;
}
/* AJUSTES ESPECIAIS PARA NÃO TER PROBLEMA COM A VISUALIZAÇÃO*/

/*1. Flexbox e Grid Layout
Utilize o Flexbox ou o Grid Layout para garantir que os elementos se ajustem de forma flexível ao tamanho da tela.
*/

/* Utilize flexbox para a .container e os elementos internos */
.container {
    /*display: flex;*/
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* Certifique-se de que a tabela também se ajuste corretamente */
.table-container {
    width: 100%;
    overflow-x: auto; /* Permite rolagem horizontal se necessário */
}

/* Ajuste o tamanho dos botões e inputs para diferentes tamanhos de tela 
button, input {
    width: 100%;
    max-width: -100px; /* Limite máximo de largura para botões e inputs 
    margin: 1px 0; Adiciona um pequeno espaçamento 
}*/

/*
2. Media Queries
Utilize media queries para ajustar o estilo com base no tamanho da tela.*/
/* Ajuste para telas menores */
@media (max-width: 768px) {
    .container {
        padding: 10px;
    }
    
    .button-container {
        flex-direction: column; /* Alinha os botões verticalmente */
        align-items: center;
    }

    button {
        width: 100%; /* Botões ocupam toda a largura disponível */
        margin: 5px 0;
    }

    .input-container input {
        width: 100%; /* Inputs ocupam toda a largura disponível */
        max-width: none; /* Remove o limite máximo de largura */
    }
}
/*
3. Overflow e Scroll
Certifique-se de que elementos que podem exceder a largura da tela sejam roláveis.*/
z

#jogosGerados {
    word-wrap: break-word;
    text-align: center;
}
/*
4. Ajuste da Tabela
Certifique-se de que a tabela se ajuste corretamente dentro do contêiner.*/

#numeros {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto; /* Ajusta automaticamente a largura das colunas */
}