.memory-centered {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 4rem 20% 1rem 20%;
}

.game-logic-visual {
  color: white;
  font-size: 30px;
}

.memory-game {
  width: 50vw;
  height: 50vw; /* Fixed size for memory game, this used 50% of the viewport width */
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px; /* Dynamic rotation */
}

.memory-aligned {
  display: flex;
  column-gap: 1rem; /* Space inbetween */
  justify-content: center;
}

.memory-card {
  width: calc(25% - 10px); 
  height: calc(33.333% - 10px); /* Creates an aspect ratio for each card */
  margin: 5px;
  position: relative;
  transform: scale(1);
  transform-style: preserve-3d; /* A new property that corrects some issues with 3d rotation */
  transition: transform .2s; /* Time for the card to rotate. Making this longer increases the difficulty */
  box-shadow: 1px 1px 1px rgba(0,0,0,.3);
}

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

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

/* Styling of the cards using this to round off the edges */
.front-face,
.back-face {
  width: 100%;
  height: 100%;
  position: absolute;
  border-radius: 5px;
  backface-visibility: hidden;
}

/* Using rotation to flip the cards around */
.front-face {
  transform: rotateY(180deg);
}

/* Responsiveness */
@media screen and (max-width:900px) { 
 
  .memory-centered {
    padding: 1rem 5% 1rem 5%;
  }

  .memory-game { /* Added responsiveness */
    width: 90vw;
    height: 90vw; 
  }
  
}