/* Font definitions */

/* Roboto Mono */
@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/roboto-mono/latin-ext-v23-italic.woff2") format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: italic;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/roboto-mono/latin-v23-italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/roboto-mono/latin-ext-v23-normal.woff2") format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("../fonts/roboto-mono/latin-v23-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat */
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat/latin-ext-v26-italic.woff2") format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat/latin-v26-italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat/latin-ext-v26-normal.woff2") format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat/latin-v26-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Basic color definitions. Taken from the standard-themes package for Emacs. */

/* Light mode */

@media (prefers-color-scheme: light) {
    :root {

        /* Basic values */

        --color-bg-main:     #ffffff;
        --color-fg-main:     #000000;
        --color-bg-dim:      #ededed;
        --color-fg-dim:      #7f7f7f;
        --color-bg-alt:      #dcdcdc;
        --color-fg-alt:      #193f8f;
        --color-bg-active:   #bfbfbf;
        --color-bg-inactive: #f5f5f5;
        --color-border:      #bababa;

        /* Basic accent foregrounds */

        --color-red:             #b3303a;
        --color-red-warmer:      #e00033;
        --color-red-cooler:      #ce2b50;
        --color-red-faint:       #b22222;
        --color-green:           #228b22;
        --color-green-warmer:    #4f7400;
        --color-green-cooler:    #008858;
        --color-green-faint:     #61756c;
        --color-yellow:          #a45f22;
        --color-yellow-warmer:   #b6532f;
        --color-yellow-cooler:   #a0522d;
        --color-yellow-faint:    #76502a;
        --color-blue:            #001faf;
        --color-blue-warmer:     #3a5fcd;
        --color-blue-cooler:     #0000ff;
        --color-blue-faint:      #483d8b;
        --color-magenta:         #721045;
        --color-magenta-warmer:  #8b2252;
        --color-magenta-cooler:  #800080;
        --color-magenta-faint:   #8f4499;
        --color-cyan:            #1f6fbf;
        --color-cyan-warmer:     #2f8fab;
        --color-cyan-cooler:     #008b8b;
        --color-cyan-faint:      #3f7a80;

        /* Common accent backgrounds */

        --color-bg-red-intense:     #ff8f88;
        --color-bg-green-intense:   #8adf80;
        --color-bg-yellow-intense:  #f3d000;
        --color-bg-blue-intense:    #bfc9ff;
        --color-bg-magenta-intense: #dfa0f0;
        --color-bg-cyan-intense:    #a4d5f9;

        --color-bg-red-subtle:      #ffcfbf;
        --color-bg-green-subtle:    #b3fabf;
        --color-bg-yellow-subtle:   #fff576;
        --color-bg-blue-subtle:     #ccdfff;
        --color-bg-magenta-subtle:  #ffddff;
        --color-bg-cyan-subtle:     #bfefff;

        --color-bg-red-nuanced:     #fff1f0;
        --color-bg-green-nuanced:   #ecf7ed;
        --color-bg-yellow-nuanced:  #fff3da;
        --color-bg-blue-nuanced:    #f3f3ff;
        --color-bg-magenta-nuanced: #fdf0ff;
        --color-bg-cyan-nuanced:    #ebf6fa;

        /* Diffs */

        --color-bg-added:          #c0f8d0;
        --color-bg-added-faint:    #d0ffe0;
        --color-bg-added-refine:   #b4e8c4;
        --color-fg-added:          #007200;

        --color-bg-changed:        #ffdfa9;
        --color-bg-changed-faint:  #ffefbf;
        --color-bg-changed-refine: #fac090;
        --color-fg-changed:        #8d6a12;

        --color-bg-removed:        #ffd8d5;
        --color-bg-removed-faint:  #ffe9e9;
        --color-bg-removed-refine: #f3b5af;
        --color-fg-removed:        #a02a2a;

        /* Marks */

        --color-bg-mark-alt:  #c0effa;
        --color-fg-mark-alt:  #1f6fb0;

        --color-bg-mark-del:  #ffd5ea;
        --color-fg-mark-del:  #b32230;

        --color-bg-mark-sel:  #fafa7b;
        --color-fg-mark-sel:  #805f00;

        /* Graphs */

        --color-red-graph-0-bg:     #ef7969;
        --color-red-graph-1-bg:     #ffaab4;
        --color-green-graph-0-bg:   #4faa09;
        --color-green-graph-1-bg:   #8fef00;
        --color-yellow-graph-0-bg:  #ffcf00;
        --color-yellow-graph-1-bg:  #f9ff00;
        --color-blue-graph-0-bg:    #7090ff;
        --color-blue-graph-1-bg:    #9fc6ff;
        --color-magenta-graph-0-bg: #e07fff;
        --color-magenta-graph-1-bg: #fad0ff;
        --color-cyan-graph-0-bg:    #70d3f0;
        --color-cyan-graph-1-bg:    #afefff;

        /* Special hues */

        --color-bg-accent:     #0000cc;
        --color-bg-completion: #bfe8ff;
        --color-bg-hover:      #aaeccf;
        --color-bg-hover-alt:  #ffff00;
        --color-bg-hl-line:    #b4eeb4;
        --color-bg-region:     #eedc82;
        --color-bg-paren:      #40e0d0;
        --color-bg-err:        #ffd5ea;
        --color-bg-warning:    #ffeabb;
        --color-bg-info:       #d0efda;

        --color-bg-mode-line-active:        #b3b3b3;
        --color-fg-mode-line-active:        #000000;
        --color-border-mode-line-active:    #5a5a5a;
        --color-bg-mode-line-inactive:      #e5e5e5;
        --color-fg-mode-line-inactive:      #7f7f7f;
        --color-border-mode-line-inactive:  #bababa;

        --color-bg-tab:              #d9d9d9;
        --color-bg-tab-inactive:     #bfbfbf;
        --color-bg-tab-inactive-alt: #a6a6a6;

        --color-modeline-err:     #b02020;
        --color-modeline-warning: #5f1080;
        --color-modeline-info:    #002fb0;

        --color-underline-err:     #ef0f1f;
        --color-underline-warning: #bf5f00;
        --color-underline-info:    #02af52;

        /* Specific elements. */

        /* Links. */

        --color-fg-link: var(--color-blue-warmer);
        --color-underline-link: var(--color-blue-warmer);
        --color-fg-link-visited: var(--color-magenta);
        --color-underline-link-visited: var(--color-magenta);

        /* Code blocks. */
        --color-keyword: var(--color-magenta-cooler);
        --color-builtin: var(--color-blue-faint);
        --color-comment: var(--color-red-faint);
        --color-constant: var(--color-cyan-cooler);
        --color-fnname: var(--color-blue-cooler);
        --color-keyword: var(--color-magenta-cooler);
        --color-preprocessor: var(--color-blue-faint);
        --color-docstring: var(--color-magenta-warmer);
        --color-string: var(--color-magenta-warmer);
        --color-type: var(--color-green);
        --color-variable: var(--color-yellow-cooler);
        --color-rx-escape: var(--color-green);
        --color-rx-construct: var(--color-fg-main);
        --color-warning: var(--color-yellow-warmer);
    }
}

