.button-card {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f1f1f1;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #3f51b5; /* Set the initial font color to blue */
}

.button-card .inner-card {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  transition: transform 0.3s;
  transform-style: preserve-3d;
}

.button-card .front-face {
  background-color: #eee;
  transform: rotateY(180deg);
}

.button-card .back-face {
  background-color: #3f51b5; /* Updated color to blue */
  transform: rotateY(0deg);
  color: #3f51b5; /* Set the font color back to blue after flipping */
}

.button-card.flipped .inner-card {
  transform: rotateY(180deg);
}

.button-card.flipped .front-face {
  transform: rotateY(0deg);
}

.button-card.flipped .back-face {
  transform: rotateY(-180deg);
  color: #f1f1f1; /* Set the font color to match the back color */
}

.button-card.matched {
  background-color: #4caf50; /* Updated color to green */
}