@font-face { 
	font-family: 'Muli';
	src: url("fonts/Muli/Muli-Regular.ttf"); 
}

@font-face { 
	font-family: 'Muli';
	font-weight: bold;
	src: url("fonts/Muli/Muli-Bold.ttf"); 
}



@media (orientation: portrait) {
	
	html, body {
		font-family: 'Muli';
		display: flex !important;
		text-align: center;
		font-size: 29px !important;
	}
	
	body::after {
		font-family: 'Muli';
		font-weight: bold;
		content: 'Bitte Handy drehen!';
		font-size: 29px !important;
		margin: auto;
	}
	
	#mainWrapper {
		display: none !important;
	}
	
	/*
	body {
		transform: rotate(90deg);
	}
	*/
}

.rotate-90 {
    transform: rotate(90deg);
}

*
{
   /*border: 1px solid #0F0; */
   font-family: 'Muli';
}

body {
	width: 100%;
	height: 100vh;
	position: fixed;
	overflow: hidden;
}

.alleWrapper{
	display: none;
}

#mainWrapper{
	width: 100%;
	height: 100vh;
	display: none;
}	

#uebungWrapper{
	display: none;
	width: 100%;
	height: 100vh;
	position: absolute;
	background: url('../images/uebungSeite/Etappe_1_links.png'), url('../images/uebungSeite/Etappe_1_rechts.png') no-repeat;
	background-position: left top, right top;
	background-size: 8%;
	background-repeat: repeat-y;
	background-color:#FFC;
}

#geschafftWrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 2% 10%;
    /*background: url("../images/Geschafft/Etappe_1_cool_links.png") no-repeat, url("../images/Geschafft/Etappe_1_cool_rechts.png") no-repeat;*/
	background-position: left top, right top;
	/*background-size: 27% 100vh;*/
    background-size: contain;
}


#fehlgeschlagenWrapper {
	position: relative;
	width: 100%;
	height: 100vh;
	padding: 5% 10%;
	background-position: left top, right top;
	background-size: contain;
}


#debug_div {
    display: none;
}