* {
    box-sizing: border-box;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

div .sudoku-grid {
    display: grid;
    grid-template-rows: repeat(9, 1fr);
}

div .sudoku-row {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
}

.sudoku-row:nth-child(3n) {
    border-bottom: 3px solid black;
}

/* Make the sudoku cell take input */
.sudoku-cell {
    width: 50px;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    border: 1px solid black;
    background-color: #f2f2f2;
    text-align: center;
}

.sudoku-row:nth-child(2n) .sudoku-cell:nth-child(2n),
.sudoku-row:nth-child(2n + 1) .sudoku-cell:nth-child(2n + 1) {
    background-color: #e6e6e6;
}

.sudoku-cell:nth-child(3n) {
    border-right: 3px solid black;
}

.sudoku-cell:focus {
    color: #A9A9A9;
}

.red {
    color: red;
}