body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

:root {
    --grid-size: 16; /* Adjust this value for grid size (e.g., 3 for 3x3) */
}

.grid-container {
    height: 100vh;
    width: 100vh; /* Keep the grid square */
    max-width: 100vh;
    display: grid;
    grid-template-columns: repeat(calc(var(--grid-size) + 2), 1fr);
    grid-template-rows: repeat(calc(var(--grid-size) + 2), 1fr);
}

.label {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    font-size: calc(0.5vw + 0.5vh); /* Adjust font size for better visibility */
}

.cell {
    background-color: #fff;
    border: 1px solid #ddd;
}