body{
	box-sizing:border-box;
	text-align:center;
}
#gallerie{
	width:1200px;
	height:800px;
	overflow:auto;
	margin:auto;
	display:grid;
	grid-template-columns:repeat(5, 200px);
	grid-auto-rows: 200px;
	gap:25px;
	justify-content:center;
}
#game{
	width:1200px;
	margin:auto;
	display:grid;
	
	grid-template-rows:repeat(4, 120px);
	grid-auto-flow: column;
    grid-auto-columns: 120px;
	gap:25px;
	justify-content:center;
}
div .griditem{
	position:relative;
	transition:transform 0.5s;/*wie lange es dauert beim umkehren*/
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	background-color:beige;	
	perspective: 1000px;
	-webkit-perspective:1000px;
}

.flip{
	transform:rotateY(180deg);
	-webkit-transform: rotateY(180deg);
}
div .front,div .back{
	width:100%;
	height:100%;
	position:absolute;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;

}
div .front{
	-webkit-transform: rotateY(180deg);
	transform: rotateY(180deg);
}
div .back{/*extra bug für firefox*/
	transform: rotateX(0deg);
	-webkit-transform: rotateX(0deg);
}
img{	
	width:100%;
	height:100%;
	object-fit:contain;
}
#time{
	width:300px;
	margin:25px auto;
	font-size:2rem;
	text-align:center;
}
button{
	font-size:2rem;
	text-align:center;
}
#menu{
	width:300px;
	margin:auto;
	position:absolute;
	top:25vh;
	left:42vw;
	font-size:2rem;
	text-align:center;
}
#zeitlevel{
    color:orange;
}
#allelevel{
    color:orange;
}
#win{
	height:300px;
}