@import url("https://fonts.googleapis.com/css2?family=Google+Sans:ital,wght@0,400;0,500;0,700;1,400&family=Google+Sans+Code:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root,
html.light,
html.rust,
html.coal,
html.navy,
html.ayu {
  --paper: #fafafa;
  --paper-shadow: rgba(255, 255, 255, 0.74);
  --ink: #0a0a0a;
  --charcoal: #1a1a1a;
  --graphite: #2d2d2d;
  --stone: #666666;
  --fog: #999999;
  --mist: #e5e5e5;
  --accent: #0f766e;
  --panel-border: #e5e5e5;
  --code-bg: #181818;
  --code-fg: #fafafa;

  --bg: var(--paper);
  --fg: var(--charcoal);
  --sidebar-bg: rgba(255, 255, 255, 0.86);
  --sidebar-fg: var(--graphite);
  --sidebar-non-existant: var(--fog);
  --sidebar-active: var(--ink);
  --quote-bg: rgba(255, 255, 255, 0.72);
  --quote-fg: var(--graphite);
  --table-border-color: #d8d8d8;
  --theme-popup-bg: rgba(255, 255, 255, 0.96);
  --theme-popup-border: var(--mist);
  --theme-hover: rgba(10, 10, 10, 0.04);
  --links: var(--accent);
  --inline-code-color: var(--code-fg);
  --search-mark-bg: rgba(15, 118, 110, 0.18);
  --searchbar-fg: var(--ink);
  --searchbar-bg: rgba(255, 255, 255, 0.94);
  --searchbar-border-color: var(--mist);
  --searchresults-header-fg: var(--ink);
  --searchresults-border-color: var(--mist);
  --scrollbar: #d4d4d4;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lora", Georgia, serif;
    font-weight: 600;
    color: var(--ink);
}

h1 {
    font-size: 2.2em;
}
h2 {
    font-size: 1.8em;
    border-bottom: 1px solid var(--panel-border);
}
h3 {
    font-size: 1.4em;
}

code {
    font-family: "Google Sans Code", "JetBrains Mono", "Fira Code", monospace;
    font-size: 0.9em;
}

pre {
    background-color: var(--code-bg);
    border: 1px solid var(--panel-border);
    border-radius: 4px;
    padding: 1em;
}

pre > code {
    color: var(--code-fg);
}

.hljs-keyword {
    color: var(--accent);
}
.hljs-string {
    color: var(--fog);
}
.hljs-function {
    color: var(--accent);
}
.hljs-number {
    color: var(--mist);
}
.hljs-comment {
    color: var(--stone);
    font-style: italic;
}
.hljs-type {
    color: var(--accent);
}
.hljs-built_in {
    color: var(--fog);
}
.hljs-literal {
    color: var(--mist);
}
.hljs-title {
    color: var(--code-fg);
}
.hljs-attribute {
    color: var(--fog);
}

a {
    color: var(--links);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

a:hover {
    border-bottom-color: var(--links);
}

.sidebar {
    background-color: var(--sidebar-bg);
    font-family: "Overpass", sans-serif;
}

.sidebar .sidebar-scrollbox {
    background-color: var(--sidebar-bg);
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    border: 1px solid var(--table-border-color);
    padding: 0.6em 1em;
}

th {
    background-color: var(--code-bg);
    color: var(--code-fg);
    font-family: "Lora", serif;
}

blockquote {
    border-left: 4px solid var(--accent);
    background-color: var(--quote-bg);
    padding: 0.5em 1em;
    margin: 1em 0;
}

.admonition.note {
    border-color: var(--accent);
}
.admonition.tip {
    border-color: var(--accent);
}
.admonition.warning {
    border-color: var(--stone);
}
.admonition.danger {
    border-color: var(--ink);
}

::selection {
    background-color: var(--mist);
    color: var(--ink);
}

#menu-bar {
    background-color: var(--bg);
    border-bottom: 1px solid var(--panel-border);
}

.nav-chapters {
    color: var(--links);
}

.nav-chapters:hover {
    color: var(--accent);
}