*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body{
	background-color: #333;
	display: flex;
	justify-content: center;
	align-items: center;
	height:100vh;

}

#game {
	width:640px;
	height:640px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
perspective: 1000px;


}
.card {
	width: calc(25% - 35px);
	height: calc(33.333% - 35px);
position: relative;
	margin:5px;
	transform-style: preserve-3d;
	transform: scale(1);
	transition: transform .5s;

}
.card:active{
	transform: scale(0.90);
	transition: transform .2s;
}
.back-face{
	padding:20px;
}
.front-face,.back-face{
	width: 100%;
	height: 100%;

	position: absolute;
	border-radius: 1vmin;
	background: #444;
	backface-visibility: hidden;

}
.front-face {
	transform: rotateY(180deg);
}

.card.flip{
	transform: rotateY(180deg);
}