:root {
  --link-hue: 200;
  --link-saturation: 100%;
  --link-lightness: 50%;
}

a, a:hover, a:focus-visible {
  text-decoration: none;
  color: inherit;
}

.link {
  --link-hue-hover: var(--link-hue);
  --link-saturation-hover: var(--link-saturation);
  --link-lightness-hover: calc(var(--link-lightness) + 15%);
  color: hsl(var(--link-hue), var(--link-saturation), var(--link-lightness));
  transition: color 0.2s ease-in-out;
}

.link:hover, .link:focus-visible {
  color: hsl(
    var(--link-hue-hover),
    var(--link-saturation-hover),
    var(--link-lightness-hover)
    );
}

.color-twitter {
  --link-hue: 203;
  --link-saturation: 89.32%;
  --link-lightness: 53.2%;
}

.color-bsky {
  --link-hue: 211;
  --link-saturation: 100%;
  --link-lightness: 53.5%;
}

.color-mstdn {
  --link-hue: 185.83;
  --link-saturation: 91.62%;
  --link-lightness: 37.45%;
}

.color-github {
  --link-hue: 0;
  --link-saturation: 0%;
  --link-lightness: 100%;
  --link-lightness-hover: 80%;
}

@media (prefers-color-scheme: light) {
  .color-github {
    --link-hue: 0;
    --link-saturation: 0%;
    --link-lightness: 0%;
    --link-lightness-hover: 30%;
  }
}

.color-hatena {
  --link-hue: 240
  --link-saturation: 11.11%;
  --link-lightness: 8.82%;
}

.color-chihaya {
  --link-hue: 230;
  --link-saturation: 69%;
  --link-lightness: 50%;
}

@media (prefers-color-scheme: dark) {
  .color-hatena {
    --link-hue: 0;
    --link-saturation: 0%;
    --link-lightness: 100%;
    --link-lightness-hover: 80%;
  }
}

.color-oracle {
  --link-hue: 0;
  --link-saturation: 100%;
  --link-lightness: 48.63%;
}