@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 control */
    background-size: calc(100vw/12) calc(100vh/1);
    background-image: 
      repeating-conic-gradient(
        from calc(var(--osc-sin) * 90deg), 
        white 0deg 60deg,
        black 10deg 120deg,
        white 20deg 180deg
      ),
      repeating-conic-gradient(
        from calc(var(--osc-saw) * 90deg), 
        red 0deg 30deg,
        green 10deg 60deg,
        blue 20deg 90deg
      ),
      repeating-conic-gradient(
        from calc(var(--osc-cos) * 180deg), 
        red 0deg 60deg,
        green 10deg 120deg,
        blue 20deg 180deg
      ),
      repeating-conic-gradient(
        from calc(var(--osc-sin) * 360deg), 
        red 0deg 90deg,
        green 10deg 180deg,
        blue 20deg 270deg
      )
    ;
  }
}

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

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