:root[data-theme="light"] {
    /* Basic values */

    --color-bg-main:     #ffffff;
    --color-fg-main:     #000000;
    --color-bg-dim:      #ededed;
    --color-fg-dim:      #7f7f7f;
    --color-bg-alt:      #dcdcdc;
    --color-fg-alt:      #193f8f;
    --color-bg-active:   #bfbfbf;
    --color-bg-inactive: #f5f5f5;
    --color-border:      #bababa;

    /* Basic accent foregrounds */

    --color-red:             #b3303a;
    --color-red-warmer:      #e00033;
    --color-red-cooler:      #ce2b50;
    --color-red-faint:       #b22222;
    --color-green:           #228b22;
    --color-green-warmer:    #4f7400;
    --color-green-cooler:    #008858;
    --color-green-faint:     #61756c;
    --color-yellow:          #a45f22;
    --color-yellow-warmer:   #b6532f;
    --color-yellow-cooler:   #a0522d;
    --color-yellow-faint:    #76502a;
    --color-blue:            #001faf;
    --color-blue-warmer:     #3a5fcd;
    --color-blue-cooler:     #0000ff;
    --color-blue-faint:      #483d8b;
    --color-magenta:         #721045;
    --color-magenta-warmer:  #8b2252;
    --color-magenta-cooler:  #800080;
    --color-magenta-faint:   #8f4499;
    --color-cyan:            #1f6fbf;
    --color-cyan-warmer:     #2f8fab;
    --color-cyan-cooler:     #008b8b;
    --color-cyan-faint:      #3f7a80;

    /* Common accent backgrounds */

    --color-bg-red-intense:     #ff8f88;
    --color-bg-green-intense:   #8adf80;
    --color-bg-yellow-intense:  #f3d000;
    --color-bg-blue-intense:    #bfc9ff;
    --color-bg-magenta-intense: #dfa0f0;
    --color-bg-cyan-intense:    #a4d5f9;

    --color-bg-red-subtle:      #ffcfbf;
    --color-bg-green-subtle:    #b3fabf;
    --color-bg-yellow-subtle:   #fff576;
    --color-bg-blue-subtle:     #ccdfff;
    --color-bg-magenta-subtle:  #ffddff;
    --color-bg-cyan-subtle:     #bfefff;

    --color-bg-red-nuanced:     #fff1f0;
    --color-bg-green-nuanced:   #ecf7ed;
    --color-bg-yellow-nuanced:  #fff3da;
    --color-bg-blue-nuanced:    #f3f3ff;
    --color-bg-magenta-nuanced: #fdf0ff;
    --color-bg-cyan-nuanced:    #ebf6fa;

    /* Diffs */

    --color-bg-added:          #c0f8d0;
    --color-bg-added-faint:    #d0ffe0;
    --color-bg-added-refine:   #b4e8c4;
    --color-fg-added:          #007200;

    --color-bg-changed:        #ffdfa9;
    --color-bg-changed-faint:  #ffefbf;
    --color-bg-changed-refine: #fac090;
    --color-fg-changed:        #8d6a12;

    --color-bg-removed:        #ffd8d5;
    --color-bg-removed-faint:  #ffe9e9;
    --color-bg-removed-refine: #f3b5af;
    --color-fg-removed:        #a02a2a;

    /* Marks */

    --color-bg-mark-alt:  #c0effa;
    --color-fg-mark-alt:  #1f6fb0;

    --color-bg-mark-del:  #ffd5ea;
    --color-fg-mark-del:  #b32230;

    --color-bg-mark-sel:  #fafa7b;
    --color-fg-mark-sel:  #805f00;

    /* Graphs */

    --color-red-graph-0-bg:     #ef7969;
    --color-red-graph-1-bg:     #ffaab4;
    --color-green-graph-0-bg:   #4faa09;
    --color-green-graph-1-bg:   #8fef00;
    --color-yellow-graph-0-bg:  #ffcf00;
    --color-yellow-graph-1-bg:  #f9ff00;
    --color-blue-graph-0-bg:    #7090ff;
    --color-blue-graph-1-bg:    #9fc6ff;
    --color-magenta-graph-0-bg: #e07fff;
    --color-magenta-graph-1-bg: #fad0ff;
    --color-cyan-graph-0-bg:    #70d3f0;
    --color-cyan-graph-1-bg:    #afefff;

    /* Special hues */

    --color-bg-accent:     #0000cc;
    --color-bg-completion: #bfe8ff;
    --color-bg-hover:      #aaeccf;
    --color-bg-hover-alt:  #ffff00;
    --color-bg-hl-line:    #b4eeb4;
    --color-bg-region:     #eedc82;
    --color-bg-paren:      #40e0d0;
    --color-bg-err:        #ffd5ea;
    --color-bg-warning:    #ffeabb;
    --color-bg-info:       #d0efda;

    --color-bg-mode-line-active:        #b3b3b3;
    --color-fg-mode-line-active:        #000000;
    --color-border-mode-line-active:    #5a5a5a;
    --color-bg-mode-line-inactive:      #e5e5e5;
    --color-fg-mode-line-inactive:      #7f7f7f;
    --color-border-mode-line-inactive:  #bababa;

    --color-bg-tab:              #d9d9d9;
    --color-bg-tab-inactive:     #bfbfbf;
    --color-bg-tab-inactive-alt: #a6a6a6;

    --color-modeline-err:     #b02020;
    --color-modeline-warning: #5f1080;
    --color-modeline-info:    #002fb0;

    --color-underline-err:     #ef0f1f;
    --color-underline-warning: #bf5f00;
    --color-underline-info:    #02af52;

    /* Specific elements. */

    /* Links. */

    --color-fg-link: var(--color-blue-warmer);
    --color-underline-link: var(--color-blue-warmer);
    --color-fg-link-visited: var(--color-magenta);
    --color-underline-link-visited: var(--color-magenta);

    /* Code blocks. */
    --color-keyword: var(--color-magenta-cooler);
    --color-builtin: var(--color-blue-faint);
    --color-comment: var(--color-red-faint);
    --color-constant: var(--color-cyan-cooler);
    --color-fnname: var(--color-blue-cooler);
    --color-keyword: var(--color-magenta-cooler);
    --color-preprocessor: var(--color-blue-faint);
    --color-docstring: var(--color-magenta-warmer);
    --color-string: var(--color-magenta-warmer);
    --color-type: var(--color-green);
    --color-variable: var(--color-yellow-cooler);
    --color-rx-escape: var(--color-green);
    --color-rx-construct: var(--color-fg-main);
    --color-warning: var(--color-yellow-warmer);
}

