:root {
    --clrs-none: #00000000;
    --none: #00000000;

    /* pastel */
    --clrs-pastel-blue: #82aaff;
    --clrs-pastel-cyan: #89ddff;
    --clrs-pastel-green: #c3e88d;
    --clrs-pastel-magenta: #c792ea;
    --clrs-pastel-red: #f07178;
    --clrs-pastel-orange: #F78C6C;
    --clrs-pastel-yellow: #ffcb6b;

    /* neon */
    --clrs-neon-mint: #00FF90;
    --clrs-neon-green: #3cff00;

    /* basic */
    --clrs-basic-red: #ff0000;
    --clrs-basic-orange: #ff5e00;
    --clrs-basic-yellow: #FFdd00;
    --clrs-basic-green: #00ff00;
    --clrs-basic-blue: #008cff;
    --clrs-basic-purple: #740dce;

    /* theme changeables */

    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-highlight: #3a3a3a;
    --bg-highlight-secondary: #00000088;
    --bg-under: #000000bd;

    --text-primary: #b0bec5;
    --text-highlight: #fff;
    --text-secondary: #8a969c;
    --text-link: #c792ea;
    --text-link-hover: #fc6450;

    --border: #333;

    --scrollbar: #ffb74d var(--bg-primary) !important;


    --accent-primary: #ffb74d;
    --accent-secondary: #57f8b8;
    --accent-tertiary: #90caf9;
    --accent-four: #ab9cdc;
    --accent-five: #f07178;
    --accent-six: var(--text-primary);

    --user-select-txt: var(--bg-primary);
    --user-select-bg: var(--accent-primary);

    --alert-note: var(--clrs-pastel-blue);
    --alert-tip: var(--clrs-pastel-green);
    --alert-important: var(--clrs-pastel-magenta);
    --alert-warning: var(--clrs-pastel-orange);
    --alert-caution: var(--clrs-pastel-red);

    --blockquote-border: #90caf9;

    --code: #ffb74d;
    --code-bg: #3a3a3a;
    --table-head: var(--bg-highlight);
    --table-even: #1f1f1f;

    --mark-text: var(--clrs-neon-green);
    --mark-bg: #000;

    --enable: #57f8b8;
    --disable: #f07178;

    --navbar-dropdown-hover: var(--accent-secondary);
    --navbar-address-hover: var(--accent-secondary);
    --navbar-address-hover-text: #fff;
    --sidebar-parent: var(--accent-tertiary);
    --sidebar-active: var(--accent-five);
    --sidebar-hover: var(--accent-four);

    --glow-text: 0 0 20px #fff, 0 0 40px var(--accent-secondary), 0 0 20px var(--accent-tertiary);
    --glow: 0 0 5px #fff, 0 0 40px var(--accent-secondary);

    --glow-button: var(--clrs-neon-green);
}

[class^="theme-"],
[class*=" theme-"],
[class^="theme-"],
[class*=" theme-"],

[class^="theme-"] *,
[class*=" theme-"] *,
[class^="theme-"] *,
[class*=" theme-"] * {
    transition:
        color 0.5s ease,
        background-color 0.5s ease;
    /* transition-duration: 0.5s;    */
}

::-moz-selection {
    color: var(--user-select-txt);
    background: var(--user-select-bg);
}

::selection {
    color: var(--user-select-txt);
    background: var(--user-select-bg);
}

.theme-dark_default {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2a2a2a;
    --bg-highlight: #3a3a3a;
    --bg-highlight-secondary: #00000088;
    --bg-under: #000000bd;

    --text-primary: #b0bec5;
    --text-highlight: #fff;
    --text-secondary: #8a969c;
    --text-link: #c792ea;
    --text-link-hover: #fc6450;

    --border: #333;

    --scrollbar: #ffb74d var(--bg-primary) !important;


    --accent-primary: #ffb74d;
    --accent-secondary: #57f8b8;
    --accent-tertiary: #90caf9;
    --accent-four: #ab9cdc;
    --accent-five: #f07178;
    --accent-six: var(--text-primary);

    --user-select-txt: var(--bg-primary);
    --user-select-bg: var(--accent-primary);

    --alert-note: var(--clrs-pastel-blue);
    --alert-tip: var(--clrs-pastel-green);
    --alert-important: var(--clrs-pastel-magenta);
    --alert-warning: var(--clrs-pastel-orange);
    --alert-caution: var(--clrs-pastel-red);

    --blockquote-border: #90caf9;

    --code: #ffb74d;
    --code-bg: #3a3a3a;
    --table-head: var(--bg-highlight);
    --table-even: #1f1f1f;

    --mark-text: var(--clrs-neon-green);
    --mark-bg: #000;

    --enable: #57f8b8;
    --disable: #f07178;

    --navbar-dropdown-hover: var(--accent-secondary);
    --navbar-address-hover: var(--accent-secondary);
    --navbar-address-hover-text: #fff;
    --sidebar-parent: var(--accent-tertiary);
    --sidebar-active: var(--accent-five);
    --sidebar-hover: var(--accent-four);

    --glow-text: 0 0 20px #fff, 0 0 40px var(--accent-secondary), 0 0 20px var(--accent-tertiary);
    --glow: 0 0 5px #fff, 0 0 40px var(--accent-secondary);

    --glow-button: var(--clrs-neon-green);
}

