:root {
  /* Light Mode Colors */
  --link-color: #ff8c00; /* Orange */
  --link-visited-color: #cc7000; /* Darker orange */
  --link-hover-color: #ffa726; /* Lighter, brighter orange */
  --link-active-color: #b35900; /* Even darker orange */

  /* Dark Mode Colors */
  --link-color-dark: #ffb74d;
  --link-visited-color-dark: #e69500;
  --link-hover-color-dark: #ffcc80;
  --link-active-color-dark: #e67e00;

  /* Backgrounds */
  --background-light: #ffffff;
  --background-dark: #0d1117;

  /* Text */
  --text-light: #444;
  --text-dark: #c9d1d9;
}

body {
  max-width: 650px;
  margin: 10px auto;
  padding: 0 6.5vw;
  font:
    16px -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Noto Sans",
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Noto Color Emoji";
  color: var(--text-light);
  overflow-y: scroll;
  line-height: 1.5;
}

a {
  text-underline-offset: 0.1em;
  color: var(--link-color);
}

a:visited {
  color: var(--link-visited-color);
}

a:hover {
  color: var(--link-hover-color);
}

a:active {
  color: var(--link-active-color);
}

h1.logo {
  font-size: 1.5em;
  line-height: 1;
}

h1 {
  font-size: 2em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.2em;
}

h4 {
  font-size: 1em;
}

h5 {
  font-size: 0.8em;
}

h1,
h2,
h3,
h4,
h5 {
  line-height: 1.5;

  a {
    text-decoration: none;
    color: var(--text-color);
  }

  a:hover {
    text-decoration: underline;
  }
}

nav {
  padding: 10px 0;
  border-bottom: 1px solid #c9d1d9;

  @media (max-width: 480px) {
    padding: 0;
  }

  h1 {
    margin-bottom: 0;

    a,
    a:hover,
    a:visited {
      color: var(--link-color);
      text-decoration: none;
    }
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: flex;
    gap: 0.6em;
    font-size: 1em;
  }

  a {
    text-decoration: none;
    color: var(--link-color);
  }

  a:visited {
    color: var(--link-color);
  }

  @media (prefers-color-scheme: dark) {
    a {
      color: var(--link-color-dark);
    }

    a:visited {
      color: var(--link-color-dark);
    }

    a[aria-current="page"] {
      color: var(--link-hover-color);
    }
  }
}

section {
  padding: 10px 0;
  border-bottom: 1px solid #c9d1d9;
}

section:last-of-type {
  border-bottom: none;
}

img {
  max-width: 100%;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #c9d1d9;
    background: #0d1117;
  }

  nav {
    h1 {
      a,
      a:hover,
      a:visited {
        color: var(--link-color-dark);
      }
    }
  }

  a {
    color: var(--link-color-dark);
  }

  a:visited {
    color: var(--link-visited-color-dark);
  }

  a:hover {
    color: var(--link-hover-color-dark);
  }

  a:active {
    color: var(--link-active-color-dark);
  }

  .inverted-on-dark {
    filter: invert(0.95);
  }
}

.header {
  display: flex;
  flex-direction: row;
  gap: 8px;

  h1 {
    font-size: 1.5em;
    line-height: 1;
  }
}

.header__logo-container {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.header__logo--h1 {
  width: 48px;
  height: 48px;
}

.header__logo--h3 {
  width: 24px;
  height: 24px;
}

.links {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.link-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid #ccc;
  padding: 12px;
  margin-bottom: 8px;
  text-decoration: none;
  border-radius: 6px;

  &:hover {
    background: #eee;
  }

  .icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
  }

  .text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #444;

    flex-grow: 1;
  }

  @media (prefers-color-scheme: dark) {
    color: #c9d1d9;
    background: #0d1117;

    .text {
      color: #c9d1d9;
    }

    &:hover {
      background: #161b22;
    }
  }

  &[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.5;
  }
}

ul li {
  margin-bottom: 0.25em;
}

.product-page {
  display: flex;
  flex-direction: column;
}

.full-width-image {
  width: 100%;
  height: auto;
}

article {
  h1,
  h2,
  h3 {
    margin-top: 0.5em;
    margin-bottom: 0.25em;
    line-height: 1.2em;

    a,
    a:visited {
      text-decoration: none;
      color: var(--text-color);
    }

    a:hover {
      color: var(--text-color);
      text-decoration: underline;
      text-decoration-color: var(--link-color);
    }

    a:hover:after {
      content: " \203A";
    }
  }

  .post-title-link {
    text-decoration: none;
    color: var(--text-color);
  }

  p {
    line-height: 1.5;
  }

  margin-bottom: 4em;

  .footnotes {
    font-size: 0.8em;
  }

  .footnotes-sep {
    margin-top: 2em;
    width: 25%;
    margin-left: 0;
  }

  .date {
    font-size: 0.8em;

    a,
    a:visited,
    a:hover {
      text-decoration: none;
      color: var(--text-color);
    }

    a:hover {
      text-decoration: underline;
      text-decoration-color: var(--link-color);
    }

    @media (prefers-color-scheme: dark) {
      a {
        color: #c9d1d9;
      }
    }
  }

  pre {
    max-width: 100%;
    overflow-y: scroll;
  }
}