#grid {
  scroll-timeline:
    --grid-scroll-x x,
    --grid-scroll-y y;
}

@keyframes horizontal {
  from {
    left: 49%;
  }
  to {
    left: 51%;
  }
}

@keyframes vertical {
  from {
    top: 70%;
  }
  to {
    top: 30%;
  }
}

#background {
  pointer-events: none;
}

#background .sun {
  animation:
    horizontal linear,
    vertical linear;
  animation-timeline: --grid-scroll-x, --grid-scroll-y;

  position: absolute;
  width: 100px;
  height: 100px;
  background: url("../assets/noise.svg");
  background-color: rgb(220 226 11 / 50%);
  box-shadow: 0 0 26.1px 25px rgb(220 245 31 / 25%);
  border-radius: 50px;

  @media (prefers-color-scheme: dark) {
    border-radius: 50px;
    background-color: rgba(226, 147, 11, 0.5);
    box-shadow: 0 0 26.1px 25px rgba(226, 159, 66, 0.25);
  }
}