/*The game board container defines the location of the game board.
Multiple game boards can be placed inside of it, one on top of 
another, so they can be switched easily. To switch to a new layout, 
simply generate a new board, add it so it displays underneath the 
old one, then hide and delete the old one.*/
#game-board-container{
	background-image: url("images/containerBackground.jpg");
	background-color: #555;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	
	display: grid;
	grid-template-columns: 1fr;
	
	position: relative;
	
	width: 100%;
	height: 100vw;
	overflow: scroll;
}

#game-board-container *::selection{
	color: auto;
	background: auto;
}

.game-board{
	/*Variable stores width of tiles plus the gap between them. It is used in the sliding animations.*/
	--wpg: 22vw;
	
	z-index: -2; /*place behind other elements initially*/
	/*z-index: 2; */
	grid-column: 1;
	grid-row: 1;
	
	display: grid;
	background: #555;
	
	/*grid-auto-rows: 20vw;*/
	grid-template-rows: repeat(16, 20vw);
	grid-template-columns: repeat(16, 20vw);
	
	--gap: 2vw;
	grid-gap: 2vw;
	padding: 2vw;
	
	font-size: 20vw;
}


/*Rules here will only apply to screens whose width 
is greater than 600px*/
@media only screen and (min-width: 601px) {
.player-card{
	margin-bottom: 30px;
}
#game-board-container{
	margin: 30px auto;
	
	width: 90%;
	height: 90vw;
	
	overflow: visible;
}
.game-board{
	/*Variable stores width of tiles plus the gap between them. It is used in the sliding animations.*/
	--wpg: (calc(100%-6vw)+6vw/15);
	
	border: calc(6vw/15) solid #555;
	
	/*grid-auto-rows: calc(86vw / 16);*/
	grid-template-rows: repeat(16, calc(86vw / 16));
	grid-template-columns: repeat(16, calc((100% - 6vw) / 16));
	
	--gap: calc(6vw /15);
	grid-gap: calc(6vw / 15);
	padding: 0;
	
	font-size: 5.25vw;
}
}/*End greater than 600px*/



/*Rules here will only apply to screens whose width 
is greater than 800px and which are in landscape orientation.*/
@media only screen 
and (min-width: 801px) 
and (orientation: landscape){

#game-board-container{
	margin: 0 auto;
	padding: 0;
	
	width: 40%;
	height: 40vw;
}
.game-board{
	/*Variable stores width of tiles plus the gap between them. It is used in the sliding animations.*/
	--wpg: (calc(100%-4vw)+4vw/15);
	
	border: calc(4vw/15) solid #555;
	
	/*grid-auto-rows: calc(36vw / 16);*/
	grid-template-rows: repeat(16, calc(36vw / 16));
	grid-template-columns: repeat(16, calc((100% - 4vw) / 16));
	
	--gap: calc(4vw /15);
	grid-gap: calc(4vw / 15);
	padding: 0;
	
	font-size: 2.25vw;
}


}/*End greater than 800px width landscape*/