.container {
  text-align: center;
  margin-top: 20px;

}

.container show {
  margin: 0px;
  padding: 10px 20px;
}


@keyframes fadeIn {
  to {
    opacity: 4;
  }
}

@keyframes smoothPopIn {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.8);
  }

  60% {
    opacity: 0.6;
    transform: translateY(-10px) scale(1.05);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.custom-animate {
  animation: fadeSlide 1s ease-in-out;
}

body {
  margin: 0;
  padding: 0;
  max-height: fit-content;
  background-color: rgb(237, 210, 230);
  background-size: 800% 800%;
  background: linear-gradient(-45deg, #ff6ec4, #7873f5, #4ade80, #fdff00);
  background-size: 400% 400%;
  animation: gradientMove 3s ease infinite;
  font-family: 'Segoe UI', sans-serif;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}