.gradient-background {
  background: linear-gradient(69deg, #100f2e, #181030, #281435, #331639, #40193d, #461b40, #491b40, #65285b, #181030);
  background-size: 480% 480%;
  animation: gradient-animation 8s ease infinite;
}

.gradient2-background {
  background: linear-gradient(69deg,#19255a,#332568,#262561,#492474,#5d247e,#662483);
  background-size: 360% 360%;
  animation: gradient-animation 24s ease infinite;
}

@keyframes gradient2-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

  .animate-infinite-scroll {
    display: flex;
    white-space: nowrap;
    animation: infinite-scroll 10s linear infinite;
  }


.bubble {
	position: absolute;
	border-radius: 50%;
	opacity: 0.1;
	transition: background-color 0.3s ease-in-out;
	will-change: transform;
}

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

@layer utilities {
  @keyframes infinite-scroll {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }
}

@keyframes float {
	0% {
		transform: translateY(100vh) translateX(0);
	}

	100% {
		transform: translateY(-100vh) translateX(calc(sin(var(--random-offset)) * 50px));
	}
}