*{
	padding: 0;
	margin: 0;
}

#screen{
    margin: 0 auto;
    background-color: black;
    width: 502px;
    height: 202px;
    padding: 4px;
}

#background{
		transition-duration: 1s;
		overflow: hidden;
}

#background.run{
		animation: start 3s 1 linear;
}

   @keyframes start{
   0%{  transform: rotatey(0deg) rotateX(90deg) scale(0.9);}
   25%{  transform: rotatey(40deg) rotateX(90deg) scale(0.5);}
   50%{  transform: rotatey(0deg) rotateX(89deg) scale(0.5);}
   75%{  transform: rotatey(0deg) rotateX(45deg) scale(0.75);}
   100%{  transform: rotatey(0deg) rotateX(0deg) scale(1.0);}
   }
   

#game{
	transition-duration: 1s;
	width: 500px;
	height: 200px;
	border: 1px solid black;
	background-image: url(../media/wolken.jpg);
    background-size: contain;
    background-repeat-x: repeat;
    background-position-x: 185px;
    filter: grayscale(0.9);
	animation: clouds 10s infinite linear;
	margin: 0 auto;
	border-radius: 5px;
	overflow:hidden;
}

#game.stop{
	opacity:0.9;
}

#game.dead{
	background-blend-mode: color;
    background-color: #000000a6;
}

#game-over{
	color: red;
    font-size: 20px;
    text-align: center;
    font-weight: 700;
    position: relative;
    top: 130px;
    transition-duration: 5s;
	opacity:0;
}

#game-over.run{
	color: white;
    font-size: 50px;
	top: 0px;
	opacity:1;
}

.stop{
	animation-play-state: paused!important;
}

#character{
	width: 20px;
	height: 50px;
	background-color: red;
	position: relative;
	top: 150px;
	left: 10px;
	border-radius: 9px;
	transition-duration: 600ms;
}

#character.animate{
/* top: 100px; */
}

#game.dead #character{
    transform: rotateZ(-90deg);
	top:190px;
}

#character #belly{
    width: 20px;
    height: 50px;
    background-color: red;
    position: relative;
    top: -20px;
    border-radius: 9px;
    transition-duration: 600ms;
}

#character #head{
    position: relative;
    top: -20px;
    height: 20px;
    width: 20px;
    background: yellow;
    border-radius: 25px 0 25px 25px;
	transition-duration: 550ms;
	border-radius: 25px 11px 25px 25px;
	transform: rotate(50deg)
}

/* #character.animate #belly{ */
/* animation: jump 600ms linear; */
/* } */

#character.animate #head{
animation: jump2 550ms linear;
}

#character.animate{
animation: jump 600ms linear;
}

#jump{
	width: 95%;
    margin: 2% 0;
}

#block{
	width: 20px;
	height: 20px;
	background-color:blue;
	position: relative;
	top: 130px;
	left: 480px;
	animation: roll 500ms infinite linear;
}

#block.run{
	animation: block 3s infinite linear;
}

@keyframes roll{
0% {transform: rotate(90deg);}
50% {transform: rotate(45deg);}
100% {transform: rotate(00deg);}
}

@keyframes block{
	0%{left:600px;transform: rotate(90deg);}
	10% {transform: rotate(45deg);}
	20% {transform: rotate(0deg);}
	30% {transform: rotate(-45deg);}
	40% {transform: rotate(-90deg);}
	50% {transform: rotate(-135deg);}
	60% {transform: rotate(-180deg);}
	70% {transform: rotate(-225deg);}
	80% {transform: rotate(-270deg);}
	90% {transform: rotate(-315deg);}
	100%{left:-80px;transform: rotate(-365deg);}
}

 @keyframes jump{
	 0%{top:150px}
	 30%{top:100px}
	 70%{top:100px}
	 100&{top:150px}
 } 
 
 @keyframes jump2{
	 0%{top: -20px;transform: rotate(10deg)}
	 35%{top: -25px}
	 65%{top: -25px}
	 100&{top: -20px;transform: rotate(80deg)}
 }
 
  @keyframes clouds{
	 0%{background-position-x: 199px;}
	 100%{background-position-x: 0px;}
 }
 
 

 #punkte{
 width: 150px
 }
 
 #progress{
	position: absolute;
    left: 15px;
    top: 10px;
    z-index: 10;
    color: white;
    display: flex;
 }
 
 #levelanzeige{
 display: flex;
 width: 100px;
 }
 
 #punkte{
	/* position: relative; */
    /* left: 15px; */
    /* top: 30px; */
    /* z-index: 10; */
    /* color: white; */
}
 
 #counter{
    display: contents;
 }
 
 .knopf{
    padding: 5px 20px;
    background: #202020;
    color: white;
    border: solid 2px;
    border-radius: 15px;
	cursor: pointer;
}

.knopf:hover{
    padding: 5px 20px;
    background: white;
    color:  #202020;
    border: solid 2px black;
    border-radius: 10px;
	box-shadow: 0px 0px 4px 4px #01505e;
}

.pressed{
		transform: scale
}

.gameplay{
width: 500px;
margin: 0 auto;	
}

.gameboy{
	background-color: grey;
    margin: 0 auto;
    border-radius: 25px;
	padding-top: 20px;
	max-width: 600px;
	box-shadow: inset 0 0 5px 2px black;
}

.empty-space{
	height:50px;
}

body{
	background:black;
}

@media only screen and (max-width: 700px) {
	.gameboy{
		overflow: hidden;
		max-width: 600px;
		margin: 0 10%!important;
		padding: 3% 4% 2% 2%;
	}

	.gameplay{
	width: 100%!important;
	}

	#screen {
		width: 164%;
		position: relative;
		left: -32%;
		transform: scale(0.6);
	}

	#game {
		width: 99%;
	}
	.knopf{
		height: 50px;
	}
}