:root {
    --grid-size: 3;
    --grid-gaps: 4px;
    --cell-size: clamp(90px, 30vw, 110px);
}
body {
    height: 100vh;
    margin: 0 auto;
    display: flex;
    font-size: 18px;
    font-family: 'Jost', sans-serif;
    letter-spacing: 0.4px;
    color: #f5f5f5;
    background-color: #2f3742;
    overflow:hidden;
}
body.transparent {
  background: transparent;
}
#container {
    margin: auto;
}
#gameHeader > h2 {
    margin: 0;
    padding: 0 10px;
}
#gameInfo {
    height: 50px;
    margin: 5px 10px 10px;
    display: flex;
    align-items: center;
    /*white-space: pre-wrap;*/
}
#gameBoard {
    display: grid;
    grid-template-columns: repeat( var(--grid-size), var( --cell-size ) );
    gap: var(--grid-gaps);
    width: calc(
        var( --grid-size )      * var( --cell-size ) +
      ( var( --grid-size ) - 1) * var( --grid-gaps )
    );
    height: calc(
        var( --grid-size )      * var( --cell-size ) +
      ( var( --grid-size ) - 1) * var( --grid-gaps )
    );
    margin: auto;
}
.cell {
    aspect-ratio: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    background: #ddd;
    border: 0px;
    text-align: center;
    font-size: 60px;
}
.cell:hover:not(:disabled) {
    outline: #478dbf auto 1px;
}
.cell:not(:disabled) {  
    cursor: pointer;
}
#gameFooter {
    display: flex;
}
button {
    border: 1px solid #9ab6c9;
    border-radius: 30px;
    color: #9ab6c9;
    background-color: transparent;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 500;
    font-family: inherit;
    letter-spacing: inherit;
    line-height: 1em;
    margin: 20px auto;
}
button:not(:disabled):hover {
    background-color: #478dbf;
    border-color: #478dbf;
    color: #f5f5f5;
    cursor: pointer;
}