CT/src/base.css

/* Animation */
#home-page,
#home-page #chat-section,
#chat-page,
#chat-page #main > div {
  animation: slide-up var(--animation-duration) ease;
}

/* Gradient */

#background-wrapper {
  position: fixed;

  top: 0px;
  left: var(--safe-area-left);
  right: var(--safe-area-right);
  bottom: 0px;

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

  overflow: hidden;

  opacity: 0.3;
}

main {
  z-index: 2;
}

#background-wrapper div {
  content: "";

  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;

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

  filter: blur(40px);
}

#background-wrapper #sky {
  left: -100%;
  bottom: -50%;

  --color-1: hsl(188, 100%, 83%);
  --color-2: hsl(194, 72%, 56%);
  background-image: radial-gradient(var(--color-1), var(--color-2));
}

#background-wrapper #grass-1 {
  --color-1: hsl(150, 100%, 30%);
  --color-2: hsl(150, 100%, 25%);

  background-image: linear-gradient(
    350deg,
    var(--color-1),
    var(--color-2) 30%,
    transparent 40%
  );
}

#background-wrapper #grass-2 {
  --color-1: hsl(110, 100%, 40%);
  --color-2: hsl(110, 100%, 35%);

  background-image: linear-gradient(
    9deg,
    var(--color-1),
    var(--color-2) 30%,
    transparent 35%
  );
}

@media (prefers-color-scheme: dark) {
  #background-wrapper {
    opacity: 0.2;
  }

  #background-wrapper #sky {
    --color-1: hsl(188, 100%, 30%);
    --color-2: hsl(194, 72%, 24%);
  }

  #background-wrapper #grass-1 {
    --color-1: hsl(120, 30%, 30%);
    --color-2: hsl(120, 30%, 24%);
  }

  #background-wrapper #grass-2 {
    --color-1: hsl(110, 60%, 30%);
    --color-2: hsl(110, 50%, 24%);
  }
}