*{
    padding: 0;
    margin: 0;
}
#body{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}
#section-header h1{
    padding: 10px;
    font-size: 36px;
}
#game-options{
    display: flex;
    justify-content: center;
    align-items: center;
}
#game-options div{
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
}
#option-titile{
    margin-right: 10px;
}
#select-option{
    cursor: pointer;
}


/* Board */
#game-board{
    padding: 40px;
    display: grid;
    justify-content: center;
    /* gap: 20px; */
}
.board-4x4{grid-template-columns: repeat(4, auto);}
.board-6x6{grid-template-columns: repeat(6, auto);}
.board-9x9{grid-template-columns: repeat(9, auto);}

.tilebox{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ddd;
    font-size: 30px;
    cursor: pointer;
}




.arrow-bottom{
    border-bottom: 5px solid black;            
}
.arrow-right{
    border-right: 5px solid black;
}

/* Digits action */
#game-action {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-bottom: 30px;
}
#game-action p {
    padding: 8px;
    margin: 2px;
    border: 1px solid #ddd;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

#show-game-board,
#show-solution{
    margin: 10px;
    font-size: 20px;
    padding: 8px 30px;
    cursor: pointer;
}


.hidden{
    display: none;
}
.selected{
    background-color: lightblue;
}
.incorrect{
    color: coral;
}