
#pageContent_jeuDeLaVie {
    display: flex;
    flex-direction: row; /* Aligne les éléments horizontalement */
}

#div_grid {
    flex: 1; /* Prend la plus grande partie de l'espace disponible */
    margin-right: 20px; /* Espace entre la grille et les divs explications/options */
}

#div_explications, #div_options {
    margin-bottom: 2vh;
    padding: 4% ;
}

#div_explications{
    font-size: 0.9em;
}


.flex-container {
    display: flex;
    flex-direction: column; /* Aligne les divs l'une au-dessus de l'autre */
}

#container {
    width: 50%;
    display: flex;
    margin: 0 auto;
    font-family: 'Poppins', sans-serif;
}

.grid {
    display: grid;
    grid-template-columns: repeat(40, 16px);
    grid-template-rows: repeat(40, 16px);
}

.cell {
    width: 16px;
    height: 16px;
    border: 1px solid var(--colorShadow);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--buttonBackgroundColor);
    transition: background-color 0.3s ease;
}

.cell.alive {
    background-color: var(--altColor);
}

.simulation {
    display: none;
}

.simulation.active {
    display: grid;
    overflow: auto;
    background-color: #06587C;
}

#label_tailleSimu{
    margin-top: 2vh;
    margin-bottom: 1vh;
    display: block;
}

#inputNumberL, #inputNumberH{
    margin: auto;
    display: inline-block;
    width: 30%;
}

.titre_optionSimu{
    text-align: center;
    margin-bottom: 2vh;
}

.marginTop{
    margin-top: 3vh;
}

#div_simulation {
    display: flex;
    flex-direction: row;
    width: 95%;
    margin: auto;
}

#simulationContainer{
    width: 85%;
    display: inline-block;
}

#simulationOptions{
    width: 15%;
    display: inline-block;
    margin: auto;
    padding: 1%;
}

#bt_pauseSimulation{
    margin: auto;
    margin-bottom: 1vh;
}

#bt_restartSimulation{
    margin: auto;
    margin-bottom: 1vh;   
}

.templateSelector, .colorSelector{
    display: inline-block;
    width: 60%;
    background-color: var(--buttonBackgroundColor);
    color: var(--textColor);
    margin-bottom: 1%;
    margin-top: 1%;
    font-size: 16px;
    border-radius: 8px;
    border: 1px solid black; 
    cursor: pointer;
}

.labelTemplateSelector, .labelColorSelector{
    display: inline-block;
    font-size: 16px;
    width: 35%;
    margin-bottom: 1%;
    margin-top: 1%;
}

#bt_saveTemplate, #bt_startSimulation{
    margin: auto;
    margin-top: 2vh;
}


