CT/src/base.css

#home-page {
  --background-transparent: hsla(0, 0%, 100%, 40%);
  --surface: hsla(0, 0%, 100%, 40%);
  --surface-hover: hsla(0, 0%, 91%, 40%);
  --surface-active: hsla(0, 0%, 78%, 40%);
}

@media (prefers-color-scheme: dark) {
  #home-page {
    --background-transparent: hsla(0, 0%, 5%, 30%);
    --surface: hsla(0, 0%, 5%, 30%);
    --surface-hover: hsla(0, 0%, 20%, 30%);
    --surface-active: hsla(0, 0%, 44%, 30%);
  }
}

#background {
  position: fixed;

  top: -120px;
  left: -120px;
  right: -120px;
  bottom: -120px;

  z-index: -1;
  pointer-events: none;

  filter: blur(60px);
  opacity: 0.2;
}

#background::after,
#background::before {
  content: "";

  position: fixed;

  z-index: -1;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  #background {
    background-image: linear-gradient(
      120deg,
      hsla(210, 100%, 50%, 50%),
      hsla(210, 100%, 50%, 35%),
      transparent 40%
    );
  }
}

@media (prefers-color-scheme: light) {
  #background {
    background-image: linear-gradient(
      120deg,
      hsla(210, 100%, 50%, 50%),
      hsla(210, 100%, 50%, 25%)
    );
  }

  #background::before {
    top: -130%;
    left: -150%;
    right: -800%;
    bottom: -20%;

    background-image: radial-gradient(
      transparent 60%,
      hsla(110, 100%, 40%, 50%) 60%,
      hsla(110, 100%, 20%, 40%)
    );
  }

  #background::after {
    top: -100%;
    left: 0%;
    right: -500%;
    bottom: -50%;

    background-image: radial-gradient(
      transparent 70%,
      hsla(110, 100%, 30%, 90%) 70%,
      hsla(110, 100%, 10%, 70%)
    );
  }
}