@media (display-mode: browser) {
  #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;
}

main {
  z-index: 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%, 60%),
      hsla(210, 100%, 50%, 55%),
      transparent 60%
    );
  }
}

@media (display-mode: standalone) {
  @media (prefers-color-scheme: dark) {
    #background {
      background-image: linear-gradient(
        120deg,
        hsla(210, 100%, 50%, 80%),
        hsla(210, 100%, 50%, 75%),
        transparent 60%
      );
    }
  }
}

@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%)
    );
  }
}