:root {
    --has-page-shadow: 0;
    --cur-font-size-multi: 1;
}

html {
    font-size: calc(var(--base-font-size)*var(--cur-font-size-multi));
}

@media screen and (max-width: 900px) {:root {--cur-font-size-multi: var(--screen-900px-font-size-multi);}}
@media screen and (max-width: 850px) {:root {--cur-font-size-multi: var(--screen-850px-font-size-multi);}}
@media screen and (max-width: 800px) {:root {--cur-font-size-multi: var(--screen-800px-font-size-multi);}}
@media screen and (max-width: 750px) {:root {--cur-font-size-multi: var(--screen-750px-font-size-multi);}}
@media screen and (max-width: 700px) {:root {--cur-font-size-multi: var(--screen-700px-font-size-multi);}}
@media screen and (max-width: 650px) {:root {--cur-font-size-multi: var(--screen-650px-font-size-multi);}}
@media screen and (max-width: 600px) {:root {--cur-font-size-multi: var(--screen-600px-font-size-multi);}}
@media screen and (max-width: 550px) {:root {--cur-font-size-multi: var(--screen-550px-font-size-multi);}}
@media screen and (max-width: 500px) {:root {--cur-font-size-multi: var(--screen-500px-font-size-multi);}}
@media screen and (max-width: 450px) {:root {--cur-font-size-multi: var(--screen-450px-font-size-multi);}}
@media screen and (max-width: 400px) {:root {--cur-font-size-multi: var(--screen-400px-font-size-multi);}}
@media screen and (max-width: 350px) {:root {--cur-font-size-multi: var(--screen-350px-font-size-multi);}}
@media screen and (max-width: 300px) {:root {--cur-font-size-multi: var(--screen-300px-font-size-multi);}}
@media screen and (max-width: 250px) {:root {--cur-font-size-multi: var(--screen-250px-font-size-multi);}}
@media screen and (max-width: 200px) {:root {--cur-font-size-multi: var(--screen-200px-font-size-multi);}}
@media screen and (max-width: 150px) {:root {--cur-font-size-multi: var(--screen-150px-font-size-multi);}}
@media screen and (max-width: 100px) {:root {--cur-font-size-multi: var(--screen-100px-font-size-multi);}}
@media screen and (max-width: 50px) {:root {--cur-font-size-multi: var(--screen-50px-font-size-multi);}}

* {
    padding: 0;
    margin: 0;
}

body {
    padding-top: 0;
    box-shadow: 0px 0px calc(5px*var(--has-page-shadow)) rgba(0,0,0, 0.3);
}

.body-container {
    position: relative;
    color: var(--body-font-color);
    background-color: var(--bg-color);
    background-image: var(--bg-image);
    background-position: var(--bg-image-position);
    background-size: var(--bg-image-size);
    background-repeat: var(--bg-image-repeat);
    background-attachment: var(--bg-image-attachment);
    font-family: var(--body-font);
    font-size: var(--body-font-size);
}

.body-container + .body-container {
    mask: var(--transition-mask) 0 0/var(--transition-mask-width) var(--transition-height), linear-gradient(black, black) 0% var(--transition-height);
    mask-composite: exclude;
    mask-repeat: repeat-x;
    translate: 0 calc(var(--transition-height)*-1);
    margin-bottom: calc(var(--transition-height)*-1);
    &::before {
        content: "";
        display: block;
        top: 0;
        left: 0;
        width: 100%;
        height: var(--transition-compensation-top);
    }
}
.body-container + .body-container:has(+ .body-container) {
    mask: var(--transition-mask) 0 0/var(--transition-mask-width) var(--transition-height), var(--transition-bottom-mask) 0 calc(100%)/var(--transition-bottom-mask-width) var(--transition-bottom-height), linear-gradient(black, black) 0% var(--transition-height)/100%;
    mask-composite: exclude;
    mask-repeat: repeat-x;
    margin-bottom: calc(var(--transition-height)*-1);
    &::after {
        content: "";
        display: block;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--transition-bottom-compensation);
    }
}

.body-container:has(+ .body-container) {
    mask: var(--transition-bottom-mask) 0 calc(100%)/var(--transition-bottom-mask-width) var(--transition-bottom-height), linear-gradient(black, black) 0% 0%/100%;
    mask-composite: exclude;
    mask-repeat: repeat-x;
    margin-bottom: calc(var(--transition-height)*-1);
    &::after {
        content: "";
        display: block;
        bottom: 0;
        left: 0;
        width: 100%;
        height: var(--transition-bottom-compensation);
    }
}

.page-container {
    z-index: -100;
    margin: 0 auto;
    max-width: var(--page-width);
    padding: var(--page-padding);
}

.bottom-remover {
    display: block;
    height: 0.1px;
    margin-top: -1000px;
}

header { /* put title (h1) in here */
    display: flex;
    flex-direction: var(--header-flex-direction);
    align-items: center;
    justify-content: space-around;
    margin-bottom: var(--header-section-margin);
}
footer {
    display: flex;
    flex-direction: var(--footer-flex-direction);
    justify-content: space-around;
    align-items: center;
}

