/* @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@700&display=swap'); */

*{
	margin: 0;
	padding: 0;
	font-family: 'Press Start 2P', cursive;
	font-size: 15px;

}

body{
	text-align: center;
	font-family: 'PressStart';
	color: rgb(175, 175, 175);
	background-color: #333232;
	align-items: center;
	display: flex;


}

#canvas {
	margin-top: 2vh;
	-webkit-box-shadow: 0 0 50px #000000;
	box-shadow: 0 0 50px #000000;
	display: inline;
	/* -webkit-filter: blur(3px);
  	-moz-filter: blur(3px);
  	-o-filter: blur(3px);
  	-ms-filter: blur(3px);
  	filter: blur(3px); */
}

#score {
	color: azure;
	font-size: 40px;
}

#menu {
	margin-top: 2vh;
	float: left;
	height: 96vh;
	width : calc((100vw - 96vh));
	align-items: center;
	display: flex;
	/* -webkit-filter: blur(3px);
  	-moz-filter: blur(3px);
  	-o-filter: blur(3px);
  	-ms-filter: blur(3px);
  	filter: blur(3px); */

	
}

#menu > div {
	padding: 4vw;
	width: 100%;
	/* height: 100%; */
}

#menu > div > div{
	/* position: absolute; */
	/* top: 50%; */
	font-size: calc(((100vw - 96vh)/2)/14);

}

#submenu {
	margin-top: 2vh;
	height: 96vh;
	width : calc((100vw - 96vh)/2.5);
	align-items: center;
	display: flex;
	/* -webkit-filter: blur(3px);
  	-moz-filter: blur(3px);
  	-o-filter: blur(3px);
  	-ms-filter: blur(3px);
  	filter: blur(3px); */
}

#submenu > div {
	padding: 2vh;
}


#title {
	
	font-size: calc(((100vw - 96vh)/2)/10);
	align-items: center;

}

#highestScore {
	font-size: 20px;

}

#highScore {
	font-size: 40px;

}

.buttons {
	font-size: 35px;
	padding: 10px;
	cursor: pointer;

}

div.buttons:hover {
	background-color: #262626;
	color: rgb(255, 255, 255);
	box-shadow: 10px 10px 15px black;

}

#overlay {
	position: fixed;
	/* display: table; */
	display: none;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(32, 29, 29, 0.432);
	z-index: 2;
	cursor: pointer;
	align-items: center;
	text-align:center;
	
}

#replay {
	color: rgb(255, 255, 255);
	font-size: 40px;
	text-align:center;
    display: table-cell;
    vertical-align: middle;

}

#howToOverlay {
	position: fixed;
	display: none;
	/* display: flex; */
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(32, 29, 29, 0.432);
	z-index: 2;
	cursor: pointer;
	align-items: center;
	text-align:center;
	
}

#keyboard-instruction {
	margin-left: auto;
	margin-right: auto;
}