@media (prefers-color-scheme: dark) {
    :root {
        
        /* Basic values */

        --color-bg-main:     #000000;
        --color-fg-main:     #ffffff;
        --color-bg-dim:      #202020;
        --color-fg-dim:      #a6a6a6;
        --color-bg-alt:      #363636;
        --color-fg-alt:      #a0afef;
        --color-bg-active:   #606060;
        --color-bg-inactive: #141414;
        --color-border:      #606070;

        /* Basic accent foregrounds */

        --color-red:             #ff6f60;
        --color-red-warmer:      #ff7f24;
        --color-red-cooler:      #ff778f;
        --color-red-faint:       #ee5c42;
        --color-green:           #44cc44;
        --color-green-warmer:    #7abd0f;
        --color-green-cooler:    #98fb98;
        --color-green-faint:     #61a06c;
        --color-yellow:          #eedd82;
        --color-yellow-warmer:   #fec43f;
        --color-yellow-cooler:   #ffa07a;
        --color-yellow-faint:    #dfb08f;
        --color-blue:            #87ceff;
        --color-blue-warmer:     #80aaff;
        --color-blue-cooler:     #02cfff;
        --color-blue-faint:      #b0c4de;
        --color-magenta:         #df8faf;
        --color-magenta-warmer:  #ff8fe7;
        --color-magenta-cooler:  #ce82ff;
        --color-magenta-faint:   #efafdf;
        --color-cyan:            #00ffff;
        --color-cyan-warmer:     #87cefa;
        --color-cyan-cooler:     #7fffd4;
        --color-cyan-faint:      #6acbcb;

        /* Common accent backgrounds */

        --color-bg-red-intense:     #9d1f1f;
        --color-bg-green-intense:   #2f822f;
        --color-bg-yellow-intense:  #7a6100;
        --color-bg-blue-intense:    #1640b0;
        --color-bg-magenta-intense: #7030af;
        --color-bg-cyan-intense:    #2266ae;

        --color-bg-red-subtle:      #620f2a;
        --color-bg-green-subtle:    #00422a;
        --color-bg-yellow-subtle:   #4a4000;
        --color-bg-blue-subtle:     #242679;
        --color-bg-magenta-subtle:  #552f5f;
        --color-bg-cyan-subtle:     #004065;

        --color-bg-red-nuanced:     #2c0614;
        --color-bg-green-nuanced:   #001904;
        --color-bg-yellow-nuanced:  #221000;
        --color-bg-blue-nuanced:    #0f0e39;
        --color-bg-magenta-nuanced: #230631;
        --color-bg-cyan-nuanced:    #041529;

        /* Diffs */

        --color-bg-added:          #00331f;
        --color-bg-added-faint:    #002410;
        --color-bg-added-refine:   #03492f;
        --color-fg-added:          #4fb04f;

        --color-bg-changed:        #323200;
        --color-bg-changed-faint:  #281a00;
        --color-bg-changed-refine: #484800;
        --color-fg-changed:        #e0cf03;

        --color-bg-removed:        #4a1119;
        --color-bg-removed-faint:  #320a0f;
        --color-bg-removed-refine: #751a1f;
        --color-fg-removed:        #ff5f5f;

        /* Marks */

        --color-bg-mark-alt:  #002f4a;
        --color-fg-mark-alt:  #57cefa;

        --color-bg-mark-del:  #440d09;
        --color-fg-mark-del:  #ff5f60;

        --color-bg-mark-sel:  #333000;
        --color-fg-mark-sel:  #d0d082;

        /* Graphs */

        --color-red-graph-0-bg:     #b52c2c;
        --color-red-graph-1-bg:     #702020;
        --color-green-graph-0-bg:   #4fd100;
        --color-green-graph-1-bg:   #007800;
        --color-yellow-graph-0-bg:  #f1e00a;
        --color-yellow-graph-1-bg:  #b08600;
        --color-blue-graph-0-bg:    #2fafef;
        --color-blue-graph-1-bg:    #1f2f8f;
        --color-magenta-graph-0-bg: #bf94fe;
        --color-magenta-graph-1-bg: #5f509f;
        --color-cyan-graph-0-bg:    #47dfea;
        --color-cyan-graph-1-bg:    #00808f;

        /* Special hues */

        --color-bg-accent:     #ffc200;
        --color-bg-completion: #254b5f;
        --color-bg-hover:      #457b2f;
        --color-bg-hover-alt:  #00688b;
        --color-bg-hl-line:    #334815;
        --color-bg-region:     #20009d;
        --color-bg-paren:      #4f94cd;
        --color-bg-err:        #3f0d09;
        --color-bg-warning:    #362f00;
        --color-bg-info:       #002f12;

        --color-bg-mode-line-active:        #505050;
        --color-fg-mode-line-active:        #ffffff;
        --color-border-mode-line-active:    #959595;
        --color-bg-mode-line-inactive:      #323232;
        --color-fg-mode-line-inactive:      #a6a6a6;
        --color-border-mode-line-inactive:  #606070;

        --color-bg-tab:              #333333;
        --color-bg-tab-inactive:     #4d4d4d;
        --color-bg-tab-inactive-alt: #666666;

        --color-modeline-err:     #ff80af;
        --color-modeline-warning: #dfcf33;
        --color-modeline-info:    #2fc82f;

        --color-underline-err:     #df2f2f;
        --color-underline-warning: #c0b000;
        --color-underline-info:    #22b022;

        /* Specific elements. */

        /* Links. */

        --color-fg-link: var(--color-cyan);
        --color-underline-link: var(--blue-warmer);
        --color-fg-link-visited: var(--color-magenta-cooler);
        --color-underline-link-visited: var(--color-magenta);

        /* Code blocks. */
        --color-builtin: var(--color-blue-faint);
        --color-comment: var(--color-red-warmer);
        --color-constant: var(--color-cyan-cooler);
        --color-fnname: var(--color-cyan-warmer);
        --color-keyword: var(--color-cyan);
        --color-preprocessor: var(--color-blue-faint);
        --color-docstring: var(--color-yellow-cooler);
        --color-string: var(--color-yellow-cooler);
        --color-type: var(--color-green-cooler);
        --color-variable: var(--color-yellow);
        --color-rx-escape: var(--color-green);
        --color-rx-construct: var(--color-fg-main);
        --color-warning: var(--color-yellow-warmer);
    }
}

