body {
	width: 800px;
	height: 640px;
    margin: 0px;
    padding: 0px;
	text-align: center;
	background-color: black;
	color: white;
	font-family: sans-serif;
	user-select: none;

	overflow: hidden;
}

#game_canvas {
	width: 100%;
	height: 100%;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;

	touch-action: none;
}

#click-to-play, #loading {
	display: none;
	/* display: inline-block; */
	position: absolute;

	top: 0px;
	left: 0px;

	width: 800px;
	height: 640px;

	background-image: url('./src/start_button.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: 200px;

	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-crisp-edges;
	image-rendering: pixelated;
	image-rendering: crisp-edges;

	cursor: pointer;
	pointer-events: none;

	z-index: 1;
}

#loading {
	display: inline-block;
	background-image: url('./src/loading.png');

	z-index: 0;
}

#login-panel {
	display: none;
	/* display: inline-block; */
	position: absolute;

	top: calc((640px / 2) - 110px);
	left: calc((800px / 2) - 200px);

	width: 400px;
	height: 220px;

	background-color: #262527;
	border-radius: 8px;

	transition: 0.3s;

	z-index: 2;
}

h1 {
	color: #dbb240;
}

p {
	padding: 0px 10px;
}

#login-panel.hidden {
	top: 900px;
}

#cancel-login {
	background-color: #d38b79;
}

#login {
	background-color: #a2c95a;
}

/* Scores */
#scores {
	display: none;
	/* display: inline-block; */
	position: absolute;

	top: calc((640px / 2) - (500px / 2));
	left: calc((800px / 2) - (400px / 2));

	width: 400px;
	height: 500px;

	background-color: #262527;
	border-radius: 8px;

	transition: 0.3s;

	z-index: 10;
	pointer-events: all;
}

#score-close {
	display: inline-block;
	position: absolute;

	top: 0px;
	right: 0px;

	width: 25px;
	height: 25px;

	background-color: #d38b79;

	border-top-right-radius: 8px;
}

#score-container {
	display: inline-block;
	position: absolute;

	top: 110px;
	left: 0px;

	width: 100%;
	height: 390px;

	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;

	overflow: auto;
}

.score {
	display: inline-block;
	position: relative;

	width: 100%;
	height: 25px;

	border-bottom: 1px solid #454449;

	line-height: 25px;
	text-align: left;

	background-color: #3a383b;
	color: #9897a3;
}

.score-rank, .score-name, .score-value {
	display: inline-block;
	position: relative;

	padding: 0px 10px;

	width: calc(15% - 21px);
	height: 100%;

	border-left: 1px solid #454449;
}

.score-name {
	width: calc(50% - 21px);
}

.score-value {
	width: calc(35% - 21px);
}

/* Medal popup */

#medal-popup {
	display: inline-block;
	position: absolute;

	bottom: -100px;
	right: 0px;

	width: 350px;
	height: 64px;

	background-color: #262527;
	border-radius: 8px;

	box-shadow: 0px 0px 10px white;

	transition: 0.5s;

	z-index: 11;
	pointer-events: none;
}

#medal-popup.active {
	bottom: 0px;
}

#medal-thumb {
	position: absolute;

	top: 0px;
	left: 0px;

	border-radius: 8px;
}

#medal-title, #medal-desc {
	display: inline-block;
	position: absolute;

	top: 0px;
	left: 64px;

	padding: 4px;

	width: calc(100% - (64px + 8px));

	text-align: left;
}

#medal-title {
	height: 20px;
	
	font-weight: bolder;
	color: #dbb240;
}

#medal-desc {
	top: 24px;

	height: 32px;

	font-size: 16px;
	line-height: 16px;
}