:root {
  --purple: hsl(260, 40%, 16%);

}

body{
    display:flex;
    align-items: center;
    justify-content:center;
    background-color: var(--purple);
    color:white;
}

.container{
    width:95vmin;
    height:95vmin;
    text-align: center;
}

.gameContainer{
    display:flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height:100%;
}

.boardContainer{
    display:grid;
    grid:
    '00 01 02'
    '10 11 12'
    '20 21 22';
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 4px;
    width: 90%;
    height: 90%;
    background-color: white;
}
.controlContainer{
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.playerNameContainer{
    display:flex;
    margin: 50px;

}

.tile {
    display:flex;
    justify-content: center;
    align-items: center;
    font-size: 16vmin;
    background-color: var(--purple);
    user-select: none;
}

.hide {
    display:none;
}