html, body {
	padding: 0;
	margin: 0;
	overflow: hidden;
	user-select: none;
	background-color: #000;
	background-image: url("img/darkWood.png");
	font-size: 2vmax;
	font-family: sans-serif;
}

#menu_btn, #restart_btn {
	font-size: 3vmax;
	padding: 0.5em 1em 0.5em 1em;
	margin: 0.7em 1em 0.7em 1em;
	border-radius: 0.2em;
}

#preview {
	display: inline-block;
	width: 30vmax;
	height: 30vmax;
	margin: 0.7em 1em 0.7em 1em;
	vertical-align: top;
	border-radius: 0.4em;
	background-size: 30vmax 30vmax;
}

#scene_wrap {
	display: inline-block;
	width: 100vmin;
	height: 100vmin;
	background-image: url("img/boxBack.png");
	background-size: contain;
	margin-top: 0.5vmin;
}

#scene {
	width: 78vmin;
	height: 73vmin;
	margin-left: 13vmin;
	margin-top: 14vmin;
	overflow: hidden;
}

#side_pane {
	position: absolute;
	width: calc(100% - 100vmin);
	text-align: center;
}

@media (max-aspect-ratio: 13/10) {
	#side_pane {
		position: absolute;
		width: 100%;
		text-align: left;
	}

	#restart_btn {
		position: absolute;
		right: 0;
		top: 0;
		float: right;
		font-size: 3vmin;
	}

	@media (min-aspect-ratio: 10/13) {
		#preview {
			width: 15vmin;
			height: 15vmin;
			background-size: 15vmin 15vmin;
		}
	}
}

#central_pane {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-block;
	vertical-align: top;
}

.tile {
	display: inline-block;
	width: 17vmin;
	height: 17vmin;
	text-align: left;
	margin: 0.1vmin;
	border: 0.1vmin solid #fff;
	border-radius: 1.5vmin;
	cursor: pointer;
    color: white;
    text-shadow: 2px 3px 2px #000;
}

#tile15 {
	opacity: 0;
}

#anim_tile {
	position: absolute;
	left: 200vw;
}

#game_over {
	position: absolute;
	top: 20vh;
	left: 50%;
	background-color: #fff;
	border-radius: 2vmin;
	text-align: center;
	transform: translate(-50%, 0);
	padding: 0 15vmin 2vh 15vmin;
}

#congratulations {
	position: absolute;
	width: 66vmin;
	height: 30vmin;
	left: 50%;
	margin-left: -33vmin;
	margin-top: -15vmin;
	background-image: url("img/winBanner.png");
	background-size: contain;
	background-repeat: no-repeat;
}

#final_image {
	display: inline-block;
	width: 38vmin;
	height: 38vmin;
	margin-top: 10vmin;
	background-size: contain;
	border: 0.4vmin solid #fff;
	border-radius: 2vmin;
	box-shadow: 3px 3px 3px #777;
}

#you_solved {
	color: #33f;
	font-size: 5vmin;
}

#play_next_btn, #play_btn {
	color: #fff;
	background-color: #36f;
	font-size: 3vmin;
	padding: 1vmin 5vmin 1vmin 5vmin;
	border-radius: 1vmin;
}

#menu {
	position: absolute;
	top: 20vh;
	left: 50%;
	width: 95vmin;
	transform: translate(-50%, 0);
	background-color: #fff;
	border-radius: 1vmin;
	text-align: center;
	padding-bottom: 2vh;
}

#menu_title {
	background-color: #099;
	color: #fff;
	border-top-left-radius: 1vmin;
	border-top-right-radius: 1vmin;
	line-height: 1.5em;
	font-weight: bold;
}

.menu_btn {
	display: inline-block;
	color: #777;
	font-size: 2vmin;
	font-weight: normal;
	padding: 1vmin 2vmin 1vmin 2vmin;
	margin-left: 2vmin;
	line-height: 1em;
	border-radius: 1vmin;
	border: 0.3vmin solid #fff;
	cursor: pointer;
}

.menu_btn.sel {
	color: #fff;
	background-color: #0b0;
	border: 0.3vmin solid #088;
	font-weight: bold;
}

.menu_section {
	padding: 3vmin 0 0 4vmin;
	text-align: left;
	color: #044;
	font-weight: bold;
}

hr {
	margin-top: 3vmin;
	margin-bottom: 2vmin;
	width: 90%;
}

#close_btn {
	display: inline-block;
	float: right;
	padding-right: 0.5em;
	padding-left: 0.5em;
	border-left: 0.1em solid #fff;
	cursor: pointer;
}