body {
	background-image: radial-gradient(circle, #ee4b2b, #553c9a);
	text-align: center;
	text-shadow: 2px 2px 4px #000;
	font-family: Verdana, Helvetica, sans-serif;
}
.back-link {
	position: absolute;
	top: 5%;
	left: 5%;
	color: #fff;
}
.game {
	width: 100%;
}

h1 {
	font-size: 3vw;
	color: #fff;
}

.link {
	font-size: 1.5vw;
}

/* for Twitter, GitHub icon */
.fa-brands {
	padding-left: 20px;
	font-size: 2vw;
	text-decoration: none;
	margin: 5px 2px;
	text-shadow: 2px 2px 4px #000;
}

.fa-brands:hover {
	opacity: 0.7;
	text-decoration: none;
}

.fa-twitter {
	color: #55ACEE;
}

.fa-github {
	color: #000000;
}

span {
	color: aliceblue;
}


/* board Gameplay Level Restart style */
.col-sm-4 {
	padding: 1vw;
	display: inline-block;
}

.col-sm-4 > select {
	padding: 2px;
	border-radius: 4px;
	border: solid 2px aliceblue;
	color: #f5e3ef;
	background-color: #9d4366;
	font-size: 1rem;
	display: inline-block;
	cursor: pointer;	
	-webkit-box-shadow: 0rem 0rem 1.25rem 0.2rem rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 0rem 0rem 1.25rem 0.2rem rgba(0, 0, 0, 0.6);
	box-shadow: 0rem 0rem 1.25rem 0.2rem rgba(0, 0, 0, 0.6);
}

.col-sm-4 option {
	color: #9d4366;
	background-color: aliceblue;
}

.col-sm-4 > button {
	align-items: center;
	appearance: none;
	background-color: #FCFCFD;
	border-radius: 4px;
	border-width: 0;
	box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
	box-sizing: border-box;
	color: #9d4366;
	cursor: pointer;
	display: inline-flex;
	height: 30px;
	justify-content: center;
	line-height: 1;
	list-style: none;
	overflow: hidden;
	padding-left: 4px;
	padding-right: 4px;
	position: relative;
	text-align: left;
	text-decoration: none;
	transition: box-shadow .15s,transform .15s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	white-space: nowrap;
	will-change: box-shadow,transform;
	font-size: 18px;	
}
.col-sm-4 > button:focus {
	box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
}
.col-sm-4 > button:hover {
	box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
	transform: translateY(-2px);	
}
.col-sm-4 > button:active {
	box-shadow: #D6D6E7 0 3px 7px inset;
	transform: translateY(2px);
  }

.info {
	font-size: 0.7rem;
	color: #fff;
}

/* Gameboard style */
#gameContainer {
/* width and height of .gameBoardPixel should 1/32 of the width and height of #gameContainer,
because it is used in calculation in the jscript.js file */
	cursor: none;
	width: 32vw;
	height: 32vw;
	margin: 1vw auto;
	background-image: radial-gradient(circle, #da7c69, #7b7199);
	/* From https://css.glass */
	border-radius: 16px;
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3.4px);
	-webkit-backdrop-filter: blur(3.4px);
	border: 7px solid rgba(255, 255, 255, 0.24);
}

.gameBoardPixel {
/* width and height of .gameBoardPixel should 1/32 of the width and height of #gameContainer,
because it is used in calculation in the jscript.js file */
	width: 1vw;
	height: 1vw;
	border-radius: 0.5rem;
	float: left;
}

