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

body {
  height: 100vh;
  display: flex;
  background: #060AB2;
}

.myButton {
	background-color:#44c767;
	-webkit-border-radius:28px;
	-moz-border-radius:28px;
	border-radius:28px;
	border:1px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	padding:16px 36px;
	text-decoration:none;
	text-shadow:0px 1px 0px #2f6627;
  margin-top: auto;
  z-index: 1;
}
.myButton:hover {
	background-color:#5cbf2a;
}
.myButton:active {
	position:relative;
	top:1px;
}

        
       

.memory-game {
  width: 840px;
  height: 840px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  justify-content: last baseline;
  perspective: 1000px;
}

.memory-card {
  width: calc(25%);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: static;
  transform: scale(1);
  transform-style: preserve-3d;
  transition: transform .5s;
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.memory-card.flip {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  
}

.front-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #1C7CCC;
  backface-visibility: hidden;
}

.back-face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #0a4d88;
  backface-visibility: hidden;
}

.front-face {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  font:bold 60px serif ;
  fill: black;
}