memory-card.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*  margin isnt  included here  */
}

body {
  height: 100vh;
  background-color: #060ab2;
  display: flex;
}

.memory-game {
  height: 640px;
  width: 640px;
  display: flex;
  flex-wrap: wrap;
  /* items layed out into multiple rows */
  /*
  flex-item {
  flex : 1;  this means each 'one' of you will take the same amount of space
  }
  flex-container {
  flex-direction : row ;  being in row
  flex-wrap : nowrap; in just one row
  justify-content : flex-start; from left to right
  align-items :  stretch; stretch out into the container height
  }
  */
  margin: auto;
  perspective: 1000px;
}

.memory-card {
  /*3 rows 4 card seach*/
  width: calc(25% - 10px);
  height: calc(33.3333% - 10px);
  position: relative;
  margin: 5px;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform-style: preserve-3d;
  transition: transform 0.3s;
  -webkit-transition: transform 0.3s;
  -moz-transition: transform 0.3s;
  -ms-transition: transform 0.3s;
  -o-transition: transform 0.3s;
}

.memory-card:active {
  transform: scale(0.97);
  -webkit-transform: scale(0.97);
  -moz-transform: scale(0.97);
  -ms-transform: scale(0.97);
  -o-transform: scale(0.97);
  transition: transform 0.2s;
  -webkit-transition: transform 0.2s;
  -moz-transition: transform 0.2s;
  -ms-transition: transform 0.2s;
  -o-transition: transform 0.2s;
}

/* there is no space between the names cause they belongs to the same element */

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

.front-face,
.front-back {
  width: 100%;
  height: 100%;
  padding: 20%;
  position: absolute;
  /*it will be position relative to its parent element so we need to aply it to its parents or else it will be positioned by the parent of the parent of the parent*/
  border: 2px solid deeppink;
  background: #1c7ccc;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  /* every element in html has a backface or a mirror so we have to hide it and show our specific backface
   */
  backface-visibility: hidden;
}
.front-face {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}