/* Body background gradient animation */
body {
  background: none;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  position: relative;
}

/* Background container */
.background {
  position: fixed; /* Changed to fixed so it stays in place during scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Ensures the background doesn't interfere with user interactions */
  overflow: hidden;
  background: #f9f9f9 ;
  
}

/* Background gradient animation */
.background::before {
  position: fixed;
  width: 200%;
  height: 100%;
  background-size: 100% 400%;
  animation: Gradient 15s ease infinite;
}

/* Decorative morphing and spinning elements */
.background::after {
  content: "";
  position: fixed;
  width: 105vmax;
  height: 105vmax;
  background:  #9cf5ff;
  animation: morph 150s linear infinite alternate, spin 50s linear infinite;
  top: -20vmin;
  left: -75vmin;
  transform-origin: 90% 30%;
  opacity: 0.3px;
}

/* Media Queries for Responsiveness */
@media (max-width: 1200px) {
  .background::after {
    width: 60vmax;
    height: 60vmax;
    top: -15vmin;
    left: -15vmin;
  }
}

@media (max-width: 992px) {
  .background::after {
    width: 50vmax;
    height: 50vmax;
    top: -10vmin;
    left: -10vmin;
  }
}

@media (max-width: 768px) {
  .background::after {
    width: 40vmax;
    height: 40vmax;
    top: -5vmin;
    left: -5vmin;
  }
}

@media (max-width: 576px) {
  .background::after {
    width: 30vmax;
    height: 30vmax;
    top: 0;
    left: 0;
  }
}

/* Animation keyframes */
@keyframes Gradient {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@keyframes morph {
  0% { border-radius: 40% 60% 60% 40% / 70% 30% 70% 30%; }
  100% { border-radius: 40% 60%; }
}

@keyframes spin {
  to { transform: rotate(1turn); }
}