html,body { height: 100%; width: 100%;}
body {
		background: black;
		padding: 0;
		margin: 0;
		overflow: hidden;
		-webkit-transform-style: preserve-3d;
		-webkit-perspective: 900px;
		color: white;
		color: #DDD;
		font-family: Helvetica;
		font-size: 15px;
		/*font-variant: small-caps;*/
		text-transform: uppercase;
	}
	* {
		-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.top-container {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50%;
		top: 0;
		text-align: center;
	}
	.menu-button {
		width: 23%;
		height: 24%;
		margin: 2px;
		border-radius: 2px;
		border: 6px solid #411;
		/*background: #411;*/
		text-align: center;
		display: inline-block;
		padding-top: 1em;
		font-size: 20px;
		font-weight: bold;
		-webkit-transition: all .25s ease-out;
		letter-spacing: 0.4em;
	}
	.menu-button-active {
		-webkit-transition: all 0s ease-out;
		background: #911 !important;
	}
	.menu-button:first-line {
		font-size: 10px;
		font-weight: normal;
	}
	.keys-container {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 50%;
	}
	.key {
		position: absolute;
		top: 0;
		bottom: 0;
		/*border: 1px solid red;*/
		background: #411;
		border-radius: 20px;
		margin: 2px;
		text-align: center;
		padding-top: 2em;
		font-weight: bold;
		-webkit-transform-origin: 50% 50%;
		-webkit-transition: all .25s ease-out;
		-webkit-transform: scale3d(.999,.999,1);
	}
	.key-active {
		background: #911 !important;
		-webkit-transform: scale3d(.9,.8,1);
		z-index: 2;
		-webkit-transition: all 0s ease-out;
	}
	.log {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 50%;
		top: 0;
		color: #FFF;
		font-family: Helvetica;
		font-size: 18px;
		padding: 10px;
	}