@property --bg-angle {
  inherits: false;
  initial-value: 0deg;
  syntax: "<angle>";
}

@keyframes spin {
  to {
    --bg-angle: 360deg;
  }
}


article {
  animation: spin 2.5s infinite linear paused;

  background:
    linear-gradient(
        to bottom,
        oklch(0.1 0.2 240 / 0.95),
        oklch(0.1 0.2 240 / 0.95)
      )
      padding-box, 
    conic-gradient(
        from var(--bg-angle) in oklch longer hue,
        oklch(1 0.37 0) 0 0
      )
      border-box; 
  
  border: 6px solid transparent;

  &:hover {
    animation-play-state: running;
  }
}

* {
  box-sizing: border-box;
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 18px;
  line-height: 1.45;
}

body {
  margin: 0;
}

main {
  background: 
    radial-gradient(
        circle, 
        oklch(0.15 0.2 330 / 0), 
        oklch(0.15 0.2 330 / 1)
      ),
    linear-gradient(
        344deg in oklch,
        oklch(0.3 0.37 310),
        oklch(0.35 0.37 330),
        oklch(0.3 0.37 310)
      );
  display: grid;
  height: 100svh;
  place-items: center;
}

article {
  border-radius: 1rem;
  box-shadow: 0.125rem 0.25rem 0.25rem 0.5rem oklch(0.1 0.37 315 / 0.25);
  color: white;
  padding: 1rem;
  width: min(400px, 90vw);

  & h1 {
    line-height: 1.1;
    margin: 0;
  }

  & p {
    margin: 0.75rem 0 0;
  }
}