* {

  box-sizing: border-box;
}

/*
box-sizing: 
  content-box --> default; padding and border are added to initial size => total width and height get bigger
  border-box --> original size remains, padding and border shrink space for content
box-sizing does not apply to margins!
*/

#memory-content {
  height: 100vh;
  padding: 0;
  padding-bottom: 10%;
  margin: 0;
  background: #000066;
  background-image: linear-gradient(0deg, #c3c3c3, #000066);

}

#memory-content h1 {
  text-align: center;
  color: #1c7ccc;
  font-family: 'Press Start 2P';
}

/*
viewport: visible area of the website
vh: viewport height
vw: viewport width
--> The unit vh corresponds to 1% of the viewport height 
    => 100vh means the body will take 100% of the abailable height space.
*/

.memory-game {
  width: 80%;
  height: 60%;
  /*width: 640px;
  height: 640px;*/
  margin: auto; /* vertically and horizontally center in the flexbox */
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

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

  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */      
}

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

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

.front-face, .back-face {

  padding: 20%;
  position: absolute;
  border-radius: 5px;
  background: #1c7ccc;
  /*Each Element has a backface which is its inverted front face*/
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  display: flex; 
  justify-content: center; 
  align-items: center;

  object-fit: contain;
	width: 100%; 
	height: 100%;
}


.front-face {
  font-size: 10vw;
  text-align: center;

  transform: rotateY(180deg);
}

@media (min-width: 576px) {

  .memory-game {
    height: 80%;
  }
}