html,
body {
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
	font-family: 'Shrikhand', sans-serif;
	color: #333;
	background-color: #000;
}

.wrapper {
	position: relative;
	top: 50%;
	top: 50%;
	width: 1400px;
	margin: calc(-900px / 2) auto 0;
}

canvas {
	position: relative;
	display: block;
}

.ui-menu {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.6);
	text-align: center;
}

button {
	display: inline-block;
	border: 2px solid #333;
	font-family: 'Shrikhand', sans-serif;
	background-color: #fff;
	cursor: pointer;
}

button:hover {
	background-color: #333;
	color: #fff;
}

h1 {
	margin: 3em 0 2em;
}

.main-menu {
	overflow: hidden;
}

.main-menu .inner {
	position: relative;
	z-index: 1;
}

.main-menu .play {
	margin-top: 5em;
}

.main-menu input {
	display: inline-block;
	margin-left: 0.5em;
	width: 2em;
}

h2 {
	margin: 3em 0 3.5em;
}

.menu-player {
	opacity: 0;
	position: absolute;
	z-index: 0;
	top: 32%;
	left: -2%;
	width: 35%;
	animation: player-roll-in 3s forwards ease-in-out, player-bob 3s 3s infinite ease-in-out;
}

.menu-player.right {
	animation-delay: 0.1s, 3.5s;
}

.menu-player.right .sword {
	animation-delay: 0.1s, 3.7s;
}

@keyframes player-roll-in {
	0% {
		opacity: 1;
		transform: translate(-100%,-12%) rotate(-200deg);
	}

	30% {
		transform: translate(20%,-7%) rotate(50deg);
	}

	55% {
		transform: translate(-10%,-4%) rotate(-30deg);
	}

	80% {
		transform: translate(5%,-1%) rotate(15deg);
	}

	100% {
		opacity: 1;
		transform: translate(0,0) rotate(0);
	}
}

@keyframes player-bob {
	0%, 100% {
		transform: translate(0, 0);
	}

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

.main-menu .flip-container {
	transform: scale(-1, 1);
}

.menu-player img {
	display: block;
	position: relative;
	z-index: 1;
	width: 100%;
}

.menu-player .sword {
	position: absolute;
	z-index: 0;
	top: 90%;
	left: 40%;
	width: 21.92%;
	transform-origin: 61% -17%;
	transform: rotate(-125deg);
	animation: player-roll-in-sword 3s forwards ease-in-out, player-sword-bob 3s 3.2s infinite ease-in-out;
}

@keyframes player-roll-in-sword {
	0% {
		transform: rotate(-90deg);
	}

	35%, 60% {
		transform: rotate(-300deg);
	}

	100% {
		transform: rotate(-125deg);
	}
}

@keyframes player-sword-bob {
	0%, 100% {
		transform: rotate(-125deg);
	}

	50% {
		transform: rotate(-115deg);
	}
}