:root[data-theme='dark'] {
    /* Basic values */

    --color-bg-main:     #000000;
    --color-fg-main:     #ffffff;
    --color-bg-dim:      #202020;
    --color-fg-dim:      #a6a6a6;
    --color-bg-alt:      #363636;
    --color-fg-alt:      #a0afef;
    --color-bg-active:   #606060;
    --color-bg-inactive: #141414;
    --color-border:      #606070;

    /* Basic accent foregrounds */

    --color-red:             #ff6f60;
    --color-red-warmer:      #ff7f24;
    --color-red-cooler:      #ff778f;
    --color-red-faint:       #ee5c42;
    --color-green:           #44cc44;
    --color-green-warmer:    #7abd0f;
    --color-green-cooler:    #98fb98;
    --color-green-faint:     #61a06c;
    --color-yellow:          #eedd82;
    --color-yellow-warmer:   #fec43f;
    --color-yellow-cooler:   #ffa07a;
    --color-yellow-faint:    #dfb08f;
    --color-blue:            #87ceff;
    --color-blue-warmer:     #80aaff;
    --color-blue-cooler:     #02cfff;
    --color-blue-faint:      #b0c4de;
    --color-magenta:         #df8faf;
    --color-magenta-warmer:  #ff8fe7;
    --color-magenta-cooler:  #ce82ff;
    --color-magenta-faint:   #efafdf;
    --color-cyan:            #00ffff;
    --color-cyan-warmer:     #87cefa;
    --color-cyan-cooler:     #7fffd4;
    --color-cyan-faint:      #6acbcb;

    /* Common accent backgrounds */

    --color-bg-red-intense:     #9d1f1f;
    --color-bg-green-intense:   #2f822f;
    --color-bg-yellow-intense:  #7a6100;
    --color-bg-blue-intense:    #1640b0;
    --color-bg-magenta-intense: #7030af;
    --color-bg-cyan-intense:    #2266ae;

    --color-bg-red-subtle:      #620f2a;
    --color-bg-green-subtle:    #00422a;
    --color-bg-yellow-subtle:   #4a4000;
    --color-bg-blue-subtle:     #242679;
    --color-bg-magenta-subtle:  #552f5f;
    --color-bg-cyan-subtle:     #004065;

    --color-bg-red-nuanced:     #2c0614;
    --color-bg-green-nuanced:   #001904;
    --color-bg-yellow-nuanced:  #221000;
    --color-bg-blue-nuanced:    #0f0e39;
    --color-bg-magenta-nuanced: #230631;
    --color-bg-cyan-nuanced:    #041529;

    /* Diffs */

    --color-bg-added:          #00331f;
    --color-bg-added-faint:    #002410;
    --color-bg-added-refine:   #03492f;
    --color-fg-added:          #4fb04f;

    --color-bg-changed:        #323200;
    --color-bg-changed-faint:  #281a00;
    --color-bg-changed-refine: #484800;
    --color-fg-changed:        #e0cf03;

    --color-bg-removed:        #4a1119;
    --color-bg-removed-faint:  #320a0f;
    --color-bg-removed-refine: #751a1f;
    --color-fg-removed:        #ff5f5f;

    /* Marks */

    --color-bg-mark-alt:  #002f4a;
    --color-fg-mark-alt:  #57cefa;

    --color-bg-mark-del:  #440d09;
    --color-fg-mark-del:  #ff5f60;

    --color-bg-mark-sel:  #333000;
    --color-fg-mark-sel:  #d0d082;

    /* Graphs */

    --color-red-graph-0-bg:     #b52c2c;
    --color-red-graph-1-bg:     #702020;
    --color-green-graph-0-bg:   #4fd100;
    --color-green-graph-1-bg:   #007800;
    --color-yellow-graph-0-bg:  #f1e00a;
    --color-yellow-graph-1-bg:  #b08600;
    --color-blue-graph-0-bg:    #2fafef;
    --color-blue-graph-1-bg:    #1f2f8f;
    --color-magenta-graph-0-bg: #bf94fe;
    --color-magenta-graph-1-bg: #5f509f;
    --color-cyan-graph-0-bg:    #47dfea;
    --color-cyan-graph-1-bg:    #00808f;

    /* Special hues */

    --color-bg-accent:     #ffc200;
    --color-bg-completion: #254b5f;
    --color-bg-hover:      #457b2f;
    --color-bg-hover-alt:  #00688b;
    --color-bg-hl-line:    #334815;
    --color-bg-region:     #20009d;
    --color-bg-paren:      #4f94cd;
    --color-bg-err:        #3f0d09;
    --color-bg-warning:    #362f00;
    --color-bg-info:       #002f12;

    --color-bg-mode-line-active:        #505050;
    --color-fg-mode-line-active:        #ffffff;
    --color-border-mode-line-active:    #959595;
    --color-bg-mode-line-inactive:      #323232;
    --color-fg-mode-line-inactive:      #a6a6a6;
    --color-border-mode-line-inactive:  #606070;

    --color-bg-tab:              #333333;
    --color-bg-tab-inactive:     #4d4d4d;
    --color-bg-tab-inactive-alt: #666666;

    --color-modeline-err:     #ff80af;
    --color-modeline-warning: #dfcf33;
    --color-modeline-info:    #2fc82f;

    --color-underline-err:     #df2f2f;
    --color-underline-warning: #c0b000;
    --color-underline-info:    #22b022;

    /* Specific elements. */

    /* Links. */

    --color-fg-link: var(--color-cyan);
    --color-underline-link: var(--blue-warmer);
    --color-fg-link-visited: var(--color-magenta-cooler);
    --color-underline-link-visited: var(--color-magenta);

    /* Code blocks. */
    --color-builtin: var(--color-blue-faint);
    --color-comment: var(--color-red-warmer);
    --color-constant: var(--color-cyan-cooler);
    --color-fnname: var(--color-cyan-warmer);
    --color-keyword: var(--color-cyan);
    --color-preprocessor: var(--color-blue-faint);
    --color-docstring: var(--color-yellow-cooler);
    --color-string: var(--color-yellow-cooler);
    --color-type: var(--color-green-cooler);
    --color-variable: var(--color-yellow);
    --color-rx-escape: var(--color-green);
    --color-rx-construct: var(--color-fg-main);
    --color-warning: var(--color-yellow-warmer);
}

