@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shippori+Antique+B1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gloock&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

@scope (.theme-diygrunge) {
    :scope {
        html {
            position: relative;
        }
        
        /* === GLOBALS === */
        /* colors */
        --primary-color: #E23B00;
        --secondary-color: #AEC188;
        --tertiary-color: #F0BE01;
        --quaternary-color: #B39E6A;
        --bg-color: #0c0c0c;
        --base-font-color: floralwhite;
        --inverted-font-color: black;
        --shade-1-color: #A4A2A6;
        --shade-2-color: #63676B;
        --shade-3-color: #393E44;
        --shade-4-color: #23272E;
        --light-1-color: #ff8614;
        --light-2-color: #FFAF1C;
        --light-3-color: #FEC41B;
        --light-4-color: #FFE473;
        /* fonts */
        --base-font: "IM Fell English", serif;
        --base-font-size: 16px;
        /* borders */
        --base-border: 1px solid var(--shade-1-color);
        --base-border-radius: 0px;
        --base-corner-shape: round;
        /* frames */
        --base-frame-size: 250px;
        /* padding */
        --base-padding: 16px;
        /* effects */
        --base-shadow: 0px 0px 8px black;

        /* === COLORS === */
        --body-font-color: var(--base-font-color);
        --header-font-color: var(--base-font-color);
        --link-font-color: var(--primary-color);
        --note-font-color: var(--shade-1-color);
            /* special color settings */
            --secondary-font-color: none;
            --tertiary-font-color: none;
            --title-font-color: var(--header-font-color);
            --subtitle-font-color: var(--header-font-color);
            --h3-font-color: var(--header-font-color);
            --h4-font-color: var(--header-font-color);
            --h5-font-color: var(--header-font-color);
            --h6-font-color: var(--header-font-color);
            --code-font-color: none;
            --fancy-font-color: none;
            --handwritten-font-color: none;
            --alert-font-color: mistyrose;
            --warning-font-color: lightgoldenrodyellow;
            --info-font-color: lightcyan;
            --variable-font-color: var(--body-font-color);
            --extremely-low-score-color: maroon;
            --very-low-score-color: red;
            --low-score-color: darkorange;
            --medium-score-color: gold;
            --high-score-color: green;
            --very-high-score-color: blue;
            --red-glow-base-color: mistyrose;
            --red-glow-shine-color: red;
            --orange-glow-base-color: lightgoldenrodyellow;
            --orange-glow-shine-color: orange;
            --yellow-glow-base-color: cornsilk;
            --yellow-glow-shine-color: gold;
            --green-glow-base-color: mintcream;
            --green-glow-shine-color: lime;
            --blue-glow-base-color: lightcyan;
            --blue-glow-shine-color: dodgerblue;
            --purple-glow-base-color: lavenderblush;
            --purple-glow-shine-color: magenta;
            --gold-glow-base-color: ivory;
            --gold-glow-shine-color: goldenrod;

        /* === BACKGROUND === */
        --bg-image: url(../assets/backgrounds/board.jpg);
        --bg-image-position: none;
        --bg-image-size: 100vw;
        --bg-image-repeat: none;
        --bg-image-attachment: scroll;

        /* === FONTS === */
        --body-font: var(--base-font);
        --header-font: "Shippori Antique B1", sans-serif;
            /* special font settings */
            --secondary-font: "Special Elite", monospace;
            --tertiary-font: "Gloock", serif;
            --quaternary-font: var(--body-font);
            --quinary-font: var(--body-font);
            --note-font: var(--body-font);
            --title-font: var(--header-font);
            --subtitle-font: var(--header-font);
            --h3-font: var(--header-font);
            --h4-font: var(--header-font);
            --h5-font: var(--header-font);
            --h6-font: var(--header-font);
            --code-font: monospace;
            --fancy-font: "Permanent Marker", cursive;
            --handwritten-font: serif;
            --scary-font: monospace;
            --angry-font: serif;
            --sad-font: monospace;
            --happy-font: serif;
            --alert-font: var(--code-font);
            --warning-font: var(--alert-font);
            --info-font: var(--alert-font);
            --alert-body-font: var(--code-font);
        /* font sizes */
        --body-font-size: 1rem;
        --alert-font-size: 1rem;
        --title-font-size: 3rem;
        --subtitle-font-size: 2.25rem;
        --h3-font-size: 2rem;
        --h4-font-size: 1.5rem;
        --h5-font-size: 1.25rem;
        --h6-font-size: 0.9rem;
        /* font weights */
        --body-font-weight: normal;
        --header-font-weight: normal;
        --link-font-weight: normal;
        --note-font-weight: normal;
        --code-font-weight: normal;
        --fancy-font-weight: normal;
        --handwritten-font-weight: normal;
            /* special font weight settings */
            --secondary-font-weight: var(--body-font-weight);
            --tertiary-font-weight: var(--body-font-weight);
            --title-font-weight: var(--header-font-weight);
            --subtitle-font-weight: var(--header-font-weight);
            --h3-font-weight: var(--header-font-weight);
            --h4-font-weight: var(--header-font-weight);
            --h5-font-weight: var(--header-font-weight);
            --h6-font-weight: var(--header-font-weight);
            --alert-font-weight: normal;
            --warning-font-weight: var(--alert-font-weight);
            --info-font-weight: var(--alert-font-weight);
            --alert-body-font-weight: var(--code-font-weight);
        /* font styles */
        --body-font-style: normal;
        --header-font-style: normal;
        --link-font-style: normal;
        --note-font-style: italic;
        --code-font-style: normal;
        --fancy-font-style: normal;
        --handwritten-font-style: normal;
            /* special font style settings */
            --secondary-font-style: var(--body-font-style);
            --tertiary-font-style: var(--body-font-style);
            --title-font-style: var(--header-font-style);
            --subtitle-font-style: var(--header-font-style);
            --h3-font-style: var(--header-font-style);
            --h4-font-style: var(--header-font-style);
            --h5-font-style: var(--header-font-style);
            --h6-font-style: var(--header-font-style);
            --alert-font-style: normal;
            --warning-font-style: var(--alert-font-style);
            --info-font-style: var(--alert-font-style);
            --alert-body-font-style: var(--code-font-style);
        /* font variants */
        --body-font-variant: normal;
        --header-font-variant: normal;
        --link-font-variant: normal;
        --note-font-variant: normal;
        --code-font-variant: normal;
        --fancy-font-variant: normal;
        --handwritten-font-variant: normal;
            /* special font variant settings */
            --secondary-font-variant: var(--body-font-style);
            --tertiary-font-variant: var(--body-font-style);
            --title-font-variant: var(--header-font-style);
            --subtitle-font-style: var(--header-font-style);
            --h3-font-variant: var(--header-font-style);
            --h4-font-variant: var(--header-font-style);
            --h5-font-variant: var(--header-font-style);
            --h6-font-variant: var(--header-font-style);
            --alert-font-variant: normal;
            --warning-font-variant: var(--alert-font-style);
            --info-font-variant: var(--alert-font-style);
            --alert-body-font-variant: var(--code-font-style);
        /* text decorations */
        --body-text-decoration: none;
        --header-text-decoration: none;
        --link-text-decoration: none;
        --note-text-decoration: none;
        --code-text-decoration: none;
        --fancy-text-decoration: none;
        --handwritten-text-decoration: none;
            /* special text decoration settings */
            --secondary-text-decoration: var(--body-text-decoration);
            --tertiary-text-decoration: var(--body-text-decoration);
            --title-text-decoration: var(--header-text-decoration);
            --subtitle-text-decoration: var(--header-text-decoration);
            --h3-text-decoration: var(--header-text-decoration);
            --h4-text-decoration: var(--header-text-decoration);
            --h5-text-decoration: var(--header-text-decoration);
            --h6-text-decoration: var(--header-text-decoration);
            --alert-text-decoration: none;
            --warning-text-decoration: var(--alert-text-decoration);
            --info-text-decoration: var(--alert-text-decoration);
            --alert-body-text-decoration: var(--code-text-decoration);
        /* text transforms */
        --body-text-transform: none;
        --header-text-transform: uppercase;
        --link-text-transform: none;
        --note-text-transform: none;
        --code-text-transform: none;
        --fancy-text-transform: none;
        --handwritten-text-transform: none;
            /* special text transform settings */
            --secondary-text-transform: var(--body-text-transform);
            --tertiary-text-transform: var(--body-text-transform);
            --title-text-transform: var(--header-text-transform);
            --subtitle-text-transform: var(--header-text-transform);
            --h3-text-transform: var(--header-text-transform);
            --h4-text-transform: var(--header-text-transform);
            --h5-text-transform: var(--header-text-transform);
            --h6-text-transform: none;
            --alert-text-transform: capitalize;
            --warning-text-transform: var(--alert-text-transform);
            --info-text-transform: var(--alert-text-transform);
            --alert-body-text-transform: var(--code-text-transform);
        /* text shadow */
        --body-text-shadow: none;
        --header-text-shadow: none;
        --link-text-shadow: none;
        --note-text-shadow: none;
        --code-text-shadow: none;
        --fancy-text-shadow: none;
        --handwritten-text-shadow: none;
            /* special text shadow settings */
            --secondary-text-shadow: var(--body-text-shadow);
            --tertiary-text-shadow: var(--body-text-shadow);
            --title-text-shadow: var(--header-text-shadow);
            --subtitle-text-shadow: var(--header-text-shadow);
            --h3-text-shadow: var(--header-text-shadow);
            --h4-text-shadow: var(--header-text-shadow);
            --h5-text-shadow: var(--header-text-shadow);
            --h6-text-shadow: var(--header-text-shadow);
            --alert-text-shadow: 0px 0px 5px red, -2px 0 rgba(255, 0, 0, 0.3), 2px 0 rgba(0, 255, 255, 0.3);
            --warning-text-shadow: 0px 0px 5px gold, -2px 0 rgba(255, 0, 0, 0.3), 2px 0 rgba(0, 255, 255, 0.3);
            --info-text-shadow: 0px 0px 5px dodgerblue, -2px 0 rgba(255, 0, 0, 0.3), 2px 0 rgba(0, 255, 255, 0.3);
            --alert-body-text-shadow: -2px 0 rgba(255, 0, 0, 0.3), 2px 0 rgba(0, 255, 255, 0.3);
        /* text align */
        --header-text-align: none;
            /* special text align settings */
            --title-text-align: center;
            --subtitle-text-align: center;
            --h3-text-align: var(--header-text-align);
            --h4-text-align: var(--header-text-align);
            --h5-text-align: var(--header-text-align);
            --h6-text-align: var(--header-text-align);

        /* === LINK ANIMATIONS === */
        --link-hover-font-color: white;
        --link-hover-font-size: none;
        --link-hover-font-weight: var(--link-font-weight);
        --link-hover-font-style: var(--link-font-style);
        --link-hover-font-variant: var(--link-font-variant);
        --link-hover-text-decoration: var(--link-text-decoration);
        --link-hover-text-transform: var(--link-text-transform);
        --link-hover-text-shadow: var(--link-text-shadow);
        --link-hover-transform: translateY(1px);
        --link-hover-animation-transition: none;

        /* === HEADER EFFECTS === */
        --title-before: none;
        --title-after: none;
        --subtitle-before: none;
        --subtitle-after: none;
        --h3-before: none;
        --h3-after: none;
        --h4-before: none;
        --h4-after: none;
        --h5-before: none;
        --h5-after: none;
        --h6-before: none;
        --h6-after: none;

        /* === HEADER AND FOOTER === */
        --header-flex-direction: column;
        --footer-flex-direction: column;

        /* === HORIZONTAL LINES === */
        --horizontal-line-color: var(--base-font-color);
        --horizontal-line-thickness: 1px;
        --horizontal-line-style: solid;
        --horizontal-line-text-gap: 8px;
            /* special horizontal line settings */
            --horizontal-line-secondary-color: var(--primary-color);
            --horizontal-line-thick-thickness: calc(var(--horizontal-line-thickness)*2);
            --horizontal-line-thin-thickness: calc(var(--horizontal-line-thickness)/2);
            --horizontal-line-font: var(--header-font);
            --horizontal-line-font-size: var(--header-font-size);
            --horizontal-line-font-weight: var(--header-font-weight);
            --horizontal-line-font-style: var(--header-font-style);
            --horizontal-line-font-variant: var(--header-font-variant);
            --horizontal-line-text-decoration: var(--header-text-decoration);
            --horizontal-line-text-transform: var(--header-text-transform);
            --horizontal-line-text-shadow: var(--header-text-shadow);
        
        /* === LIST PROPERTIES === */
        --ordered-list-style: decimal;
        --ordered-list-secondary-style: lower-alpha;
        --ordered-list-tertiary-style: lower-roman;
        --unordered-list-style: disc;
        --unordered-list-secondary-style: circle;
        --unordered-list-tertiary-style: square;
        --list-indent: 1rem;

        /* === TREE PROPERIES === */
        --tree-item-bg-color: none;
        --tree-font-color: none;
        --tree-font: var(--body-font);
        --tree-font-size: var(--body-font-size);
        --tree-font-weight: none;
        --tree-font-style: none;
        --tree-text-decoration: none;
        --tree-text-transform: none;
        --tree-text-shadow: none;
        --tree-title-font-color: none;
        --tree-title-font: var(--body-font);
        --tree-title-font-size: var(--h6-font-size);
        --tree-title-font-weight: var(--h6-font-weight);
        --tree-title-font-style: none;
        --tree-title-text-decoration: none;
        --tree-title-text-transform: none;
        --tree-title-text-shadow: none;
        --tree-line: 1px solid var(--base-font-color);
        --tree-item-border: 1px solid var(--base-font-color);
        --tree-item-border-radius: var(--base-border-radius);
        --tree-item-shadow: var(--base-shadow);
        --tree-item-padding: 0.2rem 4px;
        --tree-item-bg-image: none;
        --tree-item-bg-image-size: none;
        --tree-spacing: 4px;
        --tree-vertical-spacing: var(--tree-spacing);

        /* === TEXTBOX PROPERTIES */
        --textbox-bg-color: var(--bg-color);
        --textbox-font-color: none;
        --textbox-body-font-size: var(--body-font-size);
        --textbox-border: var(--base-border);
        --textbox-border-radius: var(--base-border-radius);
        --textbox-corner-shape: var(--base-corner-shape);
        --textbox-shadow: var(--base-shadow);
        --textbox-padding: 4px 8px;
        --textbox-margin: var(--base-padding);
            /* textbox 2 */
            --textbox-secondary-font-color: none;
            --textbox-secondary-bg-color: var(--textbox-bg-color);
            --textbox-secondary-body-font-size: var(--body-font-size);
            --textbox-secondary-border: var(--textbox-border);
            --textbox-secondary-border-radius: var(--textbox-border-radius);
            --textbox-secondary-corner-shape: var(--base-corner-shape);
            --textbox-secondary-shadow: var(--textbox-shadow);
            --textbox-secondary-padding: var(--textbox-padding);
            --textbox-secondary-margin: var(--textbox-margin);
            /* textbox 3 */
            --textbox-tertiary-font-color: none;
            --textbox-tertiary-bg-color: var(--textbox-bg-color);
            --textbox-tertiary-body-font-size: var(--body-font-size);
            --textbox-tertiary-border: var(--textbox-border);
            --textbox-tertiary-border-radius: var(--textbox-border-radius);
            --textbox-tertiary-corner-shape: var(--base-corner-shape);
            --textbox-tertiary-shadow: var(--textbox-shadow);
            --textbox-tertiary-padding: var(--textbox-padding);
            --textbox-tertiary-margin: var(--textbox-margin);

        /* === TABLE PROPERTIES === */
        --table-header-bg-color: var(--primary-color);
        --table-element-bg-color: var(--bg-color);
        --table-foot-bg-color: color-mix(in srgb, var(--shade-1-color), var(--table-element-bg-color) 85%);
        --table-subheader-bg-color: var(--table-element-bg-color);
        --table-body-font-size: 0.9rem;
        --table-title-font-size: 1.75rem;
        --table-header-font-size: 1rem;
        --table-subheader-font-size: 1rem;
        --table-header-before: none;
        --table-header-after: none;
        --table-border: 2px ridge var(--shade-4-color);
        --table-border-radius: 2px;
        --table-inner-border: var(--table-border);
        --table-top-border: var(--table-border);
        --table-header-side-border: var(--table-inner-border);
        --table-header-bottom-border: var(--table-inner-border);
        --table-corner-shape: var(--base-corner-shape);
        --table-vertical-align: top;
        --table-header-text-align: center;
        --table-element-text-align: left;
        --table-subheader-text-align: center;
        --table-shadow: var(--base-shadow);
        --table-header-bg-image: none;
        --table-header-bg-image-size: none;
        --table-element-bg-image: none;
        --table-element-bg-image-size: none;
        --table-foot-bg-image: var(--table-element-bg-image);
        --table-foot-bg-image-size: var(--table-element-bg-image-size);
        --table-subheader-bg-image: var(--table-element-bg-image);
        --table-subheader-bg-image-size: var(--table-element-bg-image-size);
        --table-padding: 2px 8px;
        --table-margin: var(--base-padding);
        /* special table settings */
            --table-element-font-color: none;
            --table-header-font-color: var(--header-font-color);
            --table-even-element-bg-color: color-mix(in srgb, var(--shade-1-color), var(--table-element-bg-color) 95%);
            --table-element-font: var(--code-font);
            --table-element-font-weight: none;
            --table-element-font-style: none;
            --table-element-text-decoration: none;
            --table-element-text-transform: none;
            --table-element-text-shadow: none;
            --table-header-font: var(--header-font);
            --table-header-font-weight: var(--header-font-weight);
            --table-header-font-style: var(--header-font-style);
            --table-header-font-variant: var(--header-font-variant);
            --table-header-text-decoration: var(--header-text-decoration);
            --table-header-text-transform: var(--header-text-transform);
            --table-header-text-shadow: var(--header-text-shadow);
            --table-title-font-weight: var(--table-header-font-weight);
            --table-title-font-variant: var(--table-header-font-variant);
            --table-title-text-transform: var(--table-header-text-transform);
            --table-subheader-font-weight: var(--table-header-font-weight);
            --table-subheader-font-variant: var(--table-header-font-variant);
            --table-subheader-text-transform: var(--table-element-text-transform);

        /* table 2 === */
        --table-secondary-header-bg-color: var(--table-header-bg-color);
        --table-secondary-element-bg-color: var(--table-element-bg-color);
        --table-secondary-foot-bg-color: var(--table-secondary-element-bg-color);
        --table-secondary-subheader-bg-color: var(--table-secondary-element-bg-color);
        --table-secondary-body-font-size: var(--table-body-font-size);
        --table-secondary-title-font-size: var(--table-title-font-size);
        --table-secondary-header-font-size: var(--table-header-font-size);
        --table-secondary-subheader-font-size: var(--table-subheader-font-size);
        --table-secondary-header-before: var(--table-header-before);
        --table-secondary-header-after: var(--table-header-after);
        --table-secondary-border: var(--table-border);
        --table-secondary-border-radius: var(--table-border-radius);
        --table-secondary-inner-border: var(--table-secondary-border);
        --table-secondary-top-border: var(--table-secondary-border);
        --table-secondary-header-side-border: var(--table-secondary-inner-border);
        --table-secondary-header-bottom-border: var(--table-secondary-inner-border);
        --table-secondary-corner-shape: var(--table-corner-shape);
        --table-secondary-vertical-align: var(--table-vertical-align);
        --table-secondary-header-text-align: var(--table-header-text-align);
        --table-secondary-element-text-align: var(--table-element-text-align);
        --table-secondary-subheader-text-align: var(--table-subheader-text-align);
        --table-secondary-shadow: var(--table-shadow);
        --table-secondary-header-bg-image: var(--table-header-bg-image);
        --table-secondary-header-bg-image-size: var(--table-header-bg-image-size);
        --table-secondary-element-bg-image: var(--table-element-bg-image);
        --table-secondary-element-bg-image-size: var(--table-element-bg-image-size);
        --table-secondary-foot-bg-image: var(--table-secondary-element-bg-image);
        --table-secondary-foot-bg-image-size: var(--table-secondary-element-bg-image-size);
        --table-secondary-subheader-bg-image: var(--table-secondary-element-bg-image);
        --table-secondary-subheader-bg-image-size: var(--table-secondary-element-bg-image-size);
        --table-secondary-padding: var(--table-padding);
        --table-secondary-margin: var(--table-margin);
            /* special table settings */
            --table-secondary-element-font-color: var(--table-element-font-color);
            --table-secondary-header-font-color: var(--table-header-font-color);
            --table-secondary-even-element-bg-color: var(--table-secondary-element-bg-color);
            --table-secondary-element-font: var(--table-element-font);
            --table-secondary-element-font-weight: var(--table-element-font-weight);
            --table-secondary-element-font-style: var(--table-element-font-style);
            --table-secondary-element-text-decoration: var(--table-element-text-decoration);
            --table-secondary-element-text-transform: var(--table-element-text-transform);
            --table-secondary-element-text-shadow: var(--table-element-text-shadow);
            --table-secondary-header-font: var(--table-header-font);
            --table-secondary-header-font-weight: var(--table-header-font-weight);
            --table-secondary-header-font-style: var(--table-header-font-style);
            --table-secondary-header-font-variant: var(--table-header-font-variant);
            --table-secondary-header-text-decoration: var(--table-header-text-decoration);
            --table-secondary-header-text-transform: var(--table-header-text-transform);
            --table-secondary-header-text-shadow: var(--table-header-text-shadow);
            --table-secondary-title-font-weight: var(--table-secondary-header-font-weight);
            --table-secondary-title-font-variant: var(--table-secondary-header-font-variant);
            --table-secondary-title-text-transform: var(--table-secondary-header-text-transform);
            --table-secondary-subheader-font-weight: var(--table-secondary-header-font-weight);
            --table-secondary-subheader-font-variant: var(--table-secondary-header-font-variant);
            --table-secondary-subheader-text-transform: var(--table-element-text-transform);
        
        /* table 3 === */
        --table-tertiary-header-bg-color: var(--table-header-bg-color);
        --table-tertiary-element-bg-color: var(--table-element-bg-color);
        --table-tertiary-foot-bg-color: var(--table-tertiary-element-bg-color);
        --table-tertiary-subheader-bg-color: var(--table-tertiary-element-bg-color);
        --table-tertiary-body-font-size: var(--table-body-font-size);
        --table-tertiary-title-font-size: var(--table-title-font-size);
        --table-tertiary-header-font-size: var(--table-header-font-size);
        --table-tertiary-subheader-font-size: var(--table-subheader-font-size);
        --table-tertiary-header-before: var(--table-header-before);
        --table-tertiary-header-after: var(--table-header-after);
        --table-tertiary-border: var(--table-border);
        --table-tertiary-border-radius: var(--table-border-radius);
        --table-tertiary-inner-border: var(--table-tertiary-border);
        --table-tertiary-top-border: var(--table-tertiary-border);
        --table-tertiary-header-side-border: var(--table-tertiary-inner-border);
        --table-tertiary-header-bottom-border: var(--table-tertiary-inner-border);
        --table-tertiary-corner-shape: var(--table-corner-shape);
        --table-tertiary-vertical-align: var(--table-vertical-align);
        --table-tertiary-header-text-align: var(--table-header-text-align);
        --table-tertiary-element-text-align: var(--table-element-text-align);
        --table-tertiary-subheader-text-align: var(--table-subheader-text-align);
        --table-tertiary-shadow: var(--table-shadow);
        --table-tertiary-header-bg-image: var(--table-header-bg-image);
        --table-tertiary-header-bg-image-size: var(--table-header-bg-image-size);
        --table-tertiary-element-bg-image: var(--table-element-bg-image);
        --table-tertiary-element-bg-image-size: var(--table-element-bg-image-size);
        --table-tertiary-foot-bg-image: var(--table-tertiary-element-bg-image);
        --table-tertiary-foot-bg-image-size: var(--table-tertiary-element-bg-image-size);
        --table-tertiary-subheader-bg-image: var(--table-tertiary-element-bg-image);
        --table-tertiary-subheader-bg-image-size: var(--table-tertiary-element-bg-image-size);
        --table-tertiary-padding: var(--table-padding);
        --table-tertiary-margin: var(--table-margin);
            /* special table settings */
            --table-tertiary-element-font-color: var(--table-element-font-color);
            --table-tertiary-header-font-color: var(--table-header-font-color);
            --table-tertiary-even-element-bg-color: var(--table-tertiary-element-bg-color);
            --table-tertiary-element-font: var(--table-element-font);
            --table-tertiary-element-font-weight: var(--table-element-font-weight);
            --table-tertiary-element-font-style: var(--table-element-font-style);
            --table-tertiary-element-text-decoration: var(--table-element-text-decoration);
            --table-tertiary-element-text-transform: var(--table-element-text-transform);
            --table-tertiary-element-text-shadow: var(--table-element-text-shadow);
            --table-tertiary-header-font: var(--table-header-font);
            --table-tertiary-header-font-weight: var(--table-header-font-weight);
            --table-tertiary-header-font-style: var(--table-header-font-style);
            --table-tertiary-header-font-variant: var(--table-header-font-variant);
            --table-tertiary-header-text-decoration: var(--table-header-text-decoration);
            --table-tertiary-header-text-transform: var(--table-header-text-transform);
            --table-tertiary-header-text-shadow: var(--table-header-text-shadow);
            --table-tertiary-title-font-weight: var(--table-tertiary-header-font-weight);
            --table-tertiary-title-font-variant: var(--table-tertiary-header-font-variant);
            --table-tertiary-title-text-transform: var(--table-tertiary-header-text-transform);
            --table-tertiary-subheader-font-weight: var(--table-tertiary-header-font-weight);
            --table-tertiary-subheader-font-variant: var(--table-tertiary-header-font-variant);
            --table-tertiary-subheader-text-transform: var(--table-element-text-transform);

        /* === FRAMES === */
        --frame-border: 1px solid var(--shade-1-color);
        --frame-border-radius: var(--base-border-radius);
        --frame-shadow: var(--base-shadow);
        --scaleframe-max-width: var(--base-frame-size);
        --scaleframe-max-height: var(--base-frame-size);
        --scaleframe-secondary-max-width: calc(var(--base-frame-size)*0.8);
        --scaleframe-secondary-max-height: calc(var(--base-frame-size)*0.6);
        --scaleframe-tertiary-max-width: calc(var(--base-frame-size)*0.4);
        --scaleframe-tertiary-max-height: calc(var(--base-frame-size)*0.4);
        --scaleframe-quaternary-max-width: calc(var(--base-frame-size)*0.375);
        --scaleframe-quaternary-max-height: calc(var(--base-frame-size)*0.3);
        --scaleframe-quinary-max-width: calc(var(--base-frame-size)*0.2);
        --scaleframe-quinary-max-height: calc(var(--base-frame-size)*0.2);
        --autoframe-max-width: var(--base-frame-size);
        --autoframe-max-height: var(--base-frame-size);
            /* special frame settings */
            --frame-border-secondary: var(--frame-border);
            --frame-border-tertiary: var(--frame-border);
            --frame-border-secondary-radius: var(--frame-border-radius);
            --frame-border-tertiary-radius: var(--frame-border-radius);

        /* === ALERTS === */
        --alert-text-transform: uppercase;
        --alert-text: "Alert";
        --warning-text: "Warning";
        --info-text: "Info";
        --alert-spacing: 5rem;
        --warning-spacing: 5rem;
        --info-spacing: 5rem;

        /* === PADDING === */
        --paragraph-padding: var(--base-padding);
        --break-padding: calc(var(--base-padding)*2);
        --break-small-padding: var(--base-padding);
        --break-large-padding: calc(var(--base-padding)*4);
        --default-column-gap: var(--base-padding);
        --header-padding: calc(var(--base-padding)/4);
        --title-padding: 0px;
        --subtitle-padding: 8px;
            /* special padding settings */
            --h3-padding: var(--header-padding);
            --h4-padding: var(--header-padding);
            --h5-padding: calc(var(--header-padding)/2);
            --h6-padding: calc(var(--header-padding)/2);

        /* === MARGINS === */
        --header-section-margin: var(--base-padding);

        /* === BUTTONS === */
        --button-bg-color: var(--primary-color);
        --button-font-color: var(--base-font-color);
        --button-font: var(--base-font);
        --button-font-size: 1.2rem;
        --button-font-weight: normal;
        --button-font-style: normal;
        --button-font-variant: normal;
        --button-text-decoration: none;
        --button-text-transform: none;
        --button-text-shadow: none;
        --button-padding: 4px 8px;
        --button-border: none;
        --button-border-radius: 2.25rem;
        --button-corner-shape: var(--base-corner-shape);
        --button-hover-font-color: var(--button-font-color);
        --button-hover-font-size: var(--button-font-size);
        --button-hover-font-weight: var(--button-font-weight);
        --button-hover-font-style: var(--button-font-style);
        --button-hover-font-variant: var(--button-font-variant);
        --button-hover-text-decoration: var(--button-text-decoration);
        --button-hover-text-transform: var(--button-text-transform);
        --button-hover-text-shadow: var(--button-text-shadow);
        --button-hover-border: var(--button-border);
        --button-hover-transform: none;
        --button-hover-animation-transition: none;
        /* button 2 */
        --button-secondary-bg-color: var(--button-bg-color);
        --button-secondary-font-color: var(--button-font-color);
        --button-secondary-font: var(--button-font);
        --button-secondary-font-size: var(--button-font-size);
        --button-secondary-font-weight: var(--button-font-weight);
        --button-secondary-font-style: var(--button-font-style);
        --button-secondary-font-variant: var(--button-font-variant);
        --button-secondary-text-decoration: var(--button-text-decoration);
        --button-secondary-text-transform: var(--button-text-transform);
        --button-secondary-text-shadow: var(--button-text-shadow);
        --button-secondary-padding: var(--button-padding);
        --button-secondary-border: var(--button-border);
        --button-secondary-border-radius: var(--button-border-radius);
        --button-secondary-hover-font-color: var(--button-secondary-font-color);
        --button-secondary-hover-font-size: var(--button-secondary-font-size);
        --button-secondary-hover-font-weight: var(--button-secondary-font-weight);
        --button-secondary-hover-font-style: var(--button-secondary-font-style);
        --button-secondary-hover-font-variant: var(--button-secondary-font-variant);
        --button-secondary-hover-text-decoration: var(--button-secondary-text-decoration);
        --button-secondary-hover-text-transform: var(--button-secondary-text-transform);
        --button-secondary-hover-text-shadow: var(--button-secondary-text-shadow);
        --button-secondary-hover-border: var(--button-secondary-border);
        --button-secondary-hover-transform: var(--button-hover-transform);
        --button-secondary-hover-animation-transition: var(--button-hover-animation-transition);
        /* button 3 */
        --button-tertiary-bg-color: var(--button-bg-color);
        --button-tertiary-font-color: var(--button-font-color);
        --button-tertiary-font: var(--button-font);
        --button-tertiary-font-size: var(--button-font-size);
        --button-tertiary-font-weight: var(--button-font-weight);
        --button-tertiary-font-style: var(--button-font-style);
        --button-tertiary-font-variant: var(--button-font-variant);
        --button-tertiary-text-decoration: var(--button-text-decoration);
        --button-tertiary-text-transform: var(--button-text-transform);
        --button-tertiary-text-shadow: var(--button-text-shadow);
        --button-tertiary-padding: var(--button-padding);
        --button-tertiary-border: var(--button-border);
        --button-tertiary-border-radius: var(--button-border-radius);
        --button-tertiary-hover-font-color: var(--button-tertiary-font-color);
        --button-tertiary-hover-font-size: var(--button-tertiary-font-size);
        --button-tertiary-hover-font-weight: var(--button-tertiary-font-weight);
        --button-tertiary-hover-font-style: var(--button-tertiary-font-style);
        --button-tertiary-hover-font-variant: var(--button-tertiary-font-variant);
        --button-tertiary-hover-text-decoration: var(--button-tertiary-text-decoration);
        --button-tertiary-hover-text-transform: var(--button-tertiary-text-transform);
        --button-tertiary-hover-text-shadow: var(--button-tertiary-text-shadow);
        --button-tertiary-hover-border: var(--button-tertiary-border);
        --button-tertiary-hover-transform: none;
        --button-tertiary-hover-animation-transition: var(--button-hover-animation-transition);
        /* affirmative button */
        --button-affirmative-bg-color: dodgerblue;
        --button-affirmative-font-color: var(--button-font-color);
        --button-affirmative-font: var(--button-font);
        --button-affirmative-font-size: var(--button-font-size);
        --button-affirmative-font-weight: var(--button-font-weight);
        --button-affirmative-font-style: var(--button-font-style);
        --button-affirmative-font-variant: var(--button-font-variant);
        --button-affirmative-text-decoration: var(--button-text-decoration);
        --button-affirmative-text-transform: var(--button-text-transform);
        --button-affirmative-text-shadow: var(--button-text-shadow);
        --button-affirmative-padding: var(--button-padding);
        --button-affirmative-border: var(--button-border);
        --button-affirmative-border-radius: var(--button-border-radius);
        --button-affirmative-hover-font-color: var(--button-secondary-font-color);
        --button-affirmative-hover-font-size: var(--button-secondary-font-size);
        --button-affirmative-hover-font-weight: var(--button-secondary-font-weight);
        --button-affirmative-hover-font-style: var(--button-secondary-font-style);
        --button-affirmative-hover-font-variant: var(--button-secondary-font-variant);
        --button-affirmative-hover-text-decoration: var(--button-secondary-text-decoration);
        --button-affirmative-hover-text-transform: var(--button-secondary-text-transform);
        --button-affirmative-hover-text-shadow: var(--button-secondary-text-shadow);
        --button-affirmative-hover-border: var(--button-secondary-border);
        --button-affirmative-hover-transform: var(--button-hover-transform);
        --button-affirmative-hover-animation-transition: var(--button-hover-animation-transition);
        /* negative button */
        --button-negative-bg-color: red;
        --button-negative-font-color: var(--button-font-color);
        --button-negative-font: var(--button-font);
        --button-negative-font-size: var(--button-font-size);
        --button-negative-font-weight: var(--button-font-weight);
        --button-negative-font-style: var(--button-font-style);
        --button-negative-font-variant: var(--button-font-variant);
        --button-negative-text-decoration: var(--button-text-decoration);
        --button-negative-text-transform: var(--button-text-transform);
        --button-negative-text-shadow: var(--button-text-shadow);
        --button-negative-padding: var(--button-padding);
        --button-negative-border: var(--button-border);
        --button-negative-border-radius: var(--button-border-radius);
        --button-negative-hover-font-color: var(--button-tertiary-font-color);
        --button-negative-hover-font-size: var(--button-tertiary-font-size);
        --button-negative-hover-font-weight: var(--button-tertiary-font-weight);
        --button-negative-hover-font-style: var(--button-tertiary-font-style);
        --button-negative-hover-font-variant: var(--button-tertiary-font-variant);
        --button-negative-hover-text-decoration: var(--button-tertiary-text-decoration);
        --button-negative-hover-text-transform: var(--button-tertiary-text-transform);
        --button-negative-hover-text-shadow: var(--button-tertiary-text-shadow);
        --button-negative-hover-border: var(--button-tertiary-border);
        --button-negative-hover-transform: none;
        --button-negative-hover-animation-transition: var(--button-hover-animation-transition);

        /* === MENUS === */
        --menu-item-bg-color: transparent;
        --menu-font-color: var(--header-font-color);
        --menu-font: var(--header-font);
        --menu-font-size: 1rem;
        --menu-font-weight: normal;
        --menu-font-style: normal;
        --menu-font-variant: normal;
        --menu-text-decoration: none;
        --menu-text-transform: uppercase;
        --menu-text-shadow: none;
        --menu-item-border: none;
        --menu-outer-border: var(--menu-item-border);
        --menu-inner-border-left: var(--menu-item-border);
        --menu-inner-border-right: var(--menu-item-border);
        --menu-top-border: var(--menu-item-border);
        --menu-bottom-border: var(--menu-item-border);
        --menu-item-border-radius: var(--base-border-radius);
        --menu-flex-direction: row;
        --menu-gap: 8px;
        --menu-item-padding: 4px 8px;
        --menu-margin: var(--base-padding);
        --menu-hover-item-bg-color: var(--menu-item-bg-color);
        --menu-hover-font-color: var(--primary-color);
        --menu-hover-font-size: var(--menu-font-size);
        --menu-hover-font-weight: var(--menu-font-weight);
        --menu-hover-font-style: var(--menu-font-style);
        --menu-hover-font-variant: var(--menu-font-variant);
        --menu-hover-text-decoration: var(--menu-text-decoration);
        --menu-hover-text-transform: var(--menu-text-transform);
        --menu-hover-text-shadow: 0px 0px 5px black;
        --menu-hover-border: var(--menu-border);
        --menu-hover-top-border: var(--menu-top-border);
        --menu-hover-bottom-border: var(--menu-bottom-border);
        --menu-hover-transform: none;
        --menu-hover-animation-transition: none;
            /* menu 2 */
            --menu-secondary-item-bg-color: var(--menu-item-bg-color);
            --menu-secondary-font-color: var(--menu-font-color);
            --menu-secondary-font: var(--menu-font);
            --menu-secondary-font-size: var(--menu-font-size);
            --menu-secondary-font-weight: var(--menu-font-weight);
            --menu-secondary-font-style: var(--menu-font-style);
            --menu-secondary-font-variant: var(--menu-font-variant);
            --menu-secondary-text-decoration: var(--menu-text-decoration);
            --menu-secondary-text-transform: var(--menu-text-transform);
            --menu-secondary-text-shadow: var(--menu-text-shadow);
            --menu-secondary-item-border: var(--menu-item-shadow);
            --menu-secondary-outer-border: var(--menu-secondary-item-border);
            --menu-secondary-inner-border-left: var(--menu-secondary-item-border);
            --menu-secondary-inner-border-right: var(--menu-secondary-item-border);
            --menu-secondary-top-border: var(--menu-secondary-item-border);
            --menu-secondary-bottom-border: var(--menu-secondary-item-border);
            --menu-secondary-item-border-radius: var(--base-border-radius);
            --menu-secondary-flex-direction: var(--menu-flex-direction);
            --menu-secondary-gap: var(--menu-gap);
            --menu-secondary-item-padding: var(--menu-item-padding);
            --menu-secondary-margin: var(--menu-margin);
            --menu-secondary-hover-item-bg-color: var(--menu-item-bg-color);
            --menu-secondary-hover-font-color: var(--menu-secondary-font-color);
            --menu-secondary-hover-font-size: var(--menu-secondary-font-size);
            --menu-secondary-hover-font-weight: var(--menu-secondary-font-weight);
            --menu-secondary-hover-font-style: var(--menu-secondary-font-style);
            --menu-secondary-hover-font-variant: var(--menu-secondary-font-variant);
            --menu-secondary-hover-text-decoration: var(--menu-secondary-text-decoration);
            --menu-secondary-hover-text-transform: var(--menu-text-transform);
            --menu-secondary-hover-text-shadow: var(--menu-secondary-text-shadow);
            --menu-secondary-hover-border: var(--menu-secondary-border);
            --menu-secondary-hover-top-border: var(--menu-secondary-top-border);
            --menu-secondary-hover-bottom-border: var(--menu-secondary-bottom-border);
            --menu-secondary-hover-transform: var(--menu-hover-transform);
            --menu-secondary-hover-animation-transition: var(--menu-hover-animation-transition);
            /* menu 3 */
            --menu-tertiary-item-bg-color: var(--menu-item-bg-color);
            --menu-tertiary-font-color: var(--menu-font-color);
            --menu-tertiary-font: var(--menu-font);
            --menu-tertiary-font-size: var(--menu-font-size);
            --menu-tertiary-font-weight: var(--menu-font-weight);
            --menu-tertiary-font-style: var(--menu-font-style);
            --menu-tertiary-font-variant: var(--menu-font-variant);
            --menu-tertiary-text-decoration: var(--menu-text-decoration);
            --menu-tertiary-text-transform: var(--menu-text-transform);
            --menu-tertiary-text-shadow: var(--menu-text-shadow);
            --menu-tertiary-item-border: var(--menu-item-shadow);
            --menu-tertiary-outer-border: var(--menu-tertiary-item-border);
            --menu-tertiary-inner-border-left: var(--menu-tertiary-item-border);
            --menu-tertiary-inner-border-right: var(--menu-tertiary-item-border);
            --menu-tertiary-top-border: var(--menu-tertiary-item-border);
            --menu-tertiary-bottom-border: var(--menu-tertiary-item-border);
            --menu-tertiary-item-border-radius: var(--base-border-radius);
            --menu-tertiary-flex-direction: var(--menu-flex-direction);
            --menu-tertiary-gap: var(--menu-gap);
            --menu-tertiary-item-padding: var(--menu-item-padding);
            --menu-tertiary-margin: var(--menu-margin);
            --menu-tertiary-hover-item-bg-color: var(--menu-item-bg-color);
            --menu-tertiary-hover-font-color: var(--menu-tertiary-font-color);
            --menu-tertiary-hover-font-size: var(--menu-tertiary-font-size);
            --menu-tertiary-hover-font-weight: var(--menu-tertiary-font-weight);
            --menu-tertiary-hover-font-style: var(--menu-tertiary-font-style);
            --menu-tertiary-hover-font-variant: var(--menu-tertiary-font-variant);
            --menu-tertiary-hover-text-decoration: var(--menu-tertiary-text-decoration);
            --menu-tertiary-hover-text-transform: var(--menu-text-transform);
            --menu-tertiary-hover-text-shadow: var(--menu-tertiary-text-shadow);
            --menu-tertiary-hover-border: var(--menu-tertiary-border);
            --menu-tertiary-hover-top-border: var(--menu-tertiary-top-border);
            --menu-tertiary-hover-bottom-border: var(--menu-tertiary-bottom-border);
            --menu-tertiary-hover-transform: var(--menu-hover-transform);
            --menu-tertiary-hover-animation-transition: var(--menu-hover-animation-transition);

        /* === TRANSITIONS === */
        --transition-mask: url(../assets/transitions/grunge.png);
        --transition-mask-width: 4000px;
        --transition-height: 194px;
        --transition-compensation-top: 150px;
        --transition-compensation-prev: 0px;
        --transition-bottom-mask: url(../assets/transitions/flippednegative/grunge.png);
        --transition-bottom-mask-width: 4000px;
        --transition-bottom-height: 194px;
        --transition-bottom-compensation: 125px;

        /* === EFFECTS === */
        --text-outline-color: var(--base-font-color);
        --text-outline-secondary-color: var(--inverted-font-color);
        --dropshadow: 4px 4px 10px rgba(0, 0, 0, 0.25);
        --background-texture-image: none;
        --background-texture-image-size: none;
        --background-texture-alpha: 0;
        --background-texture-2-image: none;
        --background-texture-2-image-size: none;
        --background-texture-2-alpha: 0;
        --overlay-image: url(../assets/overlays/grunge2dark.png);
        --overlay-image-size: none;
        --overlay-alpha: 1;
        --overlay-2-image: url(../assets/overlays/grungedark.png);
        --overlay-2-image-size: none;
        --overlay-2-alpha: 1;
    }
}