/* Snake style */
.snakeBodyPixel {
	background-image: radial-gradient(circle, #85da69, #efff14);
	box-shadow: 0 0 0.25rem #00fea5;
}

/* Food style */
.food {
	transition: 0.3s ease-in-out;
	-webkit-animation: glowing 3000ms infinite;
	-moz-animation: glowing 3000ms infinite;
	-o-animation: glowing 3000ms infinite;
	animation: glowing 3000ms infinite;
}
  
@-webkit-keyframes glowing {
	0% { background-color: rgb(232, 229, 223); -webkit-box-shadow: 0 0 3px rgb(232, 229, 223); }
	50% { background-color: #fff; -webkit-box-shadow: 0 0 40px #fff; }
	100% { background-color: aliceblue; -webkit-box-shadow: 0 0 3px aliceblue; }
}
  
@-moz-keyframes glowing {
	0% { background-color: rgb(232, 229, 223); -moz-box-shadow: 0 0 3px rgb(232, 229, 223); }
	50% { background-color: #fff; -moz-box-shadow: 0 0 40px #fff; }
	100% { background-color: aliceblue; -moz-box-shadow: 0 0 3px aliceblue; }
}
  
@-o-keyframes glowing {
	0% { background-color: rgb(232, 229, 223); box-shadow: 0 0 3px rgb(232, 229, 223); }
	50% { background-color: #fff; box-shadow: 0 0 40px #fff; }
	100% { background-color: aliceblue; box-shadow: 0 0 3px aliceblue; }
}
  
@keyframes glowing {
	0% { background-color: rgb(232, 229, 223); box-shadow: 0 0 3px rgb(232, 229, 223); }
	50% { background-color: #fff; box-shadow: 0 0 40px #fff; }
	100% { background-color: aliceblue; box-shadow: 0 0 3px aliceblue; }
}
	  

/* Score style */
#scoreContainer {
	width: 32vw;
	display: flex;
	justify-content: space-around;
	margin: auto;
}

.scoreBoard {
	padding: 2px;
	border-radius: 4px;
	border: solid 2px aliceblue;
	color: #f5e3ef;
	background-color: #9d4366;
	font-size: 1rem;
	display: inline-block;

}

/* Game Over display style */
.displayGameOver {
	display: none;
	width: 20%;	/* okay */
	background-color: aliceblue;
	position: absolute;
	margin-top: 13vw;
	margin-left: 12vw;	
	padding-top: 1vw;
	padding-bottom: 1vw;
	padding-left: 1vw;
	padding-right: 1vw;
	text-align: center;
	border-radius: 0.25rem;
	color: #ff0000d9;
	font-size: 2vw;
}


/* Buttons hide #onScreenControllers on desktop  */
#onScreenControllers {
	display: none;
}

/* MOBILE */
@media only screen and (max-width: 1200px) {

	h1 {
		font-size: 5vw;
		color: #fff;
	}
	
	.link {
		font-size: 4vw;
	}
	
	/* for Twitter, GitHub icon */
	.fa {
		padding-left: 10px;
		font-size: 4vw;
		margin: 5px 2px;
	}

	#gameContainer {
		width: 64vw;
		height: 64vw;
	}

	.gameBoardPixel {
		width: 2vw;
		height: 2vw;
	}

	#scoreContainer {
		width: 64vw;
	}

	#onScreenControllers {
	
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	#onScreenControllers > div {
		display: flex;
		flex-direction: column;
	}

	#onScreenControllers button {
		align-items: center;
		appearance: none;
		background-color: #FCFCFD;
		border-radius: 4px;
		border-width: 0;
		box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
		box-sizing: border-box;
		color: #9d4366;
		cursor: pointer;
		display: inline-flex;
		height: 40px;
		justify-content: center;
		line-height: 1;
		list-style: none;
		overflow: hidden;
		padding-left: 8px;
		padding-right: 8px;
		position: relative;
		text-align: left;
		text-decoration: none;
		transition: box-shadow .15s,transform .15s;
		user-select: none;
		-webkit-user-select: none;
		touch-action: manipulation;
		white-space: nowrap;
		will-change: box-shadow,transform;
		font-size: 18px;
		margin: 8vw;
	}
	#onScreenControllers button:focus {
		box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
	}
	  
	#onScreenControllers button:hover {
		box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
		transform: translateY(-2px);
	}
	  
	#onScreenControllers button:active {
		box-shadow: #D6D6E7 0 3px 7px inset;
		transform: translateY(2px);
	}

	.info {
		display: none;
	}
}