body {
  margin: 0;
  background: #5872af;
  font-family: Arial, sans-serif;
  color: white;
  text-align: center;
}

h1 {
  margin: 30px 0;
}

.cards {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  padding: 20px;
}

.card {
  width: 220px;
  height: 320px;
  perspective: 1000px;
  cursor: pointer;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s;
}

.card-face {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: bold;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center;
}

.front {
  background-color: darkgreen;
  transform: rotateY(0deg);
}

.middle {
  background-color: teal;
  transform: rotateY(180deg);
}

.back {
  background-color: darkred;
  transform: rotateY(360deg); 
}

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

.card.clicked .card-inner {
  transform: rotateY(360deg);
}

.card.clicked:hover .card-inner {
  transform: rotateY(360deg);
}

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

.card.clicked .card-inner {
  transform: rotateX(180deg);
}

.card.clicked:hover .card-inner {
  transform: rotateX(180deg);
}

@media (max-width: 600px) {
  .cards {
    flex-direction: column;
    align-items: center;
  }
}




.card:nth-child(1) .middle {
  background-image: url('../img/link.png');
}

.card:nth-child(2) .middle {
  background-image: url('../img/Prince_Sidon_from_Zelda.png');
}

.card:nth-child(3) .middle {
  background-image: url('../img/250px-Zelda_SSB4.png');
}


.card .back {
  background-image: url('../img/ganon.png');
}
#counter-container {
  margin: 20px;
}

#reset-btn {
  background-color: gold;
  border: none;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

#reset-btn:hover {
  background-color: orange;
}