html {
  color-scheme: dark;
}

:root {
  color-scheme: dark;

  --page-background: #0d1117;

  --main-text: #c9d1d9;
  --heading-color: #f0f6fc;

  --main-link: #58a6ff;
  --main-link-hover: #79c0ff;
  --main-link-border: #30363d;
  --main-link-border-hover: #58a6ff;

  --profile-border: #30363d;

  --navigation-button-border: #30363d;
  --navigation-button-background: #161b22;
  --navigation-button-border-hover: #58a6ff;
  --navigation-button-background-hover: #1f2933;

  --navigation-text: #8b949e;
  --navigation-text-hover: #f0f6fc;

  --button-border: #30363d;
  --button-background: #21262d;
  --button-border-hover: #58a6ff;
  --button-background-hover: #30363d;
  --button-text: #c9d1d9;
  --button-text-hover: #ffffff;

  --hr: #30363d;

  --blockquote-border: #58a6ff;
  --blockquote-background: #161b22;
  --blockquote-text: #c9d1d9;

  --code-border: #30363d;
  --code-background: #161b22;

  --pre-border: #30363d;
  --pre-background: #0d1117;

  --note: #1f2a1f;
  --alert: #2a1f1f;
  --aside: #161b22;
  --callout: #1f2a36;

  --conversation-background: #161b22;

  --comment-border: #30363d;
  --comment-form-background-color: #161b22;
  --comment-form-border-color: #30363d;

  --footnotes: #8b949e;
  --footnote-super: #58a6ff;

  --page-fold: #161b22;
  --video-placeholder: #0d1117;

  --shared-note: #1f2a1f;
  --highlight: #1f2a1f;
}

/* Text links only, excluding images, buttons, and site-nav content */
a:not(:has(img)):not(.button):not(.btn):not([class*="button"]):not(.site-nav * ) {
  color: var(--main-link);
  text-decoration: none;
  position: relative;
  transition: color 0.2s ease;
}

/* Animated underline */
a:not(:has(img)):not(.button):not(.btn):not([class*="button"]):not(.site-nav * )::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--main-link-hover);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

/* Hover */
a:not(:has(img)):not(.button):not(.btn):not([class*="button"]):not(.site-nav * ):hover {
  color: var(--main-link-hover);
}

a:not(:has(img)):not(.button):not(.btn):not([class*="button"]):not(.site-nav * ):hover::after {
  transform: scaleX(1);
}