html {
    --color: #923a56;
    --boardColor: #ddfff7;
    --buttonHighlight: #b5b3d1;
    --playerOneColor: #456990;
    --playerTwoColor: #f45b69;
    --victoryInfoHeight: 130px;
    --victoryTilePlayerOne: #99E0FF;
    --victoryTilePlayerTwo: #F99576;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

button {
    border: 0.1em solid black;
    border-radius: 0.12em;
    box-sizing: border-box;
	width: auto;
    text-decoration: none;
    font-weight: 300;
    color: black;
    text-align: center;
    transition: all 0.2s;
	padding-top: 2px;
	padding-bottom: 4px;
    font-size: 14px;
}

button:hover {
    color: #FFFFFF; /*#e1f1f4; */
    background-color: #4B95E7;/*#89BAEF;#B5B3D1;*/
}

#gameBoard {
	width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
	text-align: center;
}

@media only screen and (max-width: 600px) {
	#gameBoard {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	width: 98.9999%; /*90.9999%;*/
	height: 100%;
    min-height: 55vmax;
	}
}

@media only screen and (min-width: 600px) {
	#gameBoard {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 91.999%; /*89.9999%;*/
	height: 100%;
    min-height: 50vmax;
	}
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	#gameBoard {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 100%;
	min-height: 25vmax;
	}
}

@media only screen and (min-width: 962px) {
	#gameBoard {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 80%; /* 90%;/* 100%; /* auto; */
	height: 70%; /* 90%; /* 100%;/* auto;*/
/*	min-width: 25vmax; */
	min-height: 25vmax;
	}
}

#gameBoardHolder {
    justify-content: center;
    align-items: center;
    width: 160px;
    height: 160px;
	min-width: 25vmax;
    min-height: 25vmax;
    background-color: var(--boardColor);
    display: none;
    flex-direction: column;
}

@media only screen and (max-width: 600px) {
	#gameBoardHolder {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 150px;
	width: 98.9999%; /*90.9999%;*/
	height: auto;
	}
}

@media only screen and (min-width: 600px) {
	#gameBoardHolder {
	position: relative;
	width: 61.9999%; /* 59.9999%; */
    min-height: 50vmax;
	}
}

/* écran tablette paysage et smartphone large */
@media only screen and (min-width: 768px) {
	#gameBoardHolder {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 70%; /* ajouté le 05/02/2021 */
	height: auto;
	min-height: 25vmax;
	}
}

@media only screen and (min-width: 962px) {
	#gameBoardHolder {
	position: relative;
	margin-top: 0px;
	margin-left: auto; /*20px;*/
	margin-right: auto; /*20px;*/
	width: 80%; /* 80%; /* 100%; /* /* 160px;*/
	height: 70%; /* 80%;/* 100%; /* /* 160px;*/
    min-height: 25vmax;
	}
}

#header {
	display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    --margin: 5% 0 5% 0;
    font-size: larger;
}

#playersDiv {
  	display: flex;
    justify-content: space-around;
    width: 100%;
}

.player {
  display: flex;
    flex-direction: column;
    align-items: center;
}

.playerButtons {
    display: flex;
    flex-direction: column;
}

.playerButtons > button {
    margin: var(--margin);
    
}

.scoreCounter {
    display: none;
}

.activeButton {
    background-color: var(--buttonHighlight);
}

#startButton {
    margin: 2%;
}

.activeTitle {
    text-shadow: 0 0 2px var(--playerOneColor), 0 0 2px var(--playerTwoColor);
}

.tile {
	display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4rem;
    --border: 2px solid black;
    transition: all 0.2s;
}

.tile:hover {
    background-color: #CCA7DC;
}

.playerOneTile {
    color: var(--playerOneColor);
}

.playerTwoTile {
    color: var(--playerTwoColor);
}

.victoryTilePlayerOne {
    background-color: var(--victoryTilePlayerOne);
}

.victoryTilePlayerTwo {
    background-color: var(--victoryTilePlayerTwo);
}


.drawTile {
    background: #D9B7E1;
}

/* Tic-Tac-Toe Grid */
.tile:nth-child(n+2):nth-child(-n+3) {
    border-left: var(--border)
}
.tile:nth-child(n+5):nth-child(-n+6) {
    border-left: var(--border)
}
.tile:nth-child(n+8):nth-child(-n+9) {
    border-left: var(--border)
}
.tile:nth-child(-n+6) {
    border-bottom: var(--border)
}

#victoryInfo {
    display: none;
    flex-direction: column;
    height: var(--victoryInfoHeight);
    align-items: center;
}

#emptyVictoryInfo {
    min-height: var(--victoryInfoHeight);
    min-width: 100%;
}

#playAgain {
	padding-top: 5px;
	padding-bottom: 5px;
/*    display: inherit;*/
}