body {
  margin: 0;
  background: url('https://img.freepik.com/free-vector/hanging-style-percentage-sign-banner-accounts-statistic_1017-60880.jpg?semt=ais_hybrid&w=740&q=80') no-repeat center center fixed;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  font-family: sans-serif;
}

/* Perspective for flip animation */
#cardContainer {
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

/* Card */
#card {
  width: min(85vw, 320px); /* responsive size */
  aspect-ratio: 5 / 8; /* real card ratio */
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.8s ease;
  cursor: pointer;
  border-radius: 16px;
  
}

/* Flip on class */
#card.flipped {
  transform: rotateY(180deg);
}

/* Card sides */
.card-side {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  backface-visibility: hidden;
  overflow: hidden;
 
}

.card-side.back {
  transform: rotateY(180deg);
}

/* Canvas for images */
canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}

/* Mobile adjustments */
@media (max-height: 600px) {
  #card {
    width: 80vw;
  }
}

/* Tablets / larger phones */
@media (min-width: 768px) {
  #card {
    width: 300px;
  }
}