/* based off catpuccin latte */
.theme-light_default {
    --clrs-custom-rosewater: #dc8a78;
    --clrs-custom-flamingo: #dd7878;
    --clrs-custom-pink: #ea76cb;
    --clrs-custom-mauve: #8839ef;
    --clrs-custom-red: #d20f39;
    --clrs-custom-maroon: #e64553;
    --clrs-custom-peach: #fe640b;
    --clrs-custom-yellow: #df8e1d;
    --clrs-custom-green: #40a02b;
    --clrs-custom-teal: #179299;
    --clrs-custom-sky: #04a5e5;
    --clrs-custom-sapphire: #209fb5;
    --clrs-custom-blue: #1e66f5;
    --clrs-custom-lavender: #7287fd;


    /* --bg-primary: #eff1f5;
    --bg-secondary: #ccd0da; */
    --bg-primary: #ccd0da;
    --bg-secondary: #eff1f5;
    --bg-highlight: #ffffff;
    /* --bg-highlight: #acb0be; */
    --bg-highlight-secondary: #acb0be;
    /* --bg-highlight-secondary: #8c8fa1; */
    /* --bg-under: #000000bd; */
    --bg-under: #ffffffbd;
    
    --text-primary: #4c4f69;
    --text-highlight: var(--clrs-custom-maroon);
    --text-secondary: #6c6f85;
    --text-link: var(--clrs-custom-blue);
    --text-link-hover: var(--clrs-custom-peach);

    --border: #6c6f85;
    --scrollbar: #ea76cb var(--bg-primary) !important;

    --accent-primary: var(--clrs-custom-sky);
    --accent-secondary: var(--clrs-custom-sapphire);
    --accent-tertiary: var(--clrs-custom-teal);
    --accent-four: var(--clrs-custom-lavender);
    --accent-five: var(--clrs-custom-teal);
    --accent-six: var(--text-primary);

    --user-select-txt: var(--bg-primary);
    --user-select-bg: var(--clrs-custom-maroon);

    --alert-note: #1e66f5;
    --alert-tip: #40a02b;
    --alert-important: #8839ef;
    --alert-warning: #fe640b;
    --alert-caution: #d20f39;

    --blockquote-border: var(--clrs-pastel-blue);

    --code: #dce0e8;
    --code-bg: #7c7f93;
    --table-head: #ccd0da;
    --table-even: #e6e9ef;

    --mark-text: var(--text-primary);
    --mark-bg: var(--clrs-basic-orange);

    --enable: var(--clrs-custom-green);
    --disable: var(--clrs-custom-red);

    --navbar-dropdown-hover: var(--clrs-custom-peach);
    --navbar-address-hover: var(--clrs-custom-sky);
    --navbar-address-hover-text: #000;
    --sidebar-parent: var(--clrs-custom-teal);
    --sidebar-active: var(--clrs-custom-red);
    --sidebar-hover: var(--clrs-custom-green);

    --glow-text: 0 0 20px #fff, 0 0 40px var(--clrs-basic-yellow), 0 0 20px var(--clrs-basic-blue);
    --glow: 0 0 5px #fff, 0 0 40px var(--clrs-basic-yellow);

    --glow-button: var(--clrs-custom-pink);
}

.theme-light_alt {
    --bg-primary: #fff;
    --bg-secondary: #dcdcdc;
    --bg-highlight: #F2F2F2;
    --bg-highlight-secondary: #9e9e9e;
    --bg-under: #ffffffbd;

    --text-primary: #000;
    --text-highlight: #000;
    --text-secondary: #545454;
    --text-link: var(--clrs-basic-purple);
    --text-link-hover: #fc6450;

    --border: #939393;
    --scrollbar: #FF6F30 var(--bg-primary) !important;

    --accent-primary: #008C74;
    --accent-secondary: #FF6F30;
    --accent-tertiary: #00B2A9;
    --accent-four: #F9C74F;
    --accent-five: var(--text-primary);
    --accent-six: var(--text-primary);

    --user-select-txt: var(--bg-primary);
    --user-select-bg: #FF6F30;

    --alert-note: var(--clrs-basic-blue);
    --alert-tip: var(--clrs-basic-green);
    --alert-important: var(--clrs-basic-purple);
    --alert-warning: var(--clrs-basic-orange);
    --alert-caution: var(--clrs-basic-red);

    --blockquote-border: var(--clrs-pastel-blue);

    --code: #ff007b;
    --code-bg: #c5afaf;
    --table-head: var(--bg-highlight);
    --table-even: #bfc0c4;

    --mark-text: var(--text-primary);
    --mark-bg: var(--clrs-basic-orange);

    --enable: var(--clrs-basic-green);
    --disable: var(--clrs-basic-red);

    --navbar-dropdown-hover: var(--clrs-basic-orange);
    --navbar-address-hover: var(--clrs-neon-mint);
    --navbar-address-hover-text: #000;
    --sidebar-parent: var(--accent-tertiary);
    --sidebar-active: var(--accent-secondary);
    --sidebar-hover: var(--accent-tertiary);

    --glow-text: 0 0 20px #fff, 0 0 40px var(--clrs-basic-yellow), 0 0 20px var(--clrs-basic-blue);
    --glow: 0 0 5px #fff, 0 0 40px var(--clrs-basic-yellow);

    --glow-button: #9E0059;
}

