body {
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
    background: #caced3;
}
.button-container {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    gap: 10px;              
}
.board-wrap {
    padding: 10px;
    background: #fff;
}

.sudoku {
    display: grid;
    grid-template-columns: repeat(9, 30px);
    grid-template-rows: repeat(9, 30px);
}

.cell {
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #000;
}

.cell input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    background: transparent;
    font-family: monospace;
    font-size: 1rem;
}

button {
    padding: 10px;
    background-color: rgb(172, 208, 255);
    border-radius: 30px;
    border-color: rgb(112, 122, 255);
    margin: 10px;
}
/* Yeah. I did copy and paste that. My hand is now in slight pain */
form {
    margin-top: 17px;
}
/* Creating the veritcal thick lines */
.cell:nth-child(3),
.cell:nth-child(6),
.cell:nth-child(12),
.cell:nth-child(15),
.cell:nth-child(21),
.cell:nth-child(24),
.cell:nth-child(30),
.cell:nth-child(33),
.cell:nth-child(39),
.cell:nth-child(42),
.cell:nth-child(48),
.cell:nth-child(51),
.cell:nth-child(57),
.cell:nth-child(60),
.cell:nth-child(66),
.cell:nth-child(69),
.cell:nth-child(75),
.cell:nth-child(78) {
    border-right: 3px solid #000;
}
/* Creating horizontal thick lines */
.cell:nth-child(n+19):nth-child(-n+27),
.cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 3px solid #000;
}