:root {
  --color-a: #f78d2b;
  --color-b: #eb6cc5;
  --color-c: #af032e;
}

@property --color-a {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-b {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

@property --color-c {
  syntax: "<color>";
  inherits: true;
  initial-value: transparent;
}

#page__background_gradient {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    45deg,
    var(--color-a),
    var(--color-b),
    var(--color-c)
  );
  opacity: 0.5;
  transition: --color-a 3s, --color-b 3s, --color-c 3s;
}

#page__background_gradient::before,
#page__background_gradient::after {
  content: "";
  position: absolute;
  width: 70%;
  height: 50%;
  background: linear-gradient(45deg, var(--color-a), var(--color-b));
  filter: blur(100px) brightness(1.25);
  border-radius: 50px;
  transform-origin: 60%;
}

#page__background_gradient::before {
  left: 20%;
  top: 10%;
  animation: gradient-background-blob 20s infinite
    cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

#page__background_gradient::after {
  left: 40%;
  top: 30%;
  width: 70%;
  height: 80%;
  animation: gradient-background-blob 25s infinite
    cubic-bezier(0.215, 0.61, 0.355, 1) reverse;
}

@keyframes gradient-background-blob {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  30% {
    transform: rotate(20deg);
  }
  50% {
    transform: translate(150px, 195px) scale(1.1);
  }
  80% {
    transform: rotate(45deg);
  }
}