body {
  cursor: url("icon/Banana.cur") 20 20, auto;
  
}


body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #ffffc8;
}
.memory-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.memory-card {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

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

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

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card-front {
  background-color: #fff;
}

.card-back {
  background-color: #e18676;
  transform: rotateY(180deg);
}

img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #faffcf;
}

.memory-card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Adjust the gap between cards as needed */
}

.memory-card {
  width: 200px;
  height: 300px;
  perspective: 1000px;
}

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

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

.card-front,
.card-back {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.card-front {
  background-color: #fff;
}

.card-back {
  background-color: #cb796a;
  transform: rotateY(180deg);
}

img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}


.moving-element {
  width: 50px;
  height: 50px;
  background-color: #ff6347; /* Reddish color, you can change it */
  position: absolute;
  animation: moveAcross 10s linear infinite; /* Adjust duration (10s) as needed */
}

@keyframes moveAcross {
  0% {
      left: -50px;
  }
  100% {
      left: 100%; /* Move the element to the right edge of the viewport */
  }
}

.moving-gif {
  width: 50px; /* Adjust the width and height as needed */
  height: auto; /* Automatically scales the height to maintain aspect ratio */
  position: absolute;
  animation: moveAcross 10s linear infinite; /* Adjust duration (10s) as needed */
}

@keyframes moveAcross {
  0% {
      left: -50px;
  }
  100% {
      left: 100%; /* Move the element to the right edge of the viewport */
  }
}