/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ALLGEMEIN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



body {

	background-color: white;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	MAC
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#VINTAGE {

	display: block;

	position: absolute;

	top: 0%;
	left: 0%;

	height: 110%;
	width: 100%;

	background-image: url(../images/vintage/old_mac.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 1200px auto;

	transform-origin: center center;

	z-index: 1;
}



#VINTAGE div {

	position: absolute;

	height: 19px;
	width: 19px;

	top: 50%;
	left: 50%;

	margin-top: 280px;
	margin-left: 280px;

	transform: scale(0.5);

	border-radius: 100%;

	background-color: #70ff00;

	opacity: 0;

	animation: aufblinken 1s 1s forwards;

	filter: blur(4px);



}


#VINTAGE_SCREEN_COVER {
	
	position: absolute;
	
	zoom: .6;
	
	height: 540px;
	width: 670px;
	
	top: 165px;
	left: 50%;
	
	margin-left: -333px;

	background-image: url(../images/vintage/screen_cover.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;

	transform-origin: center center;

	z-index: 3;
	
}


#VINTAGE_SPACE_BAR, #VINTAGE_LEFT_KEY, #VINTAGE_RIGHT_KEY {
	
	
	position: absolute;
	
	zoom: .6;
	
	z-index: 3;
	
	top: 1126px;
	left: 50%;
	
	margin-left: -299px;
	
	display: none;
	
	
}


#VINTAGE_LEFT_KEY {
	
	margin-left: -478px;
	
	
}


#VINTAGE_RIGHT_KEY {
	
	margin-left: 372px;
	
	
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TRACK
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



#TRACK {

	position: absolute;
	
	zoom: .6;
	
	height: 525px;
	width: 650px;
	
	top: 175px;
	left: 50%;
	
	margin-left: -325px;
	
	background-color: lightgreen;

	filter: sepia(0%);
	
	overflow: hidden;

	opacity: .9;
	
	z-index: 2;

}





/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	CANYON
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#CANYON {


	top: -100%;


}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	BRIDGE (NO BRIDGES FOR DESKTOP)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#CANYON #BRIDGE {

	opacity: 0;
	margin-left: -1000px;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ROCK
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/




#ROCK {

	height: 30%;
	width: 30%;

	top: -100%;

}


.rock_shadow {

	height: 200px;



}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	GRID
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#GRID {

	height: 200%;
	width: 100%;

	top: -100%;
	
	background-image: url(../images/grass_desktop.png);

}


#GRID div {

	height: 50%;
	width: 100%;

	border-top: 5% solid rgba(0,0,0,.1);



}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	JUMP POWER INDICATOR CIRCLE
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#POWER_CIRCLE {

	height: 300px;
	width: 300px;
	
	top: 50%;
	left: 50%;

	margin-top: -150px;
	margin-left: -150px;
}


#POWER_CIRCLE div {

	height: 300px;
	width: 300px;

}






/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	RESTART + HIGHSCORE BUTTON
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#SCORE, #HIGHSCORE, #EXTRASCORE {
	
	top: 240px;
	
	zoom: .6;
}



#EXTRASCORE {
	
	top: 500px;

}


#RESTART_BUTTON, #HIGHSCORES_BUTTON  {

	width: 80px;

	top: 200px;
	left: 50%;
	
	margin-left: -40px;


}




#HIGHSCORES_BUTTON, #SETTINGS_BUTTON {

	top: 580px;
	left: calc(50% + 220px);
	
	zoom: .6;

}

#SETTINGS_BUTTON {

	left: calc(50% - 220px);
}

@keyframes show_extrascore {

	0% { top: 500px; opacity: 1; }
	100% { top: 240; opacity: 0; }

}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	TAP HINT
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#spacebarhint, #cursorhint, #mobile_taphint, #mobile_swipehint {


	top: 260px;
	
	z-index: 3;


}







/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	SCREEN CRACKS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.crack {

	height: 100%;


}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	ÜBERLEGFENSTER
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/



iframe {

	
	border-radius: 35px;
	
	height: 308px;
	width: 384px;
	
	margin-top: 10px;
	margin-left: 1px;

	
}
	
#SCHLIESSKNOPF {
	
	zoom: .8;

	margin-left: -70px;
	margin-top: 40px;


}	



/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	FIREFOX	FIXES
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

@-moz-document url-prefix() {
  
	#TRACK {
	
		top: 0px;
		-moz-transform: scale(.6);
	
	}
	
	#VINTAGE_SCREEN_COVER {
		
		top: -10px;
		-moz-transform: scale(.6);
		
	}
	
		
	#HIGHSCORES_BUTTON {
	
		visibility: hidden;
	
	}
	
	
	
}