@import url('https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.classless.slate.min.css');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Fira+Code:wght@400;700&display=swap');

@media only screen and (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #EDE9E2;
    --fg: #241E1A;
    --accent: #E14C26;
    --orange: #E14C26;
    --yellow: #EBAD21;
    --slate: #A2B1AF;
    --green: #AFA94D;
    --blue-green: #02A378;
    --blue: #81CBDC;
  }
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #241E1A;
    --fg: #EDE9E2;
    --accent: #FFB7A7;
    --orange: #E14C26;
    --yellow: #EBAD21;
    --slate: #A2B1AF;
    --green: #AFA94D;
    --blue-green: #02A378;
    --blue: #81CBDC;
  }
}

:root:not([data-theme]) {
  --muted: color-mix(in srgb, var(--fg) 60%, var(--bg));
  --border: color-mix(in srgb, var(--fg) 15%, var(--bg));
  --surface-1: color-mix(in srgb, var(--fg) 5%, var(--bg));
  --surface-2: color-mix(in srgb, var(--fg) 10%, var(--bg));
  --accent-subtle: color-mix(in srgb, var(--accent) 25%, var(--bg));

  --pico-font-family: 'Libre Baskerville', serif;
  --pico-font-family-monospace: 'Fira Code', monospace;
  --pico-background-color: var(--bg);
  --pico-color: var(--fg);
  --pico-primary: var(--accent);
  --pico-primary-hover: var(--accent);
  --pico-primary-underline: var(--accent);
  --pico-primary-hover-underline: var(--accent);
  --pico-primary-focus: color-mix(in srgb, var(--accent) 12.5%, transparent);
  --pico-secondary: var(--accent);
  --pico-secondary-hover: var(--accent);
  --pico-secondary-focus: color-mix(in srgb, var(--accent) 12.5%, transparent);
  --pico-contrast: var(--fg);
  --pico-contrast-hover: var(--fg);
  --pico-contrast-focus: color-mix(in srgb, var(--fg) 12.5%, transparent);
  --pico-muted-color: var(--muted);
  --pico-muted-border-color: var(--border);
  --pico-card-background-color: var(--surface-1);
  --pico-card-sectioning-background-color: var(--surface-2);
  --pico-form-element-background-color: var(--surface-1);
  --pico-form-element-border-color: var(--border);
  --pico-form-element-color: var(--fg);
  --pico-form-element-placeholder-color: var(--muted);
  --pico-table-border-color: var(--border);
  --pico-table-row-stripped-background-color: var(--surface-1);
  --pico-code-background-color: var(--surface-2);
  --pico-code-color: var(--fg);
  --pico-mark-background-color: var(--accent-subtle);
  --pico-mark-color: var(--fg);
  --pico-h1-color: var(--fg);
  --pico-h2-color: var(--fg);
  --pico-h3-color: var(--fg);
  --pico-h4-color: var(--fg);
  --pico-h5-color: var(--fg);
  --pico-h6-color: var(--fg);
}

/* Disable xl/xxl breakpoints */
@media (min-width: 1024px) {
  body > header,
  body > main,
  body > footer {
    max-width: 950px !important;
  }
  :root {
    --pico-font-size: 118.75%;
  }
}

header {
  display: flex;
  align-items: center;
  gap: 1rem;
}

header > a svg {
  width: 48px;
  height: 48px;
}

header nav[aria-label="breadcrumb"] {
  font-size: 1.44rem;
  --pico-nav-breadcrumb-divider: "⧸";
  --pico-font-weight: 900;
}

header nav[aria-label="breadcrumb"] a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  font-weight: 900;
}

/* Footer separator */
footer::before {
  content: "";
  display: block;
  border-top: 1px solid var(--pico-muted-border-color);
  margin-bottom: var(--pico-typography-spacing-vertical);
}

/* Full-width scrollable tables */
main > table {
  display: block;
  overflow: auto;
}

/* Sticky first column */
main > table th:first-child,
main > table td:first-child {
  position: sticky;
  left: 0;
  background: var(--pico-background-color);
  z-index: 1;
}
main > table th:first-child {
  z-index: 2;
}

/* Make figure images full content width */
figure img {
  width: 100%;
}

/* Style zoom option on figures */
details summary {
  list-style: none;
  cursor: zoom-in;
  :hover {
    opacity: 0.8;
  }
}

/* Don't show > button on details */
details summary::after {
  display: none;
}

/* Don't show dithered image after showing details */
details[open] > summary {
  display: none;
}

/* Show dithered images accurately when they're big enough */
@media (min-width: 576px) {
  details summary img {
    image-rendering: pixelated;
  }
}

/* Reduce blockquote bottom spacing */
blockquote > :last-child {
  margin-bottom: 0;
}

/* Fix inline code line height */
:not(pre) > code {
  padding: 0.125rem 0.25rem;
  line-height: 1;
  vertical-align: baseline;
}

/* Heading anchor links */
.heading-link {
  opacity: 0;
  text-decoration: none;
  margin-left: 0.25rem;
  transition: opacity 0.2s ease;
  color: var(--muted);
}

h1:hover .heading-link,
h2:hover .heading-link,
h3:hover .heading-link,
h4:hover .heading-link,
h5:hover .heading-link,
h6:hover .heading-link,
.heading-link:hover {
  opacity: 1;
}