:root {
  --nc-tx-1: light-dark(#000, #fff);
  --nc-tx-2: light-dark(#1a1a1a, #eee);
  --nc-bg-1: light-dark(#fff, #000);
  --nc-bg-2: light-dark(#f6f8fa, #111);
  --nc-bg-3: light-dark(#e5e7eb, #222);
  --nc-lk-1: light-dark(#0070f3, #3291ff);
  --nc-lk-2: light-dark(#0366d6, #0070f3);
  --nc-lk-tx: light-dark(#fff, #fff);
  --nc-ac-1: light-dark(#79ffe1, #7928ca);
  --nc-ac-tx: light-dark(#0c4047, #fff);

  &[data-color-scheme="dark"] {
    color-scheme: dark;
  }

  &[data-color-scheme="light"] {
    color-scheme: light;
  }
}

body, header {
  transition: background-color .3s;
}

.github-corner svg {
  fill: var(--nc-tx-2);
  color: var(--nc-bg-2);
  border: 0;
  position: absolute;
  top: 0;
  right: 0;
}

.github-corner:hover .octo-arm {
  animation: .56s ease-in-out octocat-wave;
}

@keyframes octocat-wave {
  0%, 100% {
    transform: rotate(0);
  }

  20%, 60% {
    transform: rotate(-25deg);
  }

  40%, 80% {
    transform: rotate(10deg);
  }
}

@media (width <= 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }

  .github-corner .octo-arm {
    animation: .56s ease-in-out octocat-wave;
  }
}