* {
	box-sizing: border-box;
}

div {
	text-align: center;
}


@media (orientation: portrait) {
	html, body {
		font-family: 'Muli';
		display: flex !important;
		text-align: center;
		font-size: 29px !important;
		margin: auto;
		justify-content: center;
	}
	
	body::after {
		font-family: 'Muli';
		font-weight: bold;
		font-size: 29px !important;
		margin: auto;
	}
	
	.content::after {
		content: 'Bitte Handy drehen!';
		font-family: 'Muli';
		font-weight: bold;
	}
	
	#number, #point, .card  {
		display: none !important;
	}
	
}


body {
	display: flex;
	height: 100vh;
    align-items: center;
    align-content: center;
    padding: 0;
    margin: 0;
	background: #FDE29E;
}
	


.content {
	display: flex;
	flex-flow: column;
	width: 100%;
	max-width: 150vh;
	margin: auto;
}

.number, .point {
	position: absolute;
	width: calc(8.9vmin + 0.6vmax);
	transform: translate(-0%, -50%);
	/*max-width: 60px;*/
}

.number > img, .point > img {
	width: 100%;
}


.card {
	padding: 6%;
}

.card > img {
	width: 59%;
}



[draggable=true] {
	cursor: move;
}


#number1{
	left: 10%;
}
#number2{
	left: 17%;
}
#number3{
	left: 24%;
}
#number4{
	left: 31%;
}
#number5{
	left: 38%;
}
#number6{
	right: 38%;
}
#number7{
	right: 31%;
}
#number8{
	right: 24%;
}
#number9{
	right: 17%;
}
#number10{
	right: 10%;
}

#spielplan {
	width: 100%;
}                              

#point11{
	left: 10%;
}
#point12{
	left: 17%;
}
#point13{
	left: 24%;
}
#point14{
	left: 31%;
}
#point15{
	left: 38%;
}
#point16{
	right: 38%;
}
#point17{
	right: 31%;
}
#point18{
	right: 24%;
}
#point19{
	right: 17%;
}
#point20{
	right: 10%;
}


.back_arrow {	
	position: absolute;
    right: 25px;
    bottom: 25px;
    width: calc(22px + 3.2vmin);
    height: calc(19px + 2.2vmin);
	transform: rotate(180deg);
}

.back_arrow > a > img {
	width: 100%;
	height: 100%;
}