hr {
    border-width: 0;
    border-top: var(--horizontal-line-thickness) var(--horizontal-line-style) var(--horizontal-line-color);
}
hr.secondary {border-top-color: var(--horizontal-line-secondary-color);}
hr.thick {border-top-width: var(--horizontal-line-thick-thickness);}
hr.thin {border-top-width: var(--horizontal-line-thin-thickness);}
hr.solid {border-top-style: solid;}
hr.dashed {border-top-style: dashed;}
hr.dotted {border-top-style: dotted;}
hr.full-width {
    border-top: none;
    &::before {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        max-width: 100%;
        width: 100%;
        border-top: var(--horizontal-line-thickness) var(--horizontal-line-style) var(--horizontal-line-color);
    }
}
hr.full-width.secondary {&::before {border-top-color: var(--horizontal-line-secondary-color);}}
hr.full-width.thick, hr.text.thick {&::before {border-top-width: var(--horizontal-line-thick-thickness);}}
hr.full-width.thin, hr.text.thin {&::before {border-top-width: var(--horizontal-line-thin-thickness);}}
hr.full-width.solid, hr.text.solid {&::before {border-top-style: solid;}}
hr.full-width.dashed, hr.text.dashed {&::before {border-top-style: dashed;}}
hr.full-width.dotted, hr.text.dotted {&::before {border-top-style: dotted;}}
hr.fade {
    border-top: none;
    border-radius: 50%;
    height:  var(--horizontal-line-thickness);
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 3%, var(--horizontal-line-color) 50%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%);
}
hr.fade.secondary {background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 3%, var(--horizontal-line-secondary-color) 50%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%);}
hr.fade.thick {height:  var(--horizontal-line-thick-thickness);}
hr.fade.thin {height:  var(--horizontal-line-thin-thickness);}
hr.text {
    background: transparent;
    border: 0;
    height: calc(var(--horizontal-line-font-size)*1.5);
    position: relative;
    text-align: center;
    color: var(--horizontal-line-color);
    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        border-top: var(--horizontal-line-thickness) var(--horizontal-line-style) var(--horizontal-line-color);
    }
    &::after {
        content: attr(text);
        position: relative;
        display: inline-block;
        line-height: var(--horizontal-line-font-size);
        padding: 0 var(--horizontal-line-text-gap);
        color: var(--horizontal-line-color);
        background-color: var(--bg-color);
        font-family: var(--horizontal-line-font);
        font-weight: var(--horizontal-line-font-weight);
        font-style: var(--horizontal-line-font-style);
        font-variant: var(--horizontal-line-font-variant);
        text-decoration: var(--horizontal-line-text-decoration);
        text-transform: var(--horizontal-line-text-transform);
        text-shadow: var(--horizontal-line-text-shadow);
    }
}
hr.text.gap-xs {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 1.25rem) 100%, calc(50% - 1.25rem) 0, calc(50% + 1.25rem) 0, calc(50% + 1.25rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.gap-s {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 1.75rem) 100%, calc(50% - 1.75rem) 0, calc(50% + 1.75rem) 0, calc(50% + 1.75rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.gap-m {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 2.25rem) 100%, calc(50% - 2.25rem) 0, calc(50% + 2.25rem) 0, calc(50% + 2.25rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.gap-l {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 3.75rem) 100%, calc(50% - 3.75rem) 0, calc(50% + 3.75rem) 0, calc(50% + 3.75rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.gap-xl {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 5rem) 100%, calc(50% - 5rem) 0, calc(50% + 5rem) 0, calc(50% + 5rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.gap-xxl {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 6.5rem) 100%, calc(50% - 6.5rem) 0, calc(50% + 6.5rem) 0, calc(50% + 6.5rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.gap-xxxl {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 9rem) 100%, calc(50% - 9rem) 0, calc(50% + 9rem) 0, calc(50% + 9rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.gap-xxxxl {&::before{clip-path: polygon(0% 0%, 0% 100%, calc(50% - 11.5rem) 100%, calc(50% - 11.5rem) 0, calc(50% + 11.5rem) 0, calc(50% + 11.5rem) 100%, 100% 100%, 100% 0%);} &::after{background-color: transparent;}}
hr.text.fade {
    &::before {
        border-top: none;
        border-radius: 50%;
        height: var(--horizontal-line-thickness);
        background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 3%, var(--horizontal-line-color) 50%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%);
    }
}
hr.text.fade.secondary {background: 0; &::before {background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 3%, var(--horizontal-line-secondary-color) 50%, rgba(0,0,0,0) 97%, rgba(0,0,0,0) 100%);}}
hr.text.fade.thick {height: calc(var(--horizontal-line-font-size)*1.5); &::before {height: var(--horizontal-line-thick-thickness);}}
hr.text.fade.thin {height: calc(var(--horizontal-line-font-size)*1.5); &::before {height: var(--horizontal-line-thin-thickness);}}
hr.text.secondary {&::before {border-top-color: var(--horizontal-line-secondary-color);} &::after {color: var(--horizontal-line-secondary-color);}}

p {
    padding-bottom: var(--paragraph-padding);
}
.font-size-1x {font-size: var(--body-font-size);}
.font-size-qx {font-size: calc(var(--body-font-size)*0.25);}
.font-size-hx {font-size: calc(var(--body-font-size)*0.5);}
.font-size-tqx {font-size: calc(var(--body-font-size)*0.75);}
.font-size-sm {font-size: calc(var(--body-font-size)*0.9);}
.font-size-lg {font-size: calc(var(--body-font-size)*1.1);}
.font-size-1qx {font-size: calc(var(--body-font-size)*1.25);}
.font-size-1hx {font-size: calc(var(--body-font-size)*1.5);}
.font-size-1tqx {font-size: calc(var(--body-font-size)*1.75);}
.font-size-2x {font-size: calc(var(--body-font-size)*2);}
.font-size-3x {font-size: calc(var(--body-font-size)*3);}
.font-size-4x {font-size: calc(var(--body-font-size)*4);}
.font-size-6x {font-size: calc(var(--body-font-size)*6);}
.font-size-8x {font-size: calc(var(--body-font-size)*8);}

.break {
    padding-bottom: var(--break-padding);
}
.break-small {
    padding-bottom: var(--break-small-padding);
}
.break-large {
    padding-bottom: var(--break-large-padding);
}

.center {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.left {
    display: flex;
    flex-direction: column;
    align-items: start;
}
.right {
    display: flex;
    flex-direction: column;
    align-items: end;
}
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}
.nowrap {
    white-space: nowrap;
}
.row {
    display: flex;
    flex-direction: row;
    align-items: start;
    justify-content: space-around;
    gap: var(--default-column-gap);
}
.row-centered {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
}

.columns-2, .columns-3, .columns-4, .columns-5, .columns-6, .columns-7, .columns-8 {
    display: grid;
    gap: var(--default-column-gap);
    row-gap: 0px;
    align-items: start;
}
.columns-2 {grid-template-columns: 1fr 1fr;}
.columns-3 {grid-template-columns: 1fr 1fr 1fr;}
.columns-4 {grid-template-columns: 1fr 1fr 1fr 1fr;}
.columns-5 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.columns-6 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.columns-7 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.columns-8 {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
.gap-0, .columns-2.gap-0, .columns-3.gap-0, .columns-4.gap-0, .columns-5.gap-0, .columns-6.gap-0, .columns-7.gap-0, .columns-8.gap-0 {gap: 0px;}
.gap-1, .columns-2.gap-1, .columns-3.gap-1, .columns-4.gap-1, .columns-5.alert-title, .columns-6.gap-1, .columns-7.gap-1, .columns-8.gap-1 {gap: 1px;}
.gap-2, .columns-2.gap-2, .columns-3.gap-2, .columns-4.gap-2, .columns-5.gap-2, .columns-6.gap-2, .columns-7.gap-2, .columns-8.gap-2 {gap: 2px;}
.gap-4, .columns-2.gap-4, .columns-3.gap-4, .columns-4.gap-4, .columns-5.gap-4, .columns-6.gap-4, .columns-7.gap-4, .columns-8.gap-4 {gap: 4px;}
.gap-8, .columns-2.gap-8, .columns-3.gap-8, .columns-4.gap-8, .columns-5.gap-8, .columns-6.gap-8, .columns-7.gap-8, .columns-8.gap-8 {gap: 8px;}
.gap-16, .columns-2.gap-16, .columns-3.gap-16, .columns-4.gap-16, .columns-5.gap-16, .columns-6.gap-16, .columns-7.gap-16, .columns-8.gap-16 {gap: 16px;}
.gap-32, .columns-2.gap-32, .columns-3.gap-32, .columns-4.gap-32, .columns-5.gap-32, .columns-6.gap-32, .columns-7.gap-32, .columns-8.gap-32 {gap: 32px;}

.packed-columns-2 {
    column-count: 2;
    column-gap: var(--default-column-gap);
    padding-bottom: var(--base-padding);
}
.packed-columns-3 {
    column-count: 3;
    column-gap: var(--default-column-gap);
    padding-bottom: var(--base-padding);
}
.packed-columns-4 {
    column-count: 4;
    column-gap: var(--default-column-gap);
    padding-bottom: var(--base-padding);
}
.packed-columns-5 {
    column-count: 5;
    column-gap: var(--default-column-gap);
    padding-bottom: var(--base-padding);
}
.packed-columns-6 {
    column-count: 6;
    column-gap: var(--default-column-gap);
    padding-bottom: var(--base-padding);
}
.packed-columns-7 {
    column-count: 7;
    column-gap: var(--default-column-gap);
    padding-bottom: var(--base-padding);
}
.packed-columns-8 {
    column-count: 8;
    column-gap: var(--default-column-gap);
    padding-bottom: var(--base-padding);
}

.span-2 {grid-column: span 2;}
.span-3 {grid-column: span 3;}
.span-4 {grid-column: span 4;}
.span-5 {grid-column: span 5;}
.span-6 {grid-column: span 6;}
.span-7 {grid-column: span 7;}
.span-8 {grid-column: span 8;}
.span-all {grid-column: 1/-1;}
.packed-span-all {column-span: all;}

a {
    color: var(--link-font-color);
    font-weight: var(--link-font-weight);
    font-style: var(--link-font-style);
    font-variant: var(--link-font-variant);
    text-decoration: var(--link-text-decoration);
    text-transform: var(--link-text-transform);
    text-shadow: var(--link-text-shadow);
    transition: var(--link-hover-animation-transition);
    &:hover {
        color: var(--link-hover-font-color);
        font-size: var(--link-hover-font-size);
        font-weight: var(--link-hover-font-weight);
        font-style: var(--link-hover-font-style);
        font-variant: var(--link-hover-font-variant);
        text-decoration: var(--link-hover-text-decoration);
        text-transform: var(--link-hover-text-transform);
        text-shadow: var(--link-hover-text-shadow);
        transition: var(--link-hover-animation-transition);
    }
}
.secondary { /* secondary font */
    color: var(--secondary-font-color);
    font-family: var(--secondary-font);
    font-weight: var(--secondary-font-weight);
    font-style: var(--secondary-font-style);
    font-variant: var(--secondary-font-variant);
    text-decoration: var(--secondary-text-decoration);
    text-transform: var(--secondary-text-transform);
    text-shadow: var(--secondary-text-shadow);
}
.tertiary { /* tertiary font */
    color: var(--tertiary-font-color);
    font-family: var(--tertiary-font);
    font-weight: var(--tertiary-font-weight);
    font-style: var(--tertiary-font-style);
    font-variant: var(--tertiary-font-variant);
    text-decoration: var(--tertiary-text-decoration);
    text-transform: var(--tertiary-text-transform);
    text-shadow: var(--tertiary-text-shadow);
}
.note, .narration { /* notes add tangential information and narrations add tangential monologue */
    color: var(--note-font-color);
    font-family: var(--note-font);
    font-weight: var(--note-font-weight);
    font-style: var(--note-font-style);
    font-variant: var(--note-font-variant);
    text-decoration: var(--note-text-decoration);
    text-transform: var(--note-text-transform);
    text-shadow: var(--note-text-shadow);
}
.narration {
    text-align: center;
    padding-bottom: var(--paragraph-padding);
}
.code {
    color: var(--code-font-color);
    font-family: var(--code-font);
    font-weight: var(--code-font-weight);
    font-style: var(--code-font-style);
    font-variant: var(--code-font-variant);
    text-decoration: var(--code-text-decoration);
    text-transform: var(--code-text-transform);
    text-shadow: var(--code-text-shadow);
}
.fancy {
    color: var(--fancy-font-color);
    font-family: var(--fancy-font);
    font-weight: var(--fancy-font-weight);
    font-style: var(--fancy-font-style);
    font-variant: var(--fancy-font-variant);
    text-decoration: var(--fancy-text-decoration);
    text-transform: var(--fancy-text-transform);
    text-shadow: var(--fancy-text-shadow);
}
.handwritten {
    color: var(--handwritten-font-color);
    font-family: var(--handwritten-font);
    font-weight: var(--handwritten-font-weight);
    font-style: var(--handwritten-font-style);
    font-variant: var(--handwritten-font-variant);
    text-decoration: var(--handwritten-text-decoration);
    text-transform: var(--handwritten-text-transform);
    text-shadow: var(--handwritten-text-shadow);
}
.primary-color {color: var(--primary-color);}
.secondary-color {color: var(--secondary-color);}
.tertiary-color {color: var(--tertiary-color);}
.quaternary-color {color: var(--quaternary-color);}
.shade-1-color {color: var(--shade-1-color);}
.shade-2-color {color: var(--shade-2-color);}
.shade-3-color {color: var(--shade-3-color);}
.shade-4-color {color: var(--shade-4-color);}
.light-1-color {color: var(--light-1-color);}
.light-2-color {color: var(--light-2-color);}
.light-3-color {color: var(--light-3-color);}
.light-4-color {color: var(--light-4-color);}
.bg-color {color: var(--bg-color);}
.base-color {color: var(--body-font-color);}
.inverted-color {color: var(--inverted-font-color);}
.secondary-font-color {color: var(--secondary-font-color);}
.tertiary-font-color {color: var(--tertiary-font-color);}
.score-xl {color: var(--extremely-low-score-color);}
.score-vl {color: var(--very-low-score-color);}
.score-l {color: var(--low-score-color);}
.score-m {color: var(--medium-score-color);}
.score-h {color: var(--high-score-color);}
.score-vh {color: var(--very-high-score-color);}
.primary-color-bg {background-color: var(--primary-color);}
.secondary-color-bg {background-color: var(--secondary-color);}
.tertiary-color-bg {background-color: var(--tertiary-color);}
.quaternary-color-bg {background-color: var(--quaternary-color);}
.shade-1-color-bg {background-color: var(--shade-1-color);}
.shade-2-color-bg {background-color: var(--shade-2-color);}
.shade-3-color-bg {background-color: var(--shade-3-color);}
.shade-4-color-bg {background-color: var(--shade-4-color);}
.light-1-color-bg {background-color: var(--light-1-color);}
.light-2-color-bg {background-color: var(--light-2-color);}
.light-3-color-bg {background-color: var(--light-3-color);}
.light-4-color-bg {background-color: var(--light-4-color);}
.bg-color-bg {background-color: var(--bg-color);}
.base-color-bg {background-color: var(--body-font-color);}
.inverted-color-bg {background-color: var(--inverted-font-color);}
.secondary-font-color-bg {background-color: var(--secondary-font-color);}
.tertiary-font-color-bg {background-color: var(--tertiary-font-color);}
.secondary-font {font-family: var(--secondary-font);}
.tertiary-font {font-family: var(--tertiary-font);}
.quaternary-font {font-family: var(--quaternary-font);}
.quinary-font {font-family: var(--quinary-font);}
.fancy-font {font-family: var(--fancy-font);}
.handwritten-font {font-family: var(--handwritten-font);}
.scary-font {font-family: var(--scary-font);}
.angry-font {font-family: var(--angry-font);}
.sad-font {font-family: var(--sad-font);}
.happy-font {font-family: var(--happy-font);}
.variable {
    color: var(--variable-font-color);
    font-family: var(--code-font);
    font-style: italic;
    font-weight: bold;
}

h1, h1 a { /* title */
    color: var(--title-font-color);
    font-family: var(--title-font);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    font-style: var(--title-font-style);
    font-variant: var(--title-font-variant);
    padding-bottom: var(--title-padding);
    text-decoration: var(--title-text-decoration);
    text-transform: var(--title-text-transform);
    text-shadow: var(--title-text-shadow);
    text-align: var(--title-text-align);
    &::before {content: var(--title-before);}
    &::after {content: var(--title-after);}
}
h2, h2 a { /* subtitle */
    color: var(--subtitle-font-color);
    font-family: var(--subtitle-font);
    font-size: var(--subtitle-font-size);
    font-weight: var(--subtitle-font-weight);
    font-style: var(--subtitle-font-style);
    font-variant: var(--subtitle-font-variant);
    padding-bottom: var(--subtitle-padding);
    text-decoration: var(--subtitle-text-decoration);
    text-transform: var(--subtitle-text-transform);
    text-shadow: var(--subtitle-text-shadow);
    text-align: var(--subtitle-text-align);
    &::before {content: var(--subtitle-before);}
    &::after {content: var(--subtitle-after);}
    
}
h3, h3 a {
    color: var(--h3-font-color);
    font-family: var(--h3-font);
    font-size: var(--h3-font-size);
    font-weight: var(--h3-font-weight);
    font-style: var(--h3-font-style);
    font-variant: var(--h3-font-variant);
    padding-bottom: var(--h3-padding);
    text-decoration: var(--h3-text-decoration);
    text-transform: var(--h3-text-transform);
    text-shadow: var(--h3-text-shadow);
    text-align: var(--h3-text-align);
    &::before {content: var(--h3-before);}
    &::after {content: var(--h3-after);}
}
h4, h4 a {
    color: var(--h4-font-color);
    font-family: var(--h4-font);
    font-size: var(--h4-font-size);
    font-weight: var(--h4-font-weight);
    font-style: var(--h4-font-style);
    font-variant: var(--h4-font-variant);
    padding-bottom: var(--h4-padding);
    text-decoration: var(--h4-text-decoration);
    text-transform: var(--h4-text-transform);
    text-shadow: var(--h4-text-shadow);
    text-align: var(--h4-text-align);
    &::before {content: var(--h4-before);}
    &::after {content: var(--h4-after);}
}
h5, h5 a {
    color: var(--h5-font-color);
    font-family: var(--h5-font);
    font-size: var(--h5-font-size);
    font-weight: var(--h5-font-weight);
    font-style: var(--h5-font-style);
    font-variant: var(--h5-font-variant);
    padding-bottom: var(--h5-padding);
    text-decoration: var(--h5-text-decoration);
    text-transform: var(--h5-text-transform);
    text-shadow: var(--h5-text-shadow);
    text-align: var(--h5-text-align);
    &::before {content: var(--h5-before);}
    &::after {content: var(--h5-after);}
}
h6, h6 a {
    color: var(--h6-font-color);
    font-family: var(--h6-font);
    font-size: var(--h6-font-size);
    font-weight: var(--h6-font-weight);
    font-style: var(--h6-font-style);
    font-variant: var(--h6-font-variant);
    padding-bottom: var(--h6-padding);
    text-decoration: var(--h6-text-decoration);
    text-transform: var(--h6-text-transform);
    text-shadow: var(--h6-text-shadow);
    text-align: var(--h6-text-align);
    &::before {content: var(--h6-before);}
    &::after {content: var(--h6-after);}
}

.ufl { /* unformatted list */
    ol, ul, li {list-style: none;}
}
.ldot { /* list with dots */
    ol, ul, li {list-style: disc;}
}
.lcircle { /* list with circles */
    ol, ul, li {list-style: circle;}
}
.lsquare { /* list with squares */
    ol, ul, li {list-style: square;}
}
.lnumber { /* list with numbers */
    ol, ul, li {list-style: decimal;}
}
.llower { /* list with lowercase letters */
    ol, ul, li {list-style: lower-alpha;}
}
.lupper { /* list with uppercase letters */
    ol, ul, li {list-style: upper-alpha;}
}
.lroman { /* list with roman numerals */
    ol, ul, li {list-style: upper-roman;}
}
.lromanlower { /* list with lowercase roman numerals */
    ol, ul, li {list-style: lower-roman;}
}
ol, ul {
    margin-bottom: var(--paragraph-padding);
}
ol {
    list-style: var(--ordered-list-style);
    li {
        list-style: var(--ordered-list-style);
        list-style-position: inside;
    }
}
ul {
    list-style: var(--unordered-list-style);
    li {
        list-style: var(--unordered-list-style);
        list-style-position: inside;
    }
}
li {
    padding-inline-start: var(--list-indent);
}
ol li ol li {
    list-style: var(--ordered-list-secondary-style);
    list-style-position: inside;
}
ol li ol li ol li {
    list-style: var(--ordered-list-tertiary-style);
    list-style-position: inside;
}
ol li ol li ol li ol li {
    list-style: var(--unordered-list-style);
    list-style-position: inside;
}
ul li ul li {
    list-style: var(--unordered-list-secondary-style);
    list-style-position: inside;
}
ul li ul li ul li {
    list-style: var(--unordered-list-tertiary-style);
    list-style-position: inside;
}
ul li ul li ul li ul li {
    list-style: var(--unordered-list-style);
    list-style-position: inside;
}

ul.tree {
    text-align: center;
    li, ul {position: relative;}
    li:first-child::before {left: 50%;}
    li:last-child::before {right: 50%;}
    ul::before {top: -.5rem;}
    li span::before {top: -.55rem;}
    li {
        display: table-cell;
        padding: .5rem 0;
        ul::before, li span::before {
            border-left: var(--tree-line);
            content: "";
            position: absolute;
            height: .5rem;
            left: 50%;
        }
    }
    ul li {
        &::before {
            border-top: var(--tree-line);
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
        }
    }
    li span {
        position: relative;
        display: inline-block;
        background-color: var(--tree-item-bg-color);
        color: var(--tree-font-color);
        font-family: var(--tree-font);
        font-size: var(--tree-font-size);
        font-style: var(--tree-font-style);
        font-variant: var(--tree-font-variant);
        font-weight: var(--tree-font-weight);
        text-decoration: var(--tree-text-decoration);
        text-transform: var(--tree-text-transform);
        text-shadow: var(--tree-text-shadow);
        border: var(--tree-item-border);
        border-radius: var(--tree-item-border-radius);
        box-shadow: var(--tree-item-shadow);
        background-image: var(--tree-item-bg-image);
        background-size: var(--tree-item-bg-image-size);
        margin: 0 var(--tree-spacing) .5rem;
        padding: var(--tree-item-padding);
    }
}
.tree-title {
    font-family: var(--tree-title-font);
    font-size: var(--tree-title-font-size);
    font-style: var(--tree-title-font-style);
    font-variant: var(--tree-title-font-variant);
    font-weight: var(--tree-title-font-weight);
    text-decoration: var(--tree-title-text-decoration);
    text-transform: var(--tree-title-text-transform);
    text-shadow: var(--tree-title-text-shadow);
}
ul.tree.vertical {
    writing-mode: vertical-lr;
    li span {writing-mode: horizontal-tb;}
    .tree-title {writing-mode: horizontal-tb;}
    li:first-child::before {left: none; top: 50%;}
    li:last-child::before {right: none; bottom: 50%;}
    ul::before {left: -.45rem;}
    li span::before {left: -.55rem;}
    li {
        padding: var(--tree-spacing) 0.05rem;
        ul::before, li span::before {
            border: 0;
            border-top: var(--tree-line);
            width: .5rem;
            top: 50%;
        }
    }
    ul li {
        &::before {
            border: 0;
            border-left: var(--tree-line);
            left: 0;
            top: 0;
            bottom: 0;
        }
    }
    li span {
        margin: 0 0.45rem 0;
        padding: var(--tree-item-padding);
    }
    .tree-title {
        display: inline-block;
    }
}

.textbox {
    overflow: hidden;
    color: var(--textbox-font-color);
    background-color: var(--textbox-bg-color);
    border: var(--textbox-border);
    border-radius: var(--textbox-border-radius);
    corner-shape: var(--textbox-corner-shape);
    box-shadow: var(--textbox-shadow);
    padding: var(--textbox-padding);
    margin-bottom: var(--textbox-margin);
    background-image: var(--textbox-bg-image);
    background-size: var(--textbox-bg-image-size);
}
.textbox, .textbox p {
    font-size: var(--textbox-body-font-size);
}
.textbox-secondary {
    overflow: hidden;
    color: var(--textbox-secondary-font-color);
    background-color: var(--textbox-secondary-bg-color);
    border: var(--textbox-secondary-border);
    border-radius: var(--textbox-secondary-border-radius);
    corner-shape: var(--textbox-secondary-corner-shape);
    box-shadow: var(--textbox-secondary-shadow);
    padding: var(--textbox-secondary-padding);
    margin-bottom: var(--textbox-secondary-margin);
    background-image: var(--textbox-secondary-bg-image);
    background-size: var(--textbox-secondary-bg-image-size);
}
.textbox-secondary, .textbox-secondary p {
    font-size: var(--textbox-secondary-body-font-size);
}
.textbox-tertiary {
    overflow: hidden;
    color: var(--textbox-tertiary-font-color);
    background-color: var(--textbox-tertiary-bg-color);
    border: var(--textbox-tertiary-border);
    border-radius: var(--textbox-tertiary-border-radius);
    corner-shape: var(--textbox-tertiary-corner-shape);
    box-shadow: var(--textbox-tertiary-shadow);
    padding: var(--textbox-tertiary-padding);
    margin-bottom: var(--textbox-tertiary-margin);
    background-image: var(--textbox-tertiary-bg-image);
    background-size: var(--textbox-tertiary-bg-image-size);
}
.textbox-tertiary, .textbox-tertiary p {
    font-size: var(--textbox-tertiary-body-font-size);
}

table {
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border: var(--table-border);
    border-top: var(--table-top-border);
    border-left: 0;
    border-right: 0;
    border-spacing: 0px;
    color: var(--table-element-font-color);
    border-radius: var(--table-border-radius);
    corner-shape: var(--table-corner-shape);
    box-shadow: var(--table-shadow);
    margin-bottom: var(--table-margin);
}
th, td {
    padding: var(--table-padding);
    border-left: var(--table-inner-border);
}
td {
    border-top: var(--table-inner-border);
    font-family: var(--table-element-font);
    font-size: var(--table-element-font-size);
    font-style: var(--table-element-font-style);
    font-variant: var(--table-element-font-variant);
    font-weight: var(--table-element-font-weight);
    text-decoration: var(--table-element-text-decoration);
    text-transform: var(--table-element-text-transform);
    text-shadow: var(--table-element-text-shadow);
    background-image: var(--table-element-bg-image);
    background-size: var(--table-element-bg-image-size);
}
th {
    vertical-align: center;
    color: var(--table-header-font-color);
    background-color: var(--table-header-bg-color);
    font-family: var(--table-header-font);
    font-size: var(--table-header-font-size);
    font-style: var(--table-header-font-style);
    font-variant: var(--table-header-font-variant);
    font-weight: var(--table-header-font-weight);
    text-decoration: var(--table-header-text-decoration);
    text-transform: var(--table-header-text-transform);
    text-shadow: var(--table-header-text-shadow);
    padding-bottom: var(--table-header-padding);
    text-align: var(--table-header-text-align);
    background-image: var(--table-header-bg-image);
    background-size: var(--table-header-bg-image-size);
    &::before {content: var(--table-header-before);}
    &::after {content: var(--table-header-after);}
}
tr {background-color: var(--table-element-bg-color);}
th.table-title {
    font-size: var(--table-title-font-size);
    font-weight: var(--table-title-font-weight);
    font-variant: var(--table-title-font-variant);
    text-transform: var(--table-title-text-transform);
}
td {
    font-size: var(--table-body-font-size);
    vertical-align: var(--table-vertical-align);
    text-align: var(--table-element-text-align);
}
td.subheader {
    background-color: var(--table-subheader-bg-color);
    vertical-align: center;
    font-size: var(--table-subheader-font-size);
    font-weight: var(--table-subheader-font-weight);
    font-variant: var(--table-subheader-font-variant);
    text-transform: var(--table-subheader-text-transform);
    text-align: var(--table-subheader-text-align);
    background-image: var(--table-subheader-bg-image);
    background-size: var(--table-subheader-bg-image-size);
}
tfoot tr {
    background-color: var(--table-foot-bg-color);
    background-image: var(--table-foot-bg-image);
    background-size: var(--table-foot-bg-image-size);
}
tbody tr {&:nth-child(even) {background-color: var(--table-even-element-bg-color);}}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {border-radius: var(--table-border-radius) 0 0 0; corner-shape: var(--table-corner-shape);}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {border-radius: 0 0 0 var(--table-border-radius); corner-shape: var(--table-corner-shape);}
thead tr th:first-child {border-left: var(--table-border);}
thead tr th:last-child {border-right: var(--table-border);}
thead:first-child tr:first-child th:first-child {border-left: var(--table-top-border);}
thead:first-child tr:first-child th:last-child {border-right: var(--table-top-border);}
tbody tr td:first-child {border-left: var(--table-border);}
tbody tr td:last-child {border-right: var(--table-border);}
thead tr th {border-left: var(--table-header-side-border); border-top: var(--table-header-bottom-border);}
thead:first-child tr:first-child th {border-top: none;}
thead {tr + tr {th {border-top: var(--table-header-side-border);}
        th:first-child {border-left: var(--table-header-side-border);}
        th:last-child {border-right: var(--table-header-side-border);}}}
thead + tbody tr:first-child td, thead + tfoot tr:first-child td {border-top: var(--table-header-bottom-border);}
tfoot tr td:last-child {border-right: var(--table-border);}

table.table-secondary {
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border: var(--table-secondary-border);
    border-top: var(--table-secondary-top-border);
    border-left: 0;
    border-right: 0;
    border-spacing: 0px;
    color: var(--table-secondary-element-font-color);
    border-radius: var(--table-secondary-border-radius);
    corner-shape: var(--table-secondary-corner-shape);
    box-shadow: var(--table-secondary-shadow);
    margin-bottom: var(--table-secondary-margin);

    th, td {
        padding: var(--table-secondary-padding);
        border-left: var(--table-secondary-inner-border);
    }
    td {
        border-top: var(--table-secondary-inner-border);
        font-family: var(--table-secondary-element-font);
        font-size: var(--table-secondary-element-font-size);
        font-style: var(--table-secondary-element-font-style);
        font-variant: var(--table-secondary-element-font-variant);
        font-weight: var(--table-secondary-element-font-weight);
        text-decoration: var(--table-secondary-element-text-decoration);
        text-transform: var(--table-secondary-element-text-transform);
        text-shadow: var(--table-secondary-element-text-shadow);
        background-image: var(--table-secondary-element-bg-image);
        background-size: var(--table-secondary-element-bg-image-size);
    }
    th {
        vertical-align: center;
        color: var(--table-secondary-header-font-color);
        background-color: var(--table-secondary-header-bg-color);
        font-family: var(--table-secondary-header-font);
        font-size: var(--table-secondary-header-font-size);
        font-style: var(--table-secondary-header-font-style);
        font-variant: var(--table-secondary-header-font-variant);
        font-weight: var(--table-secondary-header-font-weight);
        text-decoration: var(--table-secondary-header-text-decoration);
        text-transform: var(--table-secondary-header-text-transform);
        text-shadow: var(--table-secondary-header-text-shadow);
        padding-bottom: var(--table-secondary-header-padding);
        text-align: var(--table-secondary-header-text-align);
        background-image: var(--table-secondary-header-bg-image);
        background-size: var(--table-secondary-header-bg-image-size);
        &::before {content: var(--table-secondary-header-before);}
        &::after {content: var(--table-secondary-header-after);}
    }
    tr {background-color: var(--table-secondary-element-bg-color);}
    th.table-title {
        font-size: var(--table-secondary-title-font-size);
        font-weight: var(--table-secondary-title-font-weight);
        font-variant: var(--table-secondary-title-font-variant);
        text-transform: var(--table-secondary-title-text-transform);
    }
    td {
        font-size: var(--table-secondary-body-font-size);
        vertical-align: var(--table-secondary-vertical-align);
        text-align: var(--table-secondary-element-text-align);
    }
    td.subheader {
        background-color: var(--table-secondary-subheader-bg-color);
        vertical-align: center;
        font-size: var(--table-secondary-subheader-font-size);
        font-weight: var(--table-secondary-subheader-font-weight);
        font-variant: var(--table-secondary-subheader-font-variant);
        text-transform: var(--table-secondary-subheader-text-transform);
        text-align: var(--table-secondary-subheader-text-align);
        background-image: var(--table-secondary-subheader-bg-image);
        background-size: var(--table-secondary-subheader-bg-image-size);
    }
    tfoot tr {
        background-color: var(--table-secondary-foot-bg-color);
        background-image: var(--table-secondary-foot-bg-image);
        background-size: var(--table-secondary-foot-bg-image-size);
    }
    tbody tr {&:nth-child(even) {background-color: var(--table-secondary-even-element-bg-color);}}
    thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {border-radius: var(--table-secondary-border-radius) 0 0 0; corner-shape: var(--table-secondary-corner-shape);}
    thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {border-radius: 0 0 0 var(--table-secondary-border-radius); corner-shape: var(--table-secondary-corner-shape);}
    thead tr th:first-child {border-left: var(--table-secondary-border);}
    thead tr th:last-child {border-right: var(--table-secondary-border);}
    thead:first-child tr:first-child th:first-child {border-left: var(--table-secondary-top-border);}
    thead:first-child tr:first-child th:last-child {border-right: var(--table-secondary-top-border);}
    tbody tr td:first-child {border-left: var(--table-secondary-border);}
    tbody tr td:last-child {border-right: var(--table-secondary-border);}
    thead tr th {border-left: var(--table-secondary-header-side-border); border-top: var(--table-secondary-header-bottom-border);}
    thead:first-child tr:first-child th {border-top: none;}
    thead {tr + tr {th {border-top: var(--table-secondary-header-side-border);}
            th:first-child {border-left: var(--table-secondary-header-side-border);}
            th:last-child {border-right: var(--table-secondary-header-side-border);}}}
    thead + tbody tr:first-child td, thead + tfoot tr:first-child td {border-top: var(--table-secondary-header-bottom-border);}
    tfoot tr td:last-child {border-right: var(--table-secondary-border);}
}
table.table-tertiary {
    overflow: hidden;
    width: 100%;
    border-collapse: separate;
    border: var(--table-tertiary-border);
    border-top: var(--table-tertiary-top-border);
    border-left: 0;
    border-right: 0;
    border-spacing: 0px;
    color: var(--table-tertiary-element-font-color);
    border-radius: var(--table-tertiary-border-radius);
    corner-shape: var(--table-tertiary-corner-shape);
    box-shadow: var(--table-tertiary-shadow);
    margin-bottom: var(--table-tertiary-margin);

    th, td {
        padding: var(--table-tertiary-padding);
        border-left: var(--table-tertiary-inner-border);
    }
    td {
        border-top: var(--table-tertiary-inner-border);
        font-family: var(--table-tertiary-element-font);
        font-size: var(--table-tertiary-element-font-size);
        font-style: var(--table-tertiary-element-font-style);
        font-variant: var(--table-tertiary-element-font-variant);
        font-weight: var(--table-tertiary-element-font-weight);
        text-decoration: var(--table-tertiary-element-text-decoration);
        text-transform: var(--table-tertiary-element-text-transform);
        text-shadow: var(--table-tertiary-element-text-shadow);
        background-image: var(--table-tertiary-element-bg-image);
        background-size: var(--table-tertiary-element-bg-image-size);
    }
    th {
        vertical-align: center;
        color: var(--table-tertiary-header-font-color);
        background-color: var(--table-tertiary-header-bg-color);
        font-family: var(--table-tertiary-header-font);
        font-size: var(--table-tertiary-header-font-size);
        font-style: var(--table-tertiary-header-font-style);
        font-variant: var(--table-tertiary-header-font-variant);
        font-weight: var(--table-tertiary-header-font-weight);
        text-decoration: var(--table-tertiary-header-text-decoration);
        text-transform: var(--table-tertiary-header-text-transform);
        text-shadow: var(--table-tertiary-header-text-shadow);
        padding-bottom: var(--table-tertiary-header-padding);
        text-align: var(--table-tertiary-header-text-align);
        background-image: var(--table-tertiary-header-bg-image);
        background-size: var(--table-tertiary-header-bg-image-size);
        &::before {content: var(--table-tertiary-header-before);}
        &::after {content: var(--table-tertiary-header-after);}
    }
    tr {background-color: var(--table-tertiary-element-bg-color);}
    th.table-title {
        font-size: var(--table-tertiary-title-font-size);
        font-weight: var(--table-tertiary-title-font-weight);
        font-variant: var(--table-tertiary-title-font-variant);
        text-transform: var(--table-tertiary-title-text-transform);
    }
    td {
        font-size: var(--table-tertiary-body-font-size);
        vertical-align: var(--table-tertiary-vertical-align);
        text-align: var(--table-tertiary-element-text-align);
    }
    td.subheader {
        background-color: var(--table-tertiary-subheader-bg-color);
        vertical-align: center;
        font-size: var(--table-tertiary-subheader-font-size);
        font-weight: var(--table-tertiary-subheader-font-weight);
        font-variant: var(--table-tertiary-subheader-font-variant);
        text-transform: var(--table-tertiary-subheader-text-transform);
        text-align: var(--table-tertiary-subheader-text-align);
        background-image: var(--table-tertiary-subheader-bg-image);
        background-size: var(--table-tertiary-subheader-bg-image-size);
    }
    tfoot tr {
        background-color: var(--table-tertiary-foot-bg-color);
        background-image: var(--table-tertiary-foot-bg-image);
        background-size: var(--table-tertiary-foot-bg-image-size);
    }
    tbody tr {&:nth-child(even) {background-color: var(--table-tertiary-even-element-bg-color);}}
    thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {border-radius: var(--table-tertiary-border-radius) 0 0 0; corner-shape: var(--table-tertiary-corner-shape);}
    thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {border-radius: 0 0 0 var(--table-tertiary-border-radius); corner-shape: var(--table-tertiary-corner-shape);}
    thead tr th:first-child {border-left: var(--table-tertiary-border);}
    thead tr th:last-child {border-right: var(--table-tertiary-border);}
    thead:first-child tr:first-child th:first-child {border-left: var(--table-tertiary-top-border);}
    thead:first-child tr:first-child th:last-child {border-right: var(--table-tertiary-top-border);}
    tbody tr td:first-child {border-left: var(--table-tertiary-border);}
    tbody tr td:last-child {border-right: var(--table-tertiary-border);}
    thead tr th {border-left: var(--table-tertiary-header-side-border); border-top: var(--table-tertiary-header-bottom-border);}
    thead:first-child tr:first-child th {border-top: none;}
    thead {tr + tr {th {border-top: var(--table-tertiary-header-side-border);}
            th:first-child {border-left: var(--table-tertiary-header-side-border);}
            th:last-child {border-right: var(--table-tertiary-header-side-border);}}}
    thead + tbody tr:first-child td, thead + tfoot tr:first-child td {border-top: var(--table-tertiary-header-bottom-border);}
    tfoot tr td:last-child {border-right: var(--table-tertiary-border);}
}

.alert {
    transform: translateX(var(--alert-spacing));
    width: calc(100% - var(--alert-spacing));
    font-family: var(--alert-body-font);
    font-size: var(--alert-font-size);
    font-style: var(--alert-body-font-style);
    font-variant: var(--alert-body-font-variant);
    font-weight: var(--alert-body-font-weight);
    text-decoration: var(--alert-body-text-decoration);
    text-transform: var(--alert-body-text-transform);
    text-shadow: var(--alert-body-text-shadow);
}
.alert-title {
    position:absolute;
    transform: translateX(calc(var(--alert-spacing)*-1));
    font-family: var(--alert-font);
    &::after {content: ": ";}
}
.warning {
    transform: translateX(var(--warning-spacing));
    width: calc(100% - var(--warning-spacing));
    font-family: var(--alert-body-font);
    font-size: var(--alert-font-size);
    font-style: var(--alert-body-font-style);
    font-variant: var(--alert-body-font-variant);
    font-weight: var(--alert-body-font-weight);
    text-decoration: var(--alert-body-text-decoration);
    text-transform: var(--alert-body-text-transform);
    text-shadow: var(--alert-body-text-shadow);
}
.warning-title {
    position:absolute;
    transform: translateX(calc(var(--warning-spacing)*-1));
    font-family: var(--alert-font);
    &::after {content: ": ";}
}
.info {
    transform: translateX(var(--info-spacing));
    width: calc(100% - var(--info-spacing));
    font-family: var(--alert-body-font);
    font-size: var(--alert-font-size);
    font-style: var(--alert-body-font-style);
    font-variant: var(--alert-body-font-variant);
    font-weight: var(--alert-body-font-weight);
    text-decoration: var(--alert-body-text-decoration);
    text-transform: var(--alert-body-text-transform);
    text-shadow: var(--alert-body-text-shadow);
}
.info-title {
    position:absolute;
    transform: translateX(calc(var(--info-spacing)*-1));
    font-family: var(--alert-font);
    &::after {content: ": ";}
}
.alert-title::before {
    content: var(--alert-text);
    color: var(--alert-font-color);
    font-family: var(--alert-body-font);
    font-size: var(--alert-font-size);
    font-style: var(--alert-font-style);
    font-variant: var(--alert-font-variant);
    font-weight: var(--alert-font-weight);
    text-decoration: var(--alert-text-decoration);
    text-transform: var(--alert-text-transform);
    text-shadow: var(--alert-text-shadow);
}
.warning-title::before {
    content: var(--warning-text);
    color: var(--warning-font-color);
    font-family: var(--warning-body-font);
    font-size: var(--warning-font-size);
    font-style: var(--warning-font-style);
    font-variant: var(--warning-font-variant);
    font-weight: var(--warning-font-weight);
    text-decoration: var(--warning-text-decoration);
    text-transform: var(--warning-text-transform);
    text-shadow: var(--warning-text-shadow);
}
.info-title::before {
    content: var(--info-text);
    color: var(--info-font-color);
    font-family: var(--info-body-font);
    font-size: var(--info-font-size);
    font-style: var(--info-font-style);
    font-variant: var(--info-font-variant);
    font-weight: var(--info-font-weight);
    text-decoration: var(--info-text-decoration);
    text-transform: var(--info-text-transform);
    text-shadow: var(--info-text-shadow);
}

.autoframe {
    max-width: var(--autoframe-max-width);
    max-height: var(--autoframe-max-height);
    width: 100%;
}
.scaleframe, .scaleframe-secondary, .scaleframe-tertiary, .scaleframe-quaternary, .scaleframe-quinary, .circleframe, .squareframe {
    overflow: hidden;
    background-size: fill;
    background-position: center;
}
.scaleframe {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    width: var(--scaleframe-max-width);
    height: var(--scaleframe-max-height);
}
.scaleframe-secondary {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    width: var(--scaleframe-secondary-max-width);
    height: var(--scaleframe-secondary-max-height);
}
.scaleframe-tertiary {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    width: var(--scaleframe-tertiary-max-width);
    height: var(--scaleframe-tertiary-max-height);
}
.scaleframe-quaternary {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    width: var(--scaleframe-quaternary-max-width);
    height: var(--scaleframe-quaternary-max-height);
}
.scaleframe-quinary {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    width: var(--scaleframe-quinary-max-width);
    height: var(--scaleframe-quinary-max-height);
}
.circleframe {
    overflow: hidden;
    background-size: cover;
    background-position: center;
    aspect-ratio: 1;
    border-radius: 50%;
}
.squareframe {
    overflow: hidden;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
}
.frameborder {
    border: var(--frame-border);
    border-radius: var(--frame-border-radius);
}
.frameborder-secondary {
    border: var(--frame-border-secondary);
    border-radius: var(--frame-border-secondary-radius);
}
.frameborder-tertiary {
    border: var(--frame-border-tertiary);
    border-radius: var(--frame-border-tertiary-radius);
}
.round-border {
    border-radius: var(--base-border-radius);
    corner-shape: var(--base-corner-shape);
}

button {
    background-color: var(--button-bg-color);
    padding: var(--button-padding);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    corner-shape: var(--button-corner-shape);
    cursor: pointer;
}
button, button a {
    color: var(--button-font-color);
    font-size: var(--button-font-size);
    font-family: var(--button-font);
    font-weight: var(--button-font-weight);
    font-style: var(--button-font-style);
    font-variant: var(--button-font-variant);
    text-decoration: var(--button-text-decoration);
    text-transform: var(--button-text-transform);
    text-shadow: var(--button-text-shadow);
    transition: var(--button-hover-animation-transition);
}
button:hover {
    border: var(--button-hover-border);
    transform: var(--button-hover-transform);
    transition: var(--button-hover-animation-transition);
}
button:hover, button:hover a {
    color: var(--button-hover-font-color);
    font-size: var(--button-hover-font-size);
    font-weight: var(--button-hover-font-weight);
    font-style: var(--button-hover-font-style);
    font-variant: var(--button-hover-font-variant);
    text-decoration: var(--button-hover-text-decoration);
    text-transform: var(--button-hover-text-transform);
    text-shadow: var(--button-hover-text-shadow);
    transition: var(--button-hover-animation-transition);
}
button.secondary {
    background-color: var(--button-secondary-bg-color);
    padding: var(--button-secondary-padding);
    border: var(--button-secondary-border);
    border-radius: var(--button-secondary-border-radius);
    transition: var(--button-secondary-hover-animation-transition);
}
button.secondary, button.secondary a {
    color: var(--button-secondary-font-color);
    font-family: var(--button-secondary-font);
    font-weight: var(--button-secondary-font-weight);
    font-style: var(--button-secondary-font-style);
    font-variant: var(--button-secondary-font-variant);
    text-decoration: var(--button-secondary-text-decoration);
    text-transform: var(--button-secondary-text-transform);
    text-shadow: var(--button-secondary-text-shadow);
    transition: var(--button-secondary-hover-animation-transition);
}
button.secondary:hover {
    border: var(--button-secondary-hover-border);
    transform: var(--button-secondary-hover-transform);
    transition: var(--button-secondary-hover-animation-transition);
}
button.secondary:hover, button.secondary:hover a {
    color: var(--button-secondary-hover-font-color);
    font-size: var(--button-secondary-hover-font-size);
    font-weight: var(--button-secondary-hover-font-weight);
    font-style: var(--button-secondary-hover-font-style);
    font-variant: var(--button-secondary-hover-font-variant);
    text-decoration: var(--button-secondary-hover-text-decoration);
    text-transform: var(--button-secondary-hover-text-transform);
    text-shadow: var(--button-secondary-hover-text-shadow);
    transition: var(--button-secondary-hover-animation-transition);
}
button.tertiary {
    background-color: var(--button-tertiary-bg-color);
    padding: var(--button-tertiary-padding);
    border: var(--button-tertiary-border);
    border-radius: var(--button-tertiary-border-radius);
    transition: var(--button-tertiary-hover-animation-transition);
}
button.tertiary, button.tertiary a {
    color: var(--button-tertiary-font-color);
    font-size: var(--button-tertiary-hover-font-size);
    font-family: var(--button-tertiary-font);
    font-weight: var(--button-tertiary-font-weight);
    font-style: var(--button-tertiary-font-style);
    font-variant: var(--button-tertiary-font-variant);
    text-decoration: var(--button-tertiary-text-decoration);
    text-transform: var(--button-tertiary-text-transform);
    text-shadow: var(--button-tertiary-text-shadow);
    transition: var(--button-tertiary-hover-animation-transition);
}
button.tertiary:hover {
    border: var(--button-tertiary-hover-border);
    transform: var(--button-tertiary-hover-transform);
    transition: var(--button-tertiary-hover-animation-transition);
}
button.tertiary:hover, button.tertiary:hover a {
    color: var(--button-tertiary-hover-font-color);
    font-weight: var(--button-tertiary-hover-font-weight);
    font-style: var(--button-tertiary-hover-font-style);
    font-variant: var(--button-tertiary-hover-font-variant);
    text-decoration: var(--button-tertiary-hover-text-decoration);
    text-transform: var(--button-tertiary-hover-text-transform);
    text-shadow: var(--button-tertiary-hover-text-shadow);
    transition: var(--button-tertiary-hover-animation-transition);
}
button.affirmative {
    background-color: var(--button-affirmative-bg-color);
    padding: var(--button-affirmative-padding);
    border: var(--button-affirmative-border);
    border-radius: var(--button-affirmative-border-radius);
    transition: var(--button-affirmative-hover-animation-transition);
}
button.affirmative, button.affirmative a {
    color: var(--button-affirmative-font-color);
    font-size: var(--button-affirmative-hover-font-size);
    font-family: var(--button-affirmative-font);
    font-weight: var(--button-affirmative-font-weight);
    font-style: var(--button-affirmative-font-style);
    font-variant: var(--button-affirmative-font-variant);
    text-decoration: var(--button-affirmative-text-decoration);
    text-transform: var(--button-affirmative-text-transform);
    text-shadow: var(--button-affirmative-text-shadow);
    transition: var(--button-affirmative-hover-animation-transition);
}
button.affirmative:hover {
    border: var(--button-affirmative-hover-border);
    transform: var(--button-affirmative-hover-transform);
    transition: var(--button-affirmative-hover-animation-transition);
}
button.affirmative:hover, button.affirmative:hover a {
    color: var(--button-affirmative-hover-font-color);
    font-weight: var(--button-affirmative-hover-font-weight);
    font-style: var(--button-affirmative-hover-font-style);
    font-variant: var(--button-affirmative-hover-font-variant);
    text-decoration: var(--button-affirmative-hover-text-decoration);
    text-transform: var(--button-affirmative-hover-text-transform);
    text-shadow: var(--button-affirmative-hover-text-shadow);
    transition: var(--button-affirmative-hover-animation-transition);
}
button.negative {
    background-color: var(--button-negative-bg-color);
    padding: var(--button-negative-padding);
    border: var(--button-negative-border);
    border-radius: var(--button-negative-border-radius);
    transition: var(--button-negative-hover-animation-transition);
}
button.negative, button.negative a {
    color: var(--button-negative-font-color);
    font-size: var(--button-negative-hover-font-size);
    font-family: var(--button-negative-font);
    font-weight: var(--button-negative-font-weight);
    font-style: var(--button-negative-font-style);
    font-variant: var(--button-negative-font-variant);
    text-decoration: var(--button-negative-text-decoration);
    text-transform: var(--button-negative-text-transform);
    text-shadow: var(--button-negative-text-shadow);
    transition: var(--button-negative-hover-animation-transition);
}
button.negative:hover {
    border: var(--button-negative-hover-border);
    transform: var(--button-negative-hover-transform);
    transition: var(--button-negative-hover-animation-transition);
}
button.negative:hover, button.negative:hover a {
    color: var(--button-negative-hover-font-color);
    font-weight: var(--button-negative-hover-font-weight);
    font-style: var(--button-negative-hover-font-style);
    font-variant: var(--button-negative-hover-font-variant);
    text-decoration: var(--button-negative-hover-text-decoration);
    text-transform: var(--button-negative-hover-text-transform);
    text-shadow: var(--button-negative-hover-text-shadow);
    transition: var(--button-negative-hover-animation-transition);
}

menu {
    list-style: none;
    display: flex;
    flex-direction: var(--menu-flex-direction);
    gap: var(--menu-gap);
    margin: var(--menu-margin);
    li {
        background-color: var(--menu-item-bg-color);
        padding-inline-start: 0;
        border: var(--menu-item-border);
        border-top: var(--menu-top-border);
        border-bottom: var(--menu-bottom-border);
        border-left: var(--menu-inner-border-left);
        border-right: var(--menu-inner-border-right);
        border-radius: var(--menu-item-border-radius);
        padding: var(--menu-item-padding);
    }
    li:first-child, li:first-child:hover {
        border-left: var(--menu-outer-border);
        border-right: var(--menu-inner-border-right);
    }
    li:last-child, li:last-child:hover {
        border-left: var(--menu-inner-border-left);
        border-right: var(--menu-outer-border);
    }
    li, li a {
        color: var(--menu-font-color);
        font-size: var(--menu-font-size);
        font-family: var(--menu-font);
        font-weight: var(--menu-font-weight);
        font-style: var(--menu-font-style);
        font-variant: var(--menu-font-variant);
        text-decoration: var(--menu-text-decoration);
        text-transform: var(--menu-text-transform);
        text-shadow: var(--menu-text-shadow);
        transition: var(--menu-hover-animation-transition);
    }
    li:hover {
        background-color: var(--menu-hover-item-bg-color);
        border: var(--menu-hover-item-border);
        border-left: var(--menu-inner-border-left);
        border-right: var(--menu-inner-border-right);
        border-top: var(--menu-hover-top-border);
        border-bottom: var(--menu-hover-bottom-border);
        transform: var(--menu-hover-transform);
    }
    li:hover a {
        color: var(--menu-hover-font-color);
        font-size: var(--menu-hover-font-size);
        font-weight: var(--menu-hover-font-weight);
        font-style: var(--menu-hover-font-style);
        font-variant: var(--menu-hover-font-variant);
        text-decoration: var(--menu-hover-text-decoration);
        text-transform: var(--menu-hover-text-transform);
        text-shadow: var(--menu-hover-text-shadow);
        transition: var(--menu-hover-animation-transition);
    }
}
.menu-secondary {
    list-style: none;
    display: flex;
    flex-direction: var(--menu-secondary-flex-direction);
    gap: var(--menu-secondary-gap);
    margin: var(--menu-secondary-margin);
    li {
        background-color: var(--menu-secondary-item-bg-color);
        padding-inline-start: 0;
        border: var(--menu-secondary-item-border);
        border-top: var(--menu-secondary-top-border);
        border-bottom: var(--menu-secondary-bottom-border);
        border-left: var(--menu-secondary-inner-border-left);
        border-right: var(--menu-secondary-inner-border-right);
        border-radius: var(--menu-secondary-item-border-radius);
        padding: var(--menu-secondary-item-padding);
    }
    li:first-child, li:first-child:hover {
        border-left: var(--menu-secondary-outer-border);
        border-right: var(--menu-secondary-inner-border-right);
    }
    li:last-child, li:last-child:hover {
        border-left: var(--menu-secondary-inner-border-left);
        border-right: var(--menu-secondary-outer-border);
    }
    li, li a {
        color: var(--menu-secondary-font-color);
        font-size: var(--menu-secondary-font-size);
        font-family: var(--menu-secondary-font);
        font-weight: var(--menu-secondary-font-weight);
        font-style: var(--menu-secondary-font-style);
        font-variant: var(--menu-secondary-font-variant);
        text-decoration: var(--menu-secondary-text-decoration);
        text-transform: var(--menu-secondary-text-transform);
        text-shadow: var(--menu-secondary-text-shadow);
        transition: var(--menu-secondary-hover-animation-transition);
    }
    li:hover {
        background-color: var(--menu-secondary-hover-item-bg-color);
        border: var(--menu-secondary-hover-item-border);
        border-left: var(--menu-secondary-inner-border-left);
        border-right: var(--menu-secondary-inner-border-right);
        border-top: var(--menu-secondary-hover-top-border);
        border-bottom: var(--menu-secondary-hover-bottom-border);
        transform: var(--menu-secondary-hover-transform);
    }
    li:hover, li:hover a {
        color: var(--menu-secondary-hover-font-color);
        font-size: var(--menu-secondary-hover-font-size);
        font-weight: var(--menu-secondary-hover-font-weight);
        font-style: var(--menu-secondary-hover-font-style);
        font-variant: var(--menu-secondary-hover-font-variant);
        text-decoration: var(--menu-secondary-hover-text-decoration);
        text-transform: var(--menu-secondary-hover-text-transform);
        text-shadow: var(--menu-secondary-hover-text-shadow);
        transition: var(--menu-secondary-hover-animation-transition);
    }
}
.menu-tertiary {
    list-style: none;
    display: flex;
    flex-direction: var(--menu-tertiary-flex-direction);
    gap: var(--menu-tertiary-gap);
    margin: var(--menu-tertiary-margin);
    li {
        background-color: var(--menu-tertiary-item-bg-color);
        padding-inline-start: 0;
        border: var(--menu-tertiary-item-border);
        border-top: var(--menu-tertiary-top-border);
        border-bottom: var(--menu-tertiary-bottom-border);
        border-left: var(--menu-tertiary-inner-border-left);
        border-right: var(--menu-tertiary-inner-border-right);
        border-radius: var(--menu-tertiary-item-border-radius);
        padding: var(--menu-tertiary-item-padding);
    }
    li:first-child, li:first-child:hover {
        border-left: var(--menu-tertiary-outer-border);
        border-right: var(--menu-tertiary-inner-border-right);
    }
    li:last-child, li:last-child:hover {
        border-left: var(--menu-tertiary-inner-border-left);
        border-right: var(--menu-tertiary-outer-border);
    }
    li, li a {
        color: var(--menu-tertiary-font-color);
        font-size: var(--menu-tertiary-font-size);
        font-family: var(--menu-tertiary-font);
        font-weight: var(--menu-tertiary-font-weight);
        font-style: var(--menu-tertiary-font-style);
        font-variant: var(--menu-tertiary-font-variant);
        text-decoration: var(--menu-tertiary-text-decoration);
        text-transform: var(--menu-tertiary-text-transform);
        text-shadow: var(--menu-tertiary-text-shadow);
        transition: var(--menu-tertiary-hover-animation-transition);
    }
    li:hover {
        background-color: var(--menu-tertiary-hover-item-bg-color);
        border: var(--menu-tertiary-hover-item-border);
        border-left: var(--menu-tertiary-inner-border-left);
        border-right: var(--menu-tertiary-inner-border-right);
        border-top: var(--menu-tertiary-hover-top-border);
        border-bottom: var(--menu-tertiary-hover-bottom-border);
        transform: var(--menu-tertiary-hover-transform);
    }
    li:hover, li:hover a {
        color: var(--menu-tertiary-hover-font-color);
        font-size: var(--menu-tertiary-hover-font-size);
        font-weight: var(--menu-tertiary-hover-font-weight);
        font-style: var(--menu-tertiary-hover-font-style);
        font-variant: var(--menu-tertiary-hover-font-variant);
        text-decoration: var(--menu-tertiary-hover-text-decoration);
        text-transform: var(--menu-tertiary-hover-text-transform);
        text-shadow: var(--menu-tertiary-hover-text-shadow);
        transition: var(--menu-tertiary-hover-animation-transition);
    }
}

.outline {-webkit-text-stroke: 0.25px var(--text-outline-color);}
.outline-s {-webkit-text-stroke: 0.1px var(--text-outline-color);}
.outline-m {-webkit-text-stroke: 0.5px var(--text-outline-color);}
.outline-l {-webkit-text-stroke: 1px var(--text-outline-color);}
.outline-vl {-webkit-text-stroke: 2px var(--text-outline-color);}
.outline-xl {-webkit-text-stroke: 4px var(--text-outline-color);}
.outline-secondary {-webkit-text-stroke: 0.25px var(--text-outline-secondary-color);}
.outline-secondary-s {-webkit-text-stroke: 0.1px var(--text-outline-secondary-color);}
.outline-secondary-m {-webkit-text-stroke: 0.5px var(--text-outline-secondary-color);}
.outline-secondary-l {-webkit-text-stroke: 1px var(--text-outline-secondary-color);}
.outline-secondary-vl {-webkit-text-stroke: 2px var(--text-outline-secondary-color);}
.outline-secondary-xl {-webkit-text-stroke: 4px var(--text-outline-secondary-color);}
.outline-legacy {text-shadow: -1px -1px 0 var(--text-outline-color), 1px -1px 0 var(--text-outline-color), -1px 1px 0 var(--text-outline-color), 1px 1px 0 var(--text-outline-color);}
.outline-secondary-legacy {text-shadow: -1px -1px 0 var(--text-outline-secondary-color), 1px -1px 0 var(--text-outline-secondary-color), -1px 1px 0 var(--text-outline-secondary-color), 1px 1px 0 var(--text-outline-secondary-color);}

.dropshadow {box-shadow: var(--dropshadow);}

.glow-red {
    color: var(--red-glow-base-color);
    text-shadow: 0px 0px 5px var(--red-glow-shine-color);
}
.glow-orange {
    color: var(--orange-glow-base-color);
    text-shadow: 0px 0px 5px var(--orange-glow-shine-color);
}
.glow-yellow {
    color: var(--yellow-glow-base-color);
    text-shadow: 0px 0px 5px var(--yellow-glow-shine-color);
}
.glow-green {
    color: var(--green-glow-base-color);
    text-shadow: 0px 0px 5px var(--green-glow-shine-color);
}
.glow-blue {
    color: var(--blue-glow-base-color);
    text-shadow: 0px 0px 5px var(--blue-glow-shine-color);
}
.glow-purple {
    color: var(--purple-glow-base-color);
    text-shadow: 0px 0px 5px var(--purple-glow-shine-color);
}
.glow-gold {
    color: var(--gold-glow-base-color);
    text-shadow: 0px 0px 5px var(--gold-glow-shine-color);
}

.bg-texture, .bg-texture-2, .overlay, .overlay-2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events:none;
}
.bg-texture, .bg-texture-2 {z-index: -101;}
.bg-texture {
    background-image: var(--background-texture-image);
    background-size: var(--background-texture-image-size);
    opacity: var(--background-texture-alpha);
}
.bg-texture-2 {
    background-image: var(--background-texture-2-image);
    background-size: var(--background-texture-2-image-size);
    opacity: var(--background-texture-2-alpha);
}
.overlay {
    background-image: var(--overlay-image);
    background-size: var(--overlay-image-size);
    opacity: var(--overlay-alpha);
}
.overlay-2 {
    background-image: var(--overlay-2-image);
    background-size: var(--overlay-2-image-size);
    opacity: var(--overlay-2-alpha);
}

.frame-scoopedcorners, .frame-scoopedcorners-small, .frame-scoopedcorners-large, .frame-scoopedcorners-xl,
.frame-stamp, .frame-stamp-small, .frame-stamp-large, .frame-stamp-xl,
.frame-rhombus, .frame-rhombus-round, .frame-triangle, .frame-triangle-left, .frame-triangle-right, .frame-triangle-down,
.frame-triangle-round, .frame-triangle-left-round, .frame-triangle-right-round, .frame-triangle-down-round,
.frame-hexagon, .frame-trapezoid, .frame-trapezoid-down, .frame-parallelogram-left, .frame-parallelogram-right,
.frame-heart, .frame-star, .frame-starburst, .frame-floral,
.frame-arrow-left, .frame-arrow-right, .frame-arrow-up, .frame-arrow-down,
.frame-chevron-left, .frame-chevron-right, .frame-chevron-up, .frame-chevron-down,
.frame-hamburger, .frame-hamburger-round, .frame-pin
 {
    overflow: hidden;
    background-size: fill;
    background-position: center;
}
.frame-scoopedcorners {
    mask: radial-gradient(20px at 20px 20px,#0000 98%,#000) -20px -20px;
}
.frame-scoopedcorners-small {
    mask: radial-gradient(10px at 10px 10px,#0000 98%,#000) -10px -10px;
}
.frame-scoopedcorners-large {
    mask: radial-gradient(30px at 30px 30px,#0000 98%,#000) -30px -30px;
}
.frame-scoopedcorners-xl {
    mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
}
.frame-stamp {
    padding: 20px;
    mask: radial-gradient(50% 50%,#0000 66%,#000 67%) round 20px 20px/40px 40px, 
    conic-gradient(#000 0 0) content-box;
}
.frame-stamp-small {
    padding: 10px;
    mask: radial-gradient(50% 50%,#0000 66%,#000 67%) round 10px 10px/20px 20px, 
    conic-gradient(#000 0 0) content-box;
}
.frame-stamp-large {
    padding: 30px;
    mask: radial-gradient(50% 50%,#0000 66%,#000 67%) round 30px 30px/60px 60px, 
    conic-gradient(#000 0 0) content-box;
}
.frame-stamp-xl {
    padding: 40px;
    mask: radial-gradient(50% 50%,#0000 66%,#000 67%) round 40px 40px/80px 80px, 
    conic-gradient(#000 0 0) content-box;
}
.frame-rhombus {
    aspect-ratio: 1;
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
.frame-rhombus-round {
    aspect-ratio: 1;
    margin: calc(tan(22.5deg)*max(var(--base-border-radius), 8px));
    mask:
        conic-gradient(#000 0 0) no-repeat 50%/calc(100% - (1 - tan(22.5deg))*max(var(--base-border-radius), 8px)) calc(100% - (1 - tan(22.5deg))*max(var(--base-border-radius), 8px)),
        top /calc(2*max(var(--base-border-radius), 8px)) calc(2*max(var(--base-border-radius), 8px)) radial-gradient(#000 70%,#0000 72%) no-repeat space,
        left /calc(2*max(var(--base-border-radius), 8px)) calc(2*max(var(--base-border-radius), 8px)) radial-gradient(#000 70%,#0000 72%) space no-repeat;
    clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%) margin-box;
}
.frame-triangle {
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% 0,100% 100%,0 100%);
}
.frame-triangle-left {
    aspect-ratio: cos(30deg);
    clip-path: polygon(100% 0,0 50%,100% 100%);
}
.frame-triangle-right {
    aspect-ratio: cos(30deg);
    clip-path: polygon(0 0,100% 50%,0 100%);
}
.frame-triangle-down {
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% 100%,100% 0,0 0);
}
.frame-triangle-round {
    aspect-ratio: 1/cos(30deg);
    mask: conic-gradient(from -30deg at 50% calc(200% - 3*max(var(--base-border-radius), 8px)/2),#000 60deg,#0000 0) 0 100%/100% calc(100% - 3*max(var(--base-border-radius), 8px)/2) no-repeat,
       radial-gradient(max(var(--base-border-radius), 8px) at 50% calc(2*max(var(--base-border-radius), 8px)),#000 98%,#0000 101%),
       radial-gradient(max(var(--base-border-radius), 8px) at left  calc(tan(60deg)*max(var(--base-border-radius), 8px)) bottom max(var(--base-border-radius), 8px),#000 98%,#0000 101%),
       radial-gradient(max(var(--base-border-radius), 8px) at right calc(tan(60deg)*max(var(--base-border-radius), 8px)) bottom max(var(--base-border-radius), 8px),#000 98%,#0000 101%);
    clip-path: polygon(50% 0,100% 100%,0 100%);
}
.frame-triangle-left-round {
    aspect-ratio: cos(30deg);
    mask: conic-gradient(from 240deg at calc(200% - 3*max(var(--base-border-radius), 8px)/2),#000 60deg,#0000 0) 100% 0/calc(100% - 3*max(var(--base-border-radius), 8px)/2) 100% no-repeat,
      radial-gradient(max(var(--base-border-radius), 8px) at calc(2*max(var(--base-border-radius), 8px)) 50%,#000 98%,#0000 101%),
      radial-gradient(max(var(--base-border-radius), 8px) at top    calc(tan(60deg)*max(var(--base-border-radius), 8px)) right max(var(--base-border-radius), 8px),#000 98%,#0000 101%),
      radial-gradient(max(var(--base-border-radius), 8px) at bottom calc(tan(60deg)*max(var(--base-border-radius), 8px)) right max(var(--base-border-radius), 8px),#000 98%,#0000 101%);
    clip-path: polygon(0 50%,100% 100%,100% 0);
}
.frame-triangle-right-round {
    aspect-ratio: cos(30deg);
    mask: conic-gradient(from 60deg at calc(3*max(var(--base-border-radius), 8px)/2 - 100%),#000 60deg,#0000 0) 0 0/calc(100% - 3*max(var(--base-border-radius), 8px)/2) 100% no-repeat,
      radial-gradient(max(var(--base-border-radius), 8px) at calc(100% - 2*max(var(--base-border-radius), 8px)) 50%,#000 98%,#0000 101%),
      radial-gradient(max(var(--base-border-radius), 8px) at top    calc(tan(60deg)*max(var(--base-border-radius), 8px)) left max(var(--base-border-radius), 8px),#000 98%,#0000 101%),
      radial-gradient(max(var(--base-border-radius), 8px) at bottom calc(tan(60deg)*max(var(--base-border-radius), 8px)) left max(var(--base-border-radius), 8px),#000 98%,#0000 101%);
    clip-path: polygon(100% 50%,0 100%,0 0);
}
.frame-triangle-down-round {
    aspect-ratio: 1/cos(30deg);
    mask: conic-gradient(from 150deg at 50% calc(3*max(var(--base-border-radius), 8px)/2 - 100%),#000 60deg,#0000 0) 0 0/100% calc(100% - 3*max(var(--base-border-radius), 8px)/2) no-repeat,
      radial-gradient(max(var(--base-border-radius), 8px) at 50% calc(100% - 2*max(var(--base-border-radius), 8px)),#000 98%,#0000 101%),
      radial-gradient(max(var(--base-border-radius), 8px) at left  calc(tan(60deg)*max(var(--base-border-radius), 8px)) top max(var(--base-border-radius), 8px),#000 98%,#0000 101%),
      radial-gradient(max(var(--base-border-radius), 8px) at right calc(tan(60deg)*max(var(--base-border-radius), 8px)) top max(var(--base-border-radius), 8px),#000 98%,#0000 101%);
    clip-path: polygon(50% 100%,100% 0,0 0);
}
.frame-hexagon {
    aspect-ratio: 1/cos(30deg);
    clip-path: polygon(50% -50%,100% 50%,50% 150%,0 50%);
}
.frame-trapezoid {
    aspect-ratio: 3/2;
    clip-path: polygon(25% 0,75% 0,100% 100%,0 100%);
}
.frame-trapezoid-down {
    aspect-ratio: 3/2;
    clip-path: polygon(25% 100%,75% 100%,100% 0,0 0);
}
.frame-parallelogram-left {
    aspect-ratio: 3/2;
    clip-path: polygon(0 0,75% 0,100% 100%,25% 100%);
}
.frame-parallelogram-right {
    aspect-ratio: 3/2;
    clip-path: polygon(25% 0,100% 0,75% 100%,0 100%);
}
.frame-heart {
    aspect-ratio: 1;
    mask: radial-gradient(at 70% 31%,#000 29%,#0000 30%),
       radial-gradient(at 30% 31%,#000 29%,#0000 30%),
       conic-gradient(#000 0 0) bottom/100% 50% no-repeat;
    clip-path: polygon(-41% 0,50% 91%, 141% 0);
}
.frame-star {
    aspect-ratio: 1;
    clip-path: polygon(50% 0,79% 90%,2% 35%,98% 35%,21% 90%);
}
.frame-starburst {
    aspect-ratio: 1;
    clip-path: polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);
}
.frame-floral {
    aspect-ratio: 1;
    mask: 100% 50% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    93.301% 75% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,75%
    93.301% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    50% 100% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    25% 93.301% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    6.699% 75% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    0% 50% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    6.699% 25% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    25% 6.699% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    50% 0% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    75% 6.699% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    93.301% 25% /25% 25% radial-gradient(#000 calc(71% - 1px),#0000 71%) no-repeat,
    radial-gradient(100% 100%,#000 38.366%,#0000 calc(38.366% + 1px));
}
.frame-arrow-left {
    aspect-ratio: 3/2;
    clip-path: polygon(100% 30%,40% 30%,40% 0,0 50%,40% 100%,40% 70%,100% 70%);
}
.frame-arrow-right {
    aspect-ratio: 3/2;
    clip-path: polygon(0 30%,60% 30%,60% 0,100% 50%,60% 100%,60% 70%,0 70%);
}
.frame-arrow-up {
    aspect-ratio: 2/3;
    clip-path: polygon(30% 100%,30% 40%,0 40%,50% 0,100% 40%,70% 40%,70% 100%);
}
.frame-arrow-down {
    aspect-ratio: 2/3;
    clip-path: polygon(30% 0,30% 60%,0 60%,50% 100%,100% 60%,70% 60%,70% 0);
}
.frame-chevron-left {
    aspect-ratio: 3/5;
    clip-path: polygon(100% 0,70% 0,0 50%,70% 100%,100% 100%,30% 50%);
}
.frame-chevron-right {
    aspect-ratio: 3/5;
    clip-path: polygon(0 0,30% 0,100% 50%,30% 100%,0 100%,70% 50%);
}
.frame-chevron-up {
    aspect-ratio: 5/3;
    clip-path: polygon(0 100%,0 70%,50% 0,100% 70%,100% 100%,50% 30%);
}
.frame-chevron-down {
    aspect-ratio: 5/3;
    clip-path: polygon(0 0,0 30%,50% 100%,100% 30%,100% 0,50% 70%);
}
.frame-hamburger {
    aspect-ratio: 1;
    mask: linear-gradient(white 50%,#0000 0) top/100% 40% repeat-y;
}
.frame-hamburger-round {
    aspect-ratio: 1;
    mask: radial-gradient(closest-side at 12.5% 25%,white 97%,#0000 101%) 0 0/80% 40%,
    linear-gradient(white 50%,#0000 0) top/80% 40% repeat-y;
}
.frame-pin {
    aspect-ratio: 2/3;
    mask: conic-gradient(from -30deg at bottom,#0000,#000 1deg 59deg,#0000 60deg) bottom/100% 50% no-repeat, 
    radial-gradient(circle at 50% calc(100% / 3),#0000 21.5%,#000 22% 44%,#0000 44.5%);
}

.border-comic {
    border-color: black;
    border-width: 3px 4px 3px 5px;
    border-radius:95% 4% 92% 5%/4% 95% 6% 95%;
    transform: rotate(2deg);
}
.border-comic-2 {
    border-color: black;
    border-width: 3px 3px 5px 5px;
    border-radius:4% 95% 6% 95%/95% 4% 92% 5%;
    transform: rotate(-2deg);
}
.border-comic-3 {
    border-color: black;
    border-width: 5px 3px 3px 5px;
    border-radius:95% 4% 97% 5%/4% 94% 3% 95%;
    transform: rotate(2deg);
}

.lorem {
    padding-bottom: var(--paragraph-padding);
    &::before {
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
    }
}
.lorem-short {
    padding-bottom: var(--paragraph-padding);
    &::before {
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    }
}