/*The height is set to 100%, so the body can be 100%, so the
footer can rest on the bottom of the page.*/
html{
	height: 100%;
}
/*The min-height property is for the benefit of the footer*/
body{
	min-height: 100%;
	position: relative;
}

/*padding on the bottom must make space for the footer*/
main{
	padding-bottom: 150px;
}

.title{
	font-size: 18px;
}

/*The initialization form will only show when the 
parent's class is game-state-0. This allows the 
javascript to hide the form and display the game 
board by changing the class names.*/
#init-form{
	display: none;
}

.game-state-0 #init-form{
	display: block;
	height: 530px;
}

#init-form.field-error{ /*increase height to show error messages*/
	height: 630px;
}

/*When the user selects "spectator" in the form, some 
of the options, like player name and colors, will 
be hidden. This adjusts the height of the form's 
container to keep it reasonable.*/
.game-state-0 #init-form.spectator-mode{
	height: 340px;
}

/*Hides irrelevant fields when player selects "spectator"*/
#init-form.spectator-mode .player-only{
	display: none;
}

/*Game components will not display until user has 
submitted the form.*/
.game-state-0 #game-container, .game-state-1 #game-container{
	display: none;
}

/*Place submit button under game board on right side*/
#move-submit{
	position: fixed;
	bottom: 25px;
	right: 0;
}

.player-card{
	position: relative;
	
	overflow: hidden;
}

/*Decorative line under player name*/
.player-card .line{
	width: 50%;
	
	margin: auto;
}

.player-card .overlay{
	background: #555a;
	
	display: none;
	
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
/*Endgame modal is used to announce the winner.*/
/*It is hidden until the end of the game (when the game state is 6)*/
#endgame-modal{
	display: none;
}
.game-state-6 #endgame-modal{
	display: block;
}

#endgame-modal .w3-modal-content{
	margin-top: 30vh;
}


/*
min-height of body is set to 100% to make sure the 
footer always rests on the bottom of the page. 
*/
footer{
	background: #555;
	color: #fff;
	
	position: absolute;
	height: 150px;
	width: 100%;
	bottom: 0;
	
	text-align: center;
}

.footer-element{
	text-align: center;
}

/*Rules here will only apply to screens whose width 
is greater than 600px*/
@media only screen and (min-width: 601px) {
.title{
	font-size: 5vw;
}

/*Place submit button under game board on right side*/
#move-submit{
	position: absolute;
	bottom: -50px;
	right: 0;
}

/*Align footer elements*/
#developer-credit{
	text-align: left;
}
#copyright{
	text-align: center;
}
#w3-css{
	text-align: right;
}
}/*End greater than 600px width styles*/



/*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){

/*Place submit button under game board on right side*/
#move-submit{
	bottom: 0;
	right: -100px;
}

.player-card{
	width: 20%;
}
#player-1-card{
	float: left;
	margin-left: 7vw;
}
#player-2-card{
	float: right;
	margin-right: 7vw;
}

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