html, body{
			font-family: 'Press Start 2P', cursive;
			height: 100%;
			width: 100%;
			overflow:hidden;
			margin: 0; 
			padding: 0;
		}
		.mario-game {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			font-family: sans-serif;
			height: 715px;
		}
		.mario-game #background {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: #6b88ff;
			z-index: 1;
		}

		.layer {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			transition: all 0.1s linear;
			background-size: cover!important;
		}

		#foreground {
			background: url("mario_layer_1.gif");
			z-index: 4;
		}

		#plants {
			background: url("mario_layer_2.gif");
			z-index: 3;
		}

		#mountains {
			background: url("mario_layer_3.gif");
			z-index: 2;
		}

		#clouds {
			background: url("mario_layer_4.gif");
			z-index: 1;
		}

		.mario-game #mario {
			position: absolute;
			left: 100px;
			bottom: 100px;
			height: 72px;
			width: 71px;
			transition: left 0.1s linear;
			z-index: 3;
			background: url(mario.png) left center;
			background-size: 1200px;
			background-repeat: no-repeat;
			background-position-y: 25px;
		}

		#mario.jumping {
			animation: jump 1s ease 0s  infinite normal ;
			/*animation-fill-mode: forwards;*/

		}

		/* JUMPING */

		@keyframes jump {
			0%{
				-webkit-transform: translateY(0);
				transform: translateY(0);
				background-position-x: -1055px;
			}
			20%{
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}
			40%{
				-webkit-transform: translateY(-120px);
				transform: translateY(-120px);
			}
			50%{
				-webkit-transform: translateY(0);
				transform: translateY(0);
			}
			60%{
				-webkit-transform: translateY(-15px);
				transform: translateY(-15px);
			}
			80%{
				-webkit-transform: translateY(0);
				transform: translateY(0);
				background-position-x: -1055px
			}
			100%{
				-webkit-transform: translateY(0);
				transform: translateY(0);
				
			}
		}

		#mario.lookingLeft {
			background-position-x: -518px;
		}

		#mario.lookingRight {
			background-position-x: -610px;
		}

		#mario.runningRight {
			animation: rightRunning 0.5s steps(3) infinite;
			background-position-x: -700px;
		}

		#mario.runningLeft {
			animation: leftRunning 0.5s steps(3) infinite;
			background-position-x: -430px;
		}
		
		@keyframes rightRunning{
			100%{background-position-x: -965px;}
		}

		@keyframes leftRunning{
			100%{background-position-x: -165px;}
		}

		/* SCORE BAR */

		.topline-mario{
			position:absolute;
		}
		.topline-world{
			position:absolute;
			left:55%;
		}
		.topline-time{
			position:absolute;
			left: 85%;
		}
		#bottomline-score{
			position:absolute;
			top: 90px;
		}
		#bottomline-coin{
			position:absolute;
			top: 80px;
			left:30%;
		}
		.bottomline-world{
			position:absolute;
			top: 90px;
			left:55.7%;
		}
		.bottomline-time{
			position:absolute;
			top: 90px;
			left:85.5%;
		}
		.scorebar{    
			position: absolute;
			height: 120px;
			width:100%;    
			z-index: 10;
			font-family: 'Press Start 2P', cursive;
			font-size: 180%;
			color: white;

			padding-left: 50px;
			padding-right: 50px;
			line-height: 0.2;
		}

		div#block {
			position: absolute;
			width: 50px;
			height: 50px;
			left: 789px;
			top: 419px;
			z-index: 3;
		}

		#coin {
			position: absolute;
			z-index: -1;
			bottom: 10px;
			width: 24px;
			left: 13px;
			

		}
		#coin.active{
			animation: flip 0.5s normal;
			animation-fill-mode: forwards;
		}


	@keyframes flip {
		0%   {     bottom: 10px; }
		50%   { bottom:100px; }
		100% { bottom:10px; }
	}