@font-face {
    font-family: "Atkinson Hyperlegible Soft";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("../fonts/atkinson-hyperlegible-soft/AtkinsonHyperlegibleSoft-Regular.woff2")
        format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Soft";
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: url("../fonts/atkinson-hyperlegible-soft/AtkinsonHyperlegibleSoft-RegularItalic.woff2")
        format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Soft";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../fonts/atkinson-hyperlegible-soft/AtkinsonHyperlegibleSoft-SemiBold.woff2")
        format("woff2");
}

@font-face {
    font-family: "Atkinson Hyperlegible Soft";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../fonts/atkinson-hyperlegible-soft/AtkinsonHyperlegibleSoft-Bold.woff2")
        format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: url("../fonts/ibm-plex-serif/ibm-plex-serif-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-display: swap;
    font-weight: 600;
    src: url("../fonts/ibm-plex-serif/ibm-plex-serif-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Serif";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: url("../fonts/ibm-plex-serif/ibm-plex-serif-latin-700-normal.woff2") format("woff2");
}

:root,
.coal {
    --bg: hsl(200, 7%, 8%);
    --fg: #98a3ad;
    --sidebar-bg: #292c2f;
    --sidebar-fg: #a1adb8;
    --sidebar-non-existant: #505254;
    --sidebar-active: #3473ad;
    --sidebar-spacer: #393939;
    --scrollbar: var(--sidebar-fg);
    --icons: #43484d;
    --icons-hover: #b3c0cc;
    --links: #2b79a2;
    --inline-code-color: #c5c8c6;
    --theme-popup-bg: #141617;
    --theme-popup-border: #43484d;
    --theme-hover: #1f2124;
    --quote-bg: hsl(234, 21%, 18%);
    --quote-border: hsl(234, 21%, 23%);
    --warning-border: #ff8e00;
    --table-border-color: hsl(200, 7%, 13%);
    --table-header-bg: hsl(200, 7%, 28%);
    --table-alternate-bg: hsl(200, 7%, 11%);
    --searchbar-border-color: #aaa;
    --searchbar-bg: #b7b7b7;
    --searchbar-fg: #000;
    --searchbar-shadow-color: #aaa;
    --searchresults-header-fg: #666;
    --searchresults-border-color: #98a3ad;
    --searchresults-li-bg: #2b2b2f;
    --search-mark-bg: #355c7d;
    --color-scheme: dark;
    --copy-button-filter: invert(26%) sepia(8%) saturate(575%) hue-rotate(169deg) brightness(87%)
        contrast(82%);
    --copy-button-filter-hover: invert(36%) sepia(70%) saturate(503%) hue-rotate(167deg)
        brightness(98%) contrast(89%);
    --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo, "DejaVu Sans Mono", monospace;
}

#theme-toggle,
#theme-list {
    display: none !important;
}

html,
button,
input {
    font-family: "Atkinson Hyperlegible Soft", "Open Sans", sans-serif;
}

body {
    background: var(--bg);
    color: var(--fg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "IBM Plex Serif", Georgia, serif;
    font-weight: 400;
    line-height: 1.15;
}

h1 {
    color: #9dbcfb;
}

h2,
h3 {
    color: #c5d2df;
}

a,
.content a {
    color: var(--links);
}

code,
pre,
.ace_editor,
.hljs {
    font-family: var(--mono-font) !important;
}

pre {
    background: #1d1f21;
    border: 1px solid var(--table-border-color);
}

pre > code,
.hljs {
    background: #1d1f21;
    color: #c5c8c6;
}

blockquote {
    background: var(--quote-bg);
    border-color: var(--quote-border);
}