style.css

@import 'split-button.css';

@custom-media --motionOK (prefers-reduced-motion: no-preference);
@custom-media --dark (prefers-color-scheme: dark);
@custom-media --light (prefers-color-scheme: light);

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;

  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --surface1-light: hsl(var(--brand-hue) 25% 97%);

  --brand-dark: hsl( var(--brand-hue) calc(var(--brand-saturation) / 2) calc(var(--brand-lightness) / 1.5) );
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
}

:root {
  --brand: var(--brand-light);
  --text1: var(--text1-light);
  --surface1: var(--surface1-light);
}

@media (--dark) {
  :root {
    --brand: var(--brand-dark);
    --text1: var(--text1-dark);
    --surface1: var(--surface1-dark);
  }
}

html {
  block-size: 100%;
  background-color: var(--surface1);
  color: var(--text1);
}

body {
  min-block-size: 100%;
  font-family: system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5vmin;
}

.github-corner {
  fill: var(--text1);
  color: var(--surface1); 
  
  &:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }
}

@keyframes octocat-wave{
  0%,100% {
    transform: rotate(0)
  }
  20%,60% {
    transform: rotate(-25deg)
  }
  40%,80% {
    transform: rotate(10deg)
  }
}