body {
		background-image: url("img/wall.png");
		background-repeat: repeat;
}

.board {
		display: flex;
		flex-direction: column;
		/*border: 2px solid #F9772F;*/
		margin: 0 auto;
		/*width: 60%;*/
		/*background-color: brown;*/
		padding: 10px;
		background-image: url("img/tile.png");
		background-repeat: repeat;
		box-shadow: 1px 1px 0px #F9772F,
				2px 2px 0px #F9772F,
				3px 3px 0px #F9772F,
				4px 4px 0px #F9772F,
				5px 5px 0px #F9772F,
				6px 6px 0px #F9772F;
}

.game-row {
		display: flex;
		flex-direction: row;
		/*border: 2px solid green;*/
		justify-content: center;
		box-sizing: border-box;
		/*width: 500px;*/
}

.hint-game-row {
		display: flex;
		flex-direction: row;
		/*border: 2px solid green;*/
		justify-content: center;
		box-sizing: border-box;
}

.btn-row {
		display: flex;
		flex-direction: row;
		/*border: 2px solid green;*/
		justify-content: center;
		box-sizing: border-box;
		margin: 10px;
}

.game-square {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 2px solid #ccc;
		width: 150px;
		height: 150px;
		box-sizing: border-box;
		background-color: white;
		font-size: 4em;
		border-radius: 50%;
		user-select: none;
		font-family: Helvetica, sans-serif;
		margin: 15px;
		box-shadow:
				0 0 0 5px #817dd1,
				0 0 0 10px #5c58aa,
				10px 10px 5px 5px grey;
		text-shadow: 3px 3px 2px grey;
}

.hint-game-square {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 2px solid #ccc;
		/*width: 100px;*/
		/*height: 100px;*/
		width: 90px;
		height: 90px;
		box-sizing: border-box;
		background-color: white;
		font-size: 2.5em;
		border-radius: 50%;
		user-select: none;
		font-family: Helvetica, sans-serif;
		margin: 15px;
		box-shadow:
				0 0 0 1px #817dd1,
				0 0 0 2px #5c58aa;
}

.empty {
		/*opacity: 0;*/
		border: none;
		box-shadow: none;
		background-color: transparent;
}

.move-left {
		transition: all 0.3s ease;
		transform: translate(-150px, 0);
}

.move-right {
		transition: all 0.3s ease;
		transform: translate(150px, 0);
}

.move-top {
		transition: all 0.3s ease;
		transform: translate(0, -150px);
}

.move-bottom {
		transition: all 0.3s ease;
		transform: translate(0, 150px);
}

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

.interface {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		/*border: 2px solid red;*/
}

.game-title {
		/*font-family: Helvetica, sans-serif;*/
		font-family: 'Schoolbell', cursive;
		font-size: 3em;
		color: #FFB13C;
		/*text-shadow: 3px 3px #ccc;*/
		margin: 10px;
}

.timer-display {
		/*font-family: Helvetica, sans-serif;*/
		font-family: 'Schoolbell', cursive;
		font-size: 1.5em;
		color: #FFB13C;
		/*text-shadow: 3px 3px #ccc;*/
		margin: 10px;
}

#new-game-btn {
		width: 200px;
		height: 50px;
		/*font-family: Helvetica, sans-serif;*/
		font-family: 'Schoolbell', cursive;
		font-size: 1.5em;
		background-color: white;
		border-radius: 5px;
		border: 2px solid #ccc;
		color: grey;
		box-shadow: 5px 5px #ccc;
}

#restart-game-btn {
		margin-top: 50px;
		width: 200px;
		height: 50px;
		/*font-family: Helvetica, sans-serif;*/
		font-family: 'Schoolbell', cursive;
		font-size: 1.5em;
		background-color: white;
		border-radius: 5px;
		border: 2px solid #ccc;
		color: grey;
		box-shadow: 5px 5px #ccc;
		margin: 10px;
}

#hint-btn {
		margin-top: 50px;
		width: 200px;
		height: 50px;
		/*font-family: Helvetica, sans-serif;*/
		font-family: 'Schoolbell', cursive;
		font-size: 1.5em;
		background-color: white;
		border-radius: 5px;
		border: 2px solid #ccc;
		color: grey;
		box-shadow: 5px 5px #ccc;
		margin: 10px;
}


/*reference
https://www.w3schools.com/howto/howto_css_shake_image.asp
*/

.shake {
		/* Start the shake animation and make the animation last for 0.5 seconds */
		animation: shake 0.3s;

		/* When the animation is finished, start again */
		animation-iteration-count: infinite;
}

.serve {
		/* Start the shake animation and make the animation last for 0.5 seconds */
		animation: serve 10s;

		/* When the animation is finished, start again */
		animation-iteration-count: 1;
		animation-timing-function: ease-out;
		animation-fill-mode: forwards;
}

@keyframes shake {
		0% {
				transform: translate(0, 0);
		}

		50% {
				transform: translate(-10px, 0);
		}

		100% {
				transform: translate(10px, 0);
		}
}

@keyframes serve {
		0% {
				transform: translate(0, 0);
		}

		100% {
				transform: translate(3000px, 0);
		}
}