/* Src block colors */
.org-builtin                   { color: var(--color-builtin);      }
.org-comment-delimiter         { color: var(--color-comment);      }
.org-comment                   { color: var(--color-comment);      }
.org-constant                  { color: var(--color-constant);     }
.org-doc                       { color: var(--color-docstring);    }
.org-function-name             { color: var(--color-fnname);       }
.org-keyword                   { color: var(--color-keyword);      }
.org-negation-char             {                                   }
.org-preprocessor              { color: var(--color-preprocessor); }
.org-regexp-grouping-backslash { color: var(--color-rx-escape);    }
.org-regexp-grouping-construct { color: var(--color-rx-construct); }
.org-string                    { color: var(--color-string);       }
.org-type                      { color: var(--color-type);         }
.org-variable-name             { color: var(--color-variable);     }
.org-warning                   { color: var(--color-warning);      }

#theme-button {
    padding: 7px;
    border: 0;
    background-color: inherit;
    color: var(--color-fg-main);
    display: none;
}

#theme-button:hover {
    background-color: var(--color-bg-hl-line);
    border-radius: 10px;
    cursor: pointer;
}

#theme-dropdown {
    padding: 0;
    z-index: 1;
    list-style: none;
    position: absolute;
    border: 1px solid;
    /* List elements have border-bottom; disable it for the list so they don't overlap. */
    border-bottom: 0;
    display: none;
    margin-top: 2px;
}

