@import url('https://fonts.googleapis.com/css2?family=Delius+Swash+Caps&family=Gochi+Hand&family=Sofia&display=swap');

#game_title h1 {
	color: 				#9fbfdf;
	font-family: 		Gochi Hand, arial;
	margin-top:			5px;
	margin-bottom:		5px;
	margin-left:		25px;
	text-shadow: 		1px 1px 4px black;
}
		
table {		
	background-color: 	#9fbfdf;
	border-spacing:		2px;
}
		
td {
	border: 			2px solid #336699;
	background-color:	#e6e600;
	width: 				66px;
	height: 			65px;
	text-align: 		center;
}
		
th {
	color: 				#cc6600;
}
		
#game_container_div {
	position:			relative;
	border: 			0px solid #264d73; 
	width: 				326px;

	height:				565px;
	margin: 			auto;
	margin-top:			20px;
	padding:			0px;
	background-color:	#3973ac;
	z-index:			0;
	border-top-left-radius:	15px;
	border-top-right-radius: 15px;
	border-bottom-left-radius:	15px;
	border-bottom-right-radius: 15px;
	font-family:		arial;
	text-align:			center;
}
		
#game_title {
	position:	 		absolute;
	border: 			solid 0px white;
	background-color:	#336699;
	top:				0px;
	left:				0px;
	margin-left:		0px;
	margin-top:			0px; 
	margin-bottom:		5px;
	width:				326px;
	text-align:			left;
	border-top-left-radius:	15px;
	border-top-right-radius: 15px;
}	
		
#game_div {
	position:			absolute;
	min-height:			200px;
	min-width:			200px;
	z-indez:			1;
	top:				50px;
	left:				0px;
	text-align:			center;
}
		
#button_container_div {
	position: 			absolute;
	top:				390px;
	text-align: 		center;
	margin:				auto;
	margin-left:		20px;
	width: 				280px;
	z-index:			6;
	border: 			solid 0px red;
}
		
.button {
	border:				none;
	background-color:	#999900;	
	width:				60px;
	margin-left:		0px;
	border-radius:		15px;
	box-shadow: 		0 5px 5px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.playButton {
	border:				none;
	background-color:	#999900;
	width:				100px;
	margin-left:		10px;
	font-weight:		bold;
	border-radius:		15px;
	box-shadow: 		0 5px 5px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.19);
}
#pauseButton {
	border:				none;
	background-color:	#999900;
	width:				60px;
	margin-left:		10px;
	border-radius:		15px;
	box-shadow: 		0 5px 5px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.19);
}
		
#musicButton {
	border:				none;
	background-color:	#999900;
	width:				100px;
	margin-left:		0px;
	margin-top:			10px;
	border-radius:		15px;
	box-shadow: 		0 5px 5px 0 rgba(0,0,0,0.3), 0 6px 20px 0 rgba(0,0,0,0.19);
}
#message {
	display:			flex;
	flex-wrap:			none;	
	position:			absolute;
	top:				445px;
	margin-left:		20px;
	width:				95%;
	height:				100px;
	text-align: 		center;
	color:				white;
	border:				0px solid white;
}

#message_leftpanel {
	background-color:	#2d5986;
	width:				25%;
	padding:			10px 0px 10px 0px;
	text-align:			center;
	border:				0px solid lightblue;
	border-radius:		15px;
}	
#message_rightpanel {
	float:				left;
	width:				70%;
	height:				80px;
	margin-top:			10px;
	padding:			0px 5px 10px 10px;
	text-align:			left;
	border:				0px solid blue;
}	

#credit {
	position:			absolute;
	top:				535px;
	width:				85%;
	text-align: 		center;
	color:				#9fbfdf;
	font-size:			10px;
	margin-left:		20px;
}		
#goodguy {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				70px;
	height:				70px;
	z-index:			14;
	
}
#monster1 {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				70px;
	height:				70px;
	z-index:			10;
	
}
#monster2 {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				70px;
	height:				70px;
	z-index:			10;
	
}
#star1 {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				70px;
	height:				70px;
	z-index:			10;
	
}
#star2 {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				70px;
	height:				70px;
	z-index:			10;
	
}
#star3 {
	position:			absolute;
	top:				0px;
	left:				0px;
	width:				70px;
	height:				70px;
	z-index:			10;
}

#youlose {
	position:			absolute;
	top:				50px;
	left:				20px;
	z-index:			15; 
	visibility: 		visible;
	opacity:			0;
	border: 			solid 0px red;
}
		
#youwin {
	position:			absolute;
	top:				50px;
	left:				20px;
	z-index:			15; 
	visibility: 		visible;
	opacity:			0;
	border: 			solid 0px green;
}

#firework {
	position:			absolute;
	top:				50px;
	left:				20px;
	z-index:			14; 
	visibility: 		hidden;
	opacity:			1;
}