:root {
    --gameBoardWidth: 60vw;
    --gameBoardHeight: 60vh;
    --boardMinDimension: 55vmin;
}

body {
    max-height : 95vh;
    max-width: 95vw;
    height : 95vh;
    width: 95vw;
    margin: auto;
    font-family: Arial;
    background-color: slategray;
}

.buttons-container {
    display: flex;
    justify-content: center;
}

#restart-btn {
    margin-left: 15px;
}

.board-container {
    min-width: var(--gameBoardWidth);
    min-height: var(--gameBoardHeight);
    max-width: var(--gameBoardWidth);
    max-height: var(--gameBoardHeight);
    margin: auto;
    display: flex;
    justify-content: center;
}

.board {
    min-width: var(--boardMinDimension);
    min-height: var(--boardMinDimension);
    max-width: var(--boardMinDimension);
    max-height: var(--boardMinDimension);
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto;
}

.board-item {
    text-align: center;
    border: 3px solid rgba(0, 0, 0, 0.8);
    padding: auto;
    font-size: 15vmin;
    line-height: 20vmin;
    color: slategray;
}

.board div:nth-child(3n) {
    border-right: none;
}

.board-item:nth-child(-n + 3) {
    border-top: none;
} 

.board-item:nth-child(3n  - 2) {
    border-left: none;
} 

.board-item:nth-child(n + 7) {
    border-bottom: none;
}

.colored {
    color : black;
}

.info-container {
    margin-top: 0.5vmax;
    font-size: 4vmin;
}

.info-icon {
    color: #1E90FF;
}

.title {
    margin-top: 1vmax;
    font-size: 8vmin;
}

h1, h4, h3, h5, .title, .info-container {
    text-align: center;
}

.winner {
    background-color: green;
}