/* Keyframe animations */
@keyframes popupFadeIn {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popupFadeOut {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}


@keyframes fadeGreen {
    0% {
        transform: scale(1);
        background-color: #b0eac2;
    }
    50% {
        transform: scale(1.01);
        background-color: #aef8c3;
    }
    100% {
        transform: scale(1);
        background-color: #b0eac2;
    }
}


@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Keyframes for slide-in animation */
@keyframes slideIn {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Apply fade-in animation */
.fade-in {
  animation: fadeIn 0.5s ease-in-out;
}

/* Apply slide-in animation */
.slide-in {
  animation: slideIn 0.5s ease-in-out;
}