.animated-gradient-background {
  --animated-background-color-one: #301533;
  --animated-background-color-three: #4f45a3;
  --animated-background-color-four: hsl(180, 96%, 17%);

  background: linear-gradient(
    -40deg,
   var(--animated-background-color-one),
   var(--animated-background-color-three),
   var(--animated-background-color-four)
  );

  background-size: 200% 200%;
  animation: animated-gradient-background 14s linear infinite;
}

.animated-gradient-background-morph {
  height: 620px;
  width: 690px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  animation: animated-gradient-background-morph 9s ease-in-out infinite;
  pointer-events: none;
}

@keyframes animated-gradient-background {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes animated-gradient-background-morph {
  0%, 100% { border-radius: 60% 40% 30% 70%/60% 30% 70% 40%; }
  50% { border-radius: 30% 60% 70% 40%/50% 60% 30% 60%; }
}