:root {
    --cell-size: 76px;
    --center-width: 76vw;
    --button-size: 80px;
}

body {
    background-color: var(--white-blue);
    font-family: monospace, monospace;
}

.main-holder {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.header {
    -webkit-text-stroke-width: 4px;
    -webkit-text-stroke-color: black;
    color: white;
    font-size: 5.6rem;
    font-weight: bolder;
    padding: 40px;
    height: 12vh;
}

.left-block {
    width: calc((100vw - var(--center-width))/2);
}


.right-block {
    width: calc((100vw - var(--center-width))/2);
}

.mid-holder {
    /*border: 4px solid red;*/
    display: flex;
    height: 75vh;
}

.center-block {
    /*border: 4px solid red;*/
    gap: 12%;
    padding: 0 2% 0 4%;
    width: 75vw;
    display: flex;
    align-items: center;
    justify-content: center;
}

.numpad-holder {
    display: flex;
    flex-direction: column;
    border: 8px solid var(--pale-blue-d);
    background-color: var(--white-blue-l);
    border-radius: 8px;
    padding: 10px;
    align-items: center;
    justify-content: center;
    width: 35%;
}

.game-board-holder {
    display: flex;
    align-items: center;
    justify-content: center;
    /*border: 4px solid greenyellow;*/
    width: 45%;
}

#game-board {
    aspect-ratio: 1 !important;
    border-radius: 8px;
    border: 8px solid var(--white-blue-dddd);
    background-color: var(--white-blue-dddd);
    width: calc(var(--cell-size)*9);
    height: calc(var(--cell-size)*9);
    display: grid;
    grid-template-rows: repeat(3, calc(100%/3));
    grid-template-columns: repeat(3, calc(100%/3));
}

#timer {
    font-weight: bolder;
    font-size: 2.8rem;
    margin: 12px;
}

.numpad {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /*border: 4px solid black;*/
    width: 20vw;
}

.numpad-button {
    border-radius: 6px;
    border: 6px solid black;
    width: var(--button-size);
    height: var(--button-size);
    color: black;
    font-weight: bolder;
    font-size: 2.5rem;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.pencil-on {
    border-color: blue;
    color: blue;
}

#pencil {
    padding-top: 10px;
}

button:hover {
    cursor: pointer;
}

#numpad {
    width: fit-content;
    border: 8px solid var(--pale-blue-l);
    background-color: var(--white-blue);
    padding: 25px;
    display: grid;
    grid-template-columns: repeat(3, var(--button-size));
    gap: 20px;
}

.control-button {
    height: 60px;
    font-weight: bolder;
    font-size: 1.45rem;
    color: black;
    border-radius: 6px;
    border: 6px solid black;
    padding: 10px;
    text-align: center;
    vertical-align: center;
}

.button-holder {
    margin: 14px;
}

.square {
    border: 4px solid var(--white-blue-dddd);
    display: grid;
    grid-template-rows: repeat(3, calc(100%/3));
    grid-template-columns: repeat(3, calc(100%/3));
}

.cell {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bolder;
    font-size: 2.15rem;
    user-select: none;
}

.cell-pencil {
    font-size: 1.1rem;
}

.cell-text-given {
    color: var(--alt-darkgray-d);
}

.cell-text-user {
    color: var(--pale-blue-dddi);
}

/*.cell:hover {*/
/*    cursor: pointer;*/
/*}*/

.cell-standard {
    background-color: var(--white-blue-ll);
    border: 4px solid var(--white-blue-ddll);
}

.cell-selected {
    background-color: var(--pale-hotpink-dd);
    border: 4px solid var(--white-blue-ddll);
}

.cell-number-selected {
    background-color: var(--light-palevioletred-dl);
    border: 4px solid var(--white-blue-ddll);
}

.cell-highlighted {
    background-color: pink;
    border: 4px solid var(--white-blue-ddll);
}

#victory {
    font-weight: bolder;
    font-size: 2rem;
}

.success {
    color: darkgreen;
}

.issue {
    color: darkred;
}

.hidden {
    display: none;
}