.theme-dropdown-element {
    width: 100%;
    border-bottom: 1px solid;
    background-color: var(--color-bg-main);
}

.theme-dropdown-element:hover {
    background-color: var(--color-bg-hl-line) !important;
}

.theme-dropdown-button {
    border: 0;
    padding: 5px;
    width: 100%;
    background-color: inherit;
    color: inherit;
}

.theme-dropdown-selected {
    background-color: var(--color-bg-active);
}

.theme-dropdown-selected:hover {
    background-color: var(--color-bg-hl-line);
}

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

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

ul {
    padding-left: revert;
}

p {
    margin-top: revert;
    margin-bottom: revert;
}

.balanced {
    text-align: center;
    text-wrap: balance;
}

#introduction {
    text-align: center;
    text-wrap: balance;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

#introduction > p {
    /* font-style: italic; */
}

#center {
    display: flex;
    flex-direction: column;
    border: 2px solid;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    min-height: calc(100vh - 32px);
    margin-top: 16px;
    margin-bottom: 16px;
}


*, *::before, *::after {
  box-sizing: border-box;
}

input, button, textarea, select {
  font: inherit;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

body {
    /* background-color: var(--color-bg0); */
    /* line-height: 1.42857143; */
    /* margin-top: 0px; */
    /* color: var(--color-fg0); */
    /* font-family: "Libre Caslon Text"; */
    background-color: var(--color-bg-main);
    color: var(--color-fg-main);
    line-height: 1.5;
    font-family: "Montserrat", sans-serif;
}

p, h1, h2, h3, h4, h5, h6, ul, ol {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    overflow-wrap: break-word;
}

.src, table, svg {
    margin-left: auto;
    margin-right: auto;
}

table, svg {
    min-width: min(600px, 100%);
    max-width: fit-content;
}

.src {
    overflow-x: auto;
    margin: 0;
    padding: 0;
}

code {
    /* font-family: "IBM Plex Mono", monospace; */
    font-family: "Roboto Mono", monospace;
}

pre > code {
    font-size: 90%;
}

table {
    border-collapse: collapse;
    overflow-x: scroll;
    border: 1px solid;
}

th {
    padding: 8px;
    border: 1px solid;
}

td {
    padding: 8px;
    border: 1px solid;
    font-weight: normal;
    text-align: center;
}

svg {
    min-height: 50vh;
}

h1, h2, h3, h4, h5, h6 {
    margin: 16px auto 16px auto;
}

hr {
    margin: 16px auto 16px auto;
}

.navbar {
    background-color: var(--color-bg-main);
    max-width: 1000px;
    display: flex;
    justify-content: space-between;
    line-height: 1;
    flex-direction: row;
    border-bottom: 2px solid;
    padding: 10px;
    position: sticky;
    top: 0;
}

.navbar-logo-container {
    display: flex;
    font-size: 2rem;
    text-decoration: none;
    color: var(--color-fg-main);
}

.navbar-logo-container:visited {
    color: var(--color-fg-main);
}

.navbar-logo-container:hover {
    opacity: 80%;
}

.navbar-logo-img {
    display: inline-block;
    margin-right: 8px;
    height: 80%;
    image-rendering: pixelated;
    align-self: center; 
}

.navbar-list {
    list-style: none;
    font-size: 1.2rem;
    line-height: 1;
    margin: auto 0 auto 0;
    display: flex;
}

.navbar-list-element {
    font-weight: 500;
}

.navbar-list-link:hover {
    background-color: var(--color-bg-hl-line);
    border-radius: 10px;
}

.navbar-list-link {
    text-decoration: none;
    color: var(--color-fg-main);
    padding: 7px;
}

.navbar-list-link:visited {
    color: var(--color-fg-main);
}

main {
    min-height: 100%;
    max-width: 1000px;
    padding: 100px;
    padding-top: 32px;
    padding-bottom: 0;
    margin-bottom: 16px;
}

.org-src-container {
    margin-top:    20px;
    margin-bottom: 20px;
    padding:       20px;
    border: 1px solid #999;
    border-radius: 10px;
}

@media print {
    #center { border:     0 !important; }
    .navbar { display: none !important; }
    .src    { white-space: pre-wrap;
              border: 0;                }
}