*
 {
    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;
}
.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: #A55592;
            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;
            font-size: 0.9em;
            margin-top: 20px;
        }

.userInformationUnderstanding {
            text-align: left;
            font-size: 0.9em;
        }

.info-container {
            text-align: justify;
            font-size: 0.8em;
        }
.error {
            color: red;
            font-size: 12px;
        }
input::placeholder {
            color: #A55592;
            font-style: italic;
            font-size: 12px;
        }



        /* Ajustes para responsividade 
        @media (max-width: 768px) {
            .container {
                padding: 10px;
            }

            .button-container {
                flex-direction: column;
                align-items: center;
            }

            button {
                width: 100%;
                margin: 5px 0;
            }

            .input-container input {
                width: 100%;
                max-width: none;
            }
        }

        /* Ajuste para evitar overflow 
        .table-container {
            overflow-x: auto;
        }

        #numeros {
            width: 100%;
            border-collapse: collapse;
            table-layout: auto;
        }
		
		*/
		
		/* 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.*/
.table-container {
    overflow-x: auto;
}

#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 */
}