* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
.btn-replay{
	position: absolute;
}
/*body{*/
.window-body{
	height: 100vh;
	/* display flex makes child items, 
		the so called flex-items ordered by the
		group and source order hierachy
		if order property of flex item is set to 0
		they all belong to the same group

		we can randomize the order property of each card
		and thus shuffle the cards on each site refresh
	*/
	display: flex;
	background: #060AB2;
}
.memory-game{
	width: 640px;
	height: 640px;
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	/*
	By setting display: flex to the body and margin: auto to the .memory-game container, 
	it will be centered both vertically and horizontally.

	.memory-game will also be a flex-container. 
	By default, the items are set to shrink in width to fit the container.
	By setting flex-wrap to wrap, flex-items wrap along multiple lines, 
	accordingly to their size.
	*/

	/* define how far the object isin the z pane from the user */
	perspective: 1000px;
	
}
.memory-card{
	/* calculate width of each memory card via calc() function */
	width: calc(25% - 10px);
	height: calc(33.333% - 10px);
	margin: 5px;
	
	/* let card positions be relative to their parent .memory-game */
	position: relative;
	box-shadow: 1px 1px 1px rgba(0,0,0,.3);

	/* add a click effect */
	transform: scale(1);

	/* to position them in the 3D space created in the parent, instead of flattening it to the z = 0 plane (transform-style). */
	transform-style: preserve-3d;

	/* also add a transition so that we have a turn animation */
	transition: transform .5s;

}
.front-face,
.back-face {
	width: 100%;
	height: 100%;

	padding: 20px;

	/* pull together back and front face */
	position: absolute;
	

	border-radius: 5px;
	background: #1C7CCC;

	backface-visibility: hidden;


}
.front-face{
	transform: rotateY(180deg);
}
.memory-card:active{
	transform: scale(0.97);
	transition: transform .2s;
}
/* flip class rotates the memory card by 180 degrees on Y axis */
.memory-card.flip{
	transform: rotateY(180deg);
}