/* Style for the grid container */
.sudoku-board {
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(9, 50px); /* 9 columns, each 50px wide */
    grid-template-rows: repeat(9, 50px);    /* 9 rows, each 50px tall */
    gap: 0; /* No gap between cells */
}

/* Style for each grid item */
.grid-item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: white;
    border: 1px solid #000;
    padding: 0;
}

/* Thicker borders for every 3rd column (right border after 3rd, 6th columns) */
.grid-item:nth-child(3n) { /* Every 3rd column in each row */
    border-right: 3px solid black;
}

/* Thicker left border for the first column of each block of 3 */
.grid-item:nth-child(3n+1) { /* Every 1st column in each block of 3 columns */
    border-left: 3px solid black;
}

/* Thicker top border for the first row */
.grid-item:nth-child(-n+9) { /* First row */
    border-top: 3px solid black;
}

/* Thicker bottom border for the last row */
.grid-item:nth-child(n+73) { /* Last row */
    border-bottom: 3px solid black;
}

/* Apply thicker bottom border to every 3rd row */
.grid-item:nth-child(n+19):nth-child(-n+27),
.grid-item:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 3px solid black;
}

/* Style for the input fields */
.grid-item input {
    width: 100%;
    height: 100%;
    text-align: center;
    border: none;
    background-color: transparent;
    font-size: 25px;
    font-family: 'Ubuntu', monospace;
}

/* Remove input field outline */
.grid-item input:focus {
    outline: none;
}

/* Highlight grid item on hover */
/* .grid-item:hover {
    background-color: lightblue;
} */

.buttons {
    justify-content: center;
    display: flex;
    margin-top: 20px;
    margin-bottom: 20px;
    gap: 20px;
}

.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 30%;
    top: 25%;
    width: 40%; /* Full width */
    height: flex; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    flex-direction: column;   /* Stack content vertically */
    justify-content: center;  /* Center content vertically */
    align-items: center;      /* Center content horizontally */
    padding: 20px;            /* Padding inside the popup */
    text-align: center;       /* Center text alignment */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}
.close:hover,
        .close:focus {
            color: #f2849e;
            text-decoration: none;
            cursor: pointer;
        }

.body-popup {
    background-color: #fff9e1;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: flex; /* Could be more or less, depending on screen size */
}