@import "https://unpkg.com/osc-css";

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: var(--osc);

    /* incorporating primes to repeat less often */
    --osc-sin-frequency: calc(1 / 30);
    --osc-saw-frequency: calc(1 / 50);
    --osc-cos-frequency: calc(1 / 70);

    /* change blend for other interesting aesthetics */
    background-blend-mode: screen;

    /* using fractions to make it easier to play around with */
    background-size: 
      calc(100% / 1) calc(100% / 7),
      calc(100% / 5) calc(100% / 3),
      calc(100% / 7) calc(100% / 1)
    ;

    background-image: repeating-conic-gradient(
        from calc(var(--osc-saw) * 90deg) in display-p3,
        red 30deg,
        green 60deg,
        blue 90deg
      ),
      repeating-conic-gradient(
        from calc(var(--osc-cos) * 180deg) in display-p3,
        red 60deg,
        green 120deg,
        blue 180deg
      ),
      repeating-conic-gradient(
        from calc(var(--osc-sin) * 360deg) in display-p3,
        red 90deg,
        green 180deg,
        blue 270deg
      );
  }
}

@layer support {
  * {
    box-sizing: border-box;
    margin: 0;
  }

  body,
  html {
    block-size: 100%;
    color-scheme: dark light;
  }
}