@font-face {
  font-family: 'digital-7';
  src: url('fonts/digital-7.ttf');
}

/*@import url('https://fonts.googleapis.com/css?family=Orbitron');*/


html, body {
	height: 100%;
	width: 100%;
	font-size: 18px;
	color: #EEE;
	/*text-shadow: 2px 2px #333;*/
	background-image: url("imgs/gun_metal.png");
	background-repeat: repeat;
	background-color: black;
}

p {
	font-size: 1em;
	/*margin: 0;*/
}

	#app-wrapper {
		width: 80%;
		height: auto;
		/*padding-bottom: 80%;*/
		margin: 0 auto;
		margin-top: 10%;
		/*border: 2px dashed white;*/
		position: relative;
		background-image: url("imgs/gamebox.png");
		background-size: 100%;
		background-repeat: no-repeat;
	}

	@media (min-width: 920px) {
		#app-wrapper {
			width: 800px;
			/*padding-bottom: 620px;*/
		} 
	}

	@media (max-width: 320px) {
		#app-wrapper {
			width: 300px;
			/*padding-bottom: 620px;*/
		} 
	}

	@media (max-height: 600px) {
		#app-wrapper {
			width: 300px;
			/*padding-bottom: 620px;*/
		} 
	}

	#svg-box {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: 1;
		/*border: 2px dashed white;*/
	}

		#clickarea-green, #clickarea-red, #clickarea-blue, #clickarea-yellow {
			cursor: pointer;
			stroke: none;
			fill: transparent;
		}

		#clickarea-strict {
			cursor: pointer;
			stroke: #3f3f3f;
			stroke-width: 2px;
			fill: url(#strict-gradient);
		}

		#clickarea-start {
			cursor: pointer;
			stroke: #3f3f3f;
			stroke-width: 2px;
			fill: url(#start-gradient);
		}

		.btn-mem {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 0;
			/*cursor: pointer;*/
		}

		#btn-blue{
			top: 0;
			left: 0;
			background-image: url("imgs/light-blue-off.png");
			background-size: 100%;
			background-repeat: no-repeat;
			/*border: 1px dashed blue;*/
			/*background-color: blue;*/
		}

		#btn-red{
			top: 0;
			left: 0;
			background-image: url("imgs/light-red-off.png");
			background-size: 100%;
			background-repeat: no-repeat;
			/*border: 1px dashed red;*/
			/*background-color: red;*/
		}

		#btn-yellow{
			top: 0;
			left: 0;
			background-image: url("imgs/light-yellow-off.png");
			background-size: 100%;
			background-repeat: no-repeat;
			/*border: 1px dashed yellow;*/
			/*background-color: yellow;*/
		}

		#btn-green{
			top: 0;
			left: 0;
			background-image: url("imgs/light-green-off.png");
			background-size: 100%;
			background-repeat: no-repeat;
			/*border: 1px dashed green;*/
			/*background-color: green;*/
		}

		#display {
			position: absolute;
			top: 50.4%;
			left: 55.9%;
			height: 6%;
			width: 9%;
			margin: 0;

			text-align: right;
			font-family: 'digital-7', sans-serif;
			font-size: 18px;
			color: #00CF00;  		
   		text-shadow: 0px 0px 5px rgba(100, 220, 100, 0.75);
		}

			#display p {
				margin-top: -10px;
				margin-right: 15%;
			}