:root {
    --border-width-100: 0.15vmin; /* board cell */
    --border-width-300: 0.35vmin; /* board box */
    --border-width-600: 0.7vmin; /* focused cell */
    --board-border-color: black;

    --body-padding: 16px; /* pad the body margin of 8px to all viewport calculations */
    --cell-size: calc((100vmin - var(--body-padding)) / 10);
    --max-cell-size: 60px;
    --sudoku-height: calc(10 * var(--cell-size));
    --sudoku-width: calc(9 * var(--cell-size));
    --sudoku-max-height: calc(10 * var(--max-cell-size)); /* 600px */
    --sudoku-max-width: calc(9 * var(--max-cell-size)); /* 540px */

    --cell-font-size: calc(100vmin * 32 / 540); /* 2rem at width of 540 */
    --max-cell-font-size: 2rem;

    --hover-scale-transform: 1.05;
    --focus-scale-transform: 1.12;

    --select-hover-opacity: 0.5;
    --select-color-400: hsl(195, 53%, 72%);
    --select-color-300: hsl(195, 53%, 82%);

    --btFilled: salmon;
    --overloaded-color: orangered;

    --grey-100: hsl(0, 0%, 95%); /* hover or focus of an empty cell */
    --grey-200: hsl(0, 0%, 82%); /* number bar cells */
    --grey-500: hsl(0, 0%, 50%); /* number bar cell depleted */
    --grey-700: hsl(0, 0%, 35%); /* number bar cell depleted */
}

*, *::after, *::before {
    font-family: inherit;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
}

.content > * {
    max-width: var(--sudoku-max-width);
    width: var(--sudoku-width);
}

.sudoku {
    max-height: var(--sudoku-max-height);
    height: var(--sudoku-height);
    border-spacing: 0;
    font-family: "Times New Roman", Times, serif;
    font-size: var(--cell-font-size);
}

.controls {
    font-family: Arial, Helvetica, sans-serif;
}

.controls * {
    font-size: 1rem;
}


/* controls goes to the right side above 900px width */
@media only screen and (min-width: 900px) {
    .sudoku {
        flex-shrink: 0;
    }

    .content {
        flex-direction: row;
        height: calc(100vh - var(--body-padding));
    }

    .controls {
        margin-top: 0;
        margin-left: 0.5em;
    }
}

/* set the sudoku max font size */
@media only screen and (min-width: 540px) and (min-height: 540px) {
    /* sudoku max width (--sudoku-max-width) */
    .sudoku {
        font-size: var(--max-cell-font-size);
    }
}