/* Globals */
@import url("https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap");

:root {
    --sidebar-width: 300px;
    --sidebar-resize-indicator-width: 8px;
    --sidebar-resize-indicator-space: 2px;
    --page-padding: 15px;
    --content-max-width: 750px;
    --menu-bar-height: 50px;
    --mono-font: "Source Code Pro", Consolas, "Ubuntu Mono", Menlo,
        "DejaVu Sans Mono", monospace, monospace;
    --code-font-size: 0.875em
        /* please adjust the ace font size accordingly in editor.js */;
}

/* Themes */
/* .yolk { */
:root {
    --font-face: "Comfortaa", sans-serif;
    --main-font: Comfortaa, Comfortaa override, ui-sans-serif, system-ui,
        -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 !important;
    font-family: var(--main-font);
    font-size: 18px;

    --bg: rgb(20, 20, 20);
    --fg: #ffffff;

    --sidebar-bg: var(--bg);
    --sidebar-fg: var(--fg);
    --sidebar-non-existant: #5c6773;
    --sidebar-active: #ffb454;
    --sidebar-spacer: #2d334f;

    --scrollbar: var(--sidebar-fg);

    --icons: #737480;
    --icons-hover: #b7b9cc;

    --links: #0096cf;

    --inline-code-color: #ffb454;

    --theme-popup-bg: #14191f;
    --theme-popup-border: #5c6773;
    --theme-hover: #191f26;

    --quote-bg: hsl(226, 15%, 17%);
    --quote-border: hsl(226, 15%, 22%);

    --warning-border: #ff8e00;

    --table-border-color: hsl(210, 25%, 13%);
    --table-header-bg: hsl(210, 25%, 28%);
    --table-alternate-bg: hsl(210, 25%, 11%);

    --searchbar-border-color: #303030;
    --searchbar-bg: #101010;
    --searchbar-fg: #fff;
    --searchbar-shadow-color: #d4c89f;
    --searchresults-header-fg: #666;
    --searchresults-border-color: #888;
    --searchresults-li-bg: #252932;
    --search-mark-bg: #e3b171;

    --color-scheme: dark;

    /* Same as `--icons` */
    --copy-button-filter: invert(45%) sepia(6%) saturate(621%)
        hue-rotate(198deg) brightness(99%) contrast(85%);
    /* Same as `--sidebar-active` */
    --copy-button-filter-hover: invert(68%) sepia(55%) saturate(531%)
        hue-rotate(341deg) brightness(104%) contrast(101%);
}
