/*styling for main gamepage body*/
#gamePage {
	max-height: 100vh;
	display: flex;
	align-content: center;
	flex-direction: column;
	align-items: center;
	font-family: 'VT323', monospace;
	background: #1C45FF;
	max-width: 100%;
	max-height: 100%;

}

/*styling for main page body*/
#mainPage{
	/*max-height: 100vh;*/
	display: flex;
	align-content: center;
	flex-direction: column;
	align-items: center;
	font-family: 'VT323', monospace;
	background: #1C45FF;
}

/*styling for start game and instructions*/
#button, #button>a {
	text-decoration: none;
	color: black;
	margin: 40px;
	font-size: 60px;
	padding: 2px;

}

/*adding background color and border on hover*/
#button:hover {
	background: white;
	border: 3px dotted black;
}


#instructionsText {
	display: none;
}

.show {
	display: block;
	align-content: center;
	color: white;
	font-size: 20px;
}

/*main page heading*/
#mainPageHead {
	font-size: 80px;
}

#snakeboy {
	top: 65%;
	position: fixed;
	background: #008000;
	width: 10vh;
	height: 10vh;
	border: 1px solid black;
	display: inline-block;
	/*animation: snakeboy 1s linear infinite;*/
}

/*@keyframes snakeboy {
	0%{
		right: 20%;
	}
	50%{
		
	}
	100%{
		left: 20%;
	}
}*/

/*h1 container with title, score, obsticles on gamepage*/
h1 {
	margin-top: 5px;
	margin-bottom: 2%;
	text-align: center;
	width: 60vw;
	font-size: 45px;
	padding: 1%;
	border: 3px dotted black;
	background: yellow;	
	display: flex;
	flex-direction: column;
}

/*container for speed options*/
.container2 {
	display: flex;
	justify-content: center;
	width: 50vw;
	height: 5vh;
	margin-bottom: 2%;
}

/*score styling*/
#score {	
	font-size: 30px;
	padding: 0;
	margin-top: 2%;
	text-align: center;
}

/*speed options styling*/
.speed {
	margin-top: 0px;
	font-size: 20px;
	width: 500px;
	text-align: center;
	padding: 0;
}

/*speed options styling*/
.bar {
	display: inline;
}

/*speed options styling*/
.bar:hover {
	background: white;
	border: 3px dotted black;
	height: 25px;
}

/*obstacle counter styling*/
#obstacles {	
	font-size: 25px;
	text-align: center;
}

/*main container on gamepage styling*/
#container {
	background-color: white;
	box-sizing: border-box;
	-webkit-box-shadow: 1px -3px 25px 6px rgba(0,0,0,1);
	-moz-box-shadow: 1px -3px 25px 6px rgba(0,0,0,1);
	box-shadow: 1px -3px 25px 6px rgba(0,0,0,1);
	width: 80vh;
	/*position: relative;*/
	border: solid black;
	display: flex;
	align-items: center;
	border: 10px solid black;
	margin-top: -1%;
	padding: 1px;
	text-align: center;

}

/*styling for blank squares*/
.square {
	width: 2vh;
	height: 2vh;
	display: inline-block;
	/*border: 1px solid black;*/

}

/*styling for food*/
.food {
	background: #0021B2;
	width: 2vh;
	height: 2vh;
	/*border: 1px solid black;*/ 
	display: inline-block;
	/*float: right;
	left: -50%; /* or right 50% */*/
/*	text-align: left;*/
}

/*styling for head*/
.head {
	background: #008000;
	width: 2vh;
	height: 2vh;
	/*border: 1px solid black;*/ 
	display: inline-block;

}

/*styling for obstacles*/
.obstacle {
	background: red;
	width: 2vh;
	height: 2vh;
	/*border: 1px solid black;*/ 
	display: inline-block;

}