.theme-matrix {
    --bg-primary: #09100a;
    --bg-secondary: #0f1a12;
    --bg-highlight: #283c2a;
    --bg-highlight-secondary: #00000088;
    --bg-under: #000000bd;

    --text-primary: var(--clrs-neon-green);
    --text-highlight: var(--clrs-neon-green);
    --text-secondary: var(--clrs-pastel-green);
    --text-link: var(--clrs-neon-green);
    --text-link-hover: var(--clrs-neon-green);

    --border: var(--clrs-neon-green);
    --scrollbar: var(--clrs-neon-green) var(--bg-primary) !important;

    --accent-primary: var(--clrs-neon-green);
    --accent-secondary: var(--clrs-neon-green);
    --accent-tertiary: var(--clrs-neon-green);
    --accent-four: var(--clrs-neon-green);
    --accent-five: var(--clrs-neon-green);
    --accent-six: var(--clrs-neon-green);

    --user-select-txt: var(--bg-primary);
    --user-select-bg: var(--clrs-neon-green);

    --alert-note: var(--clrs-pastel-blue);
    --alert-tip: var(--clrs-pastel-green);
    --alert-important: var(--clrs-pastel-magenta);
    --alert-warning: var(--clrs-pastel-orange);
    --alert-caution: var(--clrs-pastel-red);

    --blockquote-border: var(--clrs-pastel-green);

    --code: var(--clrs-neon-green);
    --code-bg: #2a2a2a;
    --table-head: var(--bg-highlight);
    --table-even: #1b261a;

    --mark-text: var(--clrs-neon-green);
    --mark-bg: #000;

    --enable: var(--clrs-neon-green);
    --disable: var(--clrs-basic-red);

    --navbar-dropdown-hover: var(--clrs-neon-green);
    --navbar-address-hover: var(--clrs-neon-green);
    --navbar-address-hover-text: var(--clrs-neon-green);
    --sidebar-parent: var(--clrs-neon-green);
    --sidebar-active: var(--clrs-neon-green);
    --sidebar-hover: var(--clrs-neon-green);

    --glow-text: 0 0 20px #fff, 0 0 40px var(--clrs-neon-green), 0 0 20px var(--clrs-neon-green);
    --glow: 0 0 5px #fff, 0 0 40px var(--clrs-neon-green);

    --glow-button: var(--clrs-neon-green);
}

/* based off material ocean high contrast */
.theme-dark_alt {
    --bg-primary: #090B10;
    --bg-secondary: #0F111A;
    --bg-highlight: #282c3c;
    --bg-highlight-secondary: #00000088;
    --bg-under: #000000bd;

    --text-primary: #B2CCD6;
    --text-highlight: #fff;
    --text-secondary: #505a5e;
    --text-link: var(--clrs-pastel-magenta);
    --text-link-hover: #fc6450;

    --border: #1E212D;
    --scrollbar: var(--clrs-pastel-yellow) var(--bg-primary) !important;

    --accent-primary: var(--clrs-pastel-yellow);
    --accent-secondary: var(--clrs-pastel-green);
    --accent-tertiary: var(--clrs-pastel-cyan);
    --accent-four: var(--clrs-pastel-magenta);
    --accent-five: var(--text-primary);
    --accent-six: var(--text-primary);

    --user-select-txt: var(--bg-primary);
    --user-select-bg: var(--clrs-pastel-yellow);

    --alert-note: var(--clrs-pastel-blue);
    --alert-tip: var(--clrs-pastel-green);
    --alert-important: var(--clrs-pastel-magenta);
    --alert-warning: var(--clrs-pastel-orange);
    --alert-caution: var(--clrs-pastel-red);

    --blockquote-border: var(--clrs-pastel-blue);

    --code: var(--clrs-pastel-yellow);
    --code-bg: #2a2a2a;
    --table-head: var(--bg-highlight);
    --table-even: #1a1d26;

    --mark-text: var(--clrs-pastel-yellow);
    --mark-bg: #000;

    --enable: var(--clrs-pastel-green);
    --disable: var(--clrs-pastel-red);

    --navbar-dropdown-hover: var(--clrs-pastel-green);
    --navbar-address-hover: var(--clrs-neon-mint);
    --navbar-address-hover-text: #fff;
    --sidebar-parent: var(--accent-tertiary);
    --sidebar-active: var(--clrs-pastel-red);
    --sidebar-hover: var(--accent-secondary);

    --glow-text: 0 0 20px #fff, 0 0 40px var(--clrs-basic-yellow), 0 0 20px var(--clrs-basic-blue);
    --glow: 0 0 5px #fff, 0 0 40px var(--clrs-basic-yellow);

    --glow-button: var(--clrs-neon-mint);
}