/*********/
/* Fonts */
/*********/

/*** Latin ***/

/* Open Sans Font */
/* https://fonts.google.com/specimen/Open+Sans/about */

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 300;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-Italic-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-Italic-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-Italic-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-Italic-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-Italic-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: italic;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-Italic-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 500;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
 
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    font-stretch: 100%;
    font-display: swap;
    src: url(/src/font/OpenSans-VariableFont_wdth,wght.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/***********************/
/* Keyframe-Animations */
/***********************/

/*** Load Animations ***/

/* Scale-in-out */

@keyframes load-scale-in-out {
    0%, 10%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 5px rgba(0,0,0,1));
    }
    50% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 9px rgba(0,0,0,.8));
    }
}

/*** General Animations ***/

/* Scale-out-in */

@keyframes scale-out-in {
    0%, 10%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(.8);
    }
}

/* Scale-in-out */

@keyframes scale-in-out {
    0%, 10%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* Rotate 360deg */

@keyframes rotate360 {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}

/*** Interaction Animations ***/

/* SVG info icon dot jump */

@keyframes infodotjump {
    0%, 12.5%, 25%, 100% {
        translate: 0;
    }
    6.25% {
        translate: 0 -8%;
    }
    18.75% {
        translate: 0 -4%;
    }
}

/* SVG negative wiggle */

@keyframes negativewiggle {
    0%, 25%, 100% {
        translate: 0;
    }
    5% {
        translate: -4%;
    }
    10% {
        translate: 4%;
    }
    15% {
        translate: -2%;
    }
    20% {
        translate: 2%;
    }
}

/* SVG negative wiggle 45 */

@keyframes negativewiggle_45 {
    0%, 25%, 100% {
        translate: 0;
    }
    5% {
        translate: -4% 4%;
    }
    10% {
        translate: 4% -4%;
    }
    15% {
        translate: -2% 2%;
    }
    20% {
        translate: 2% -2%;
    }
}

/* SVG expand sunray_45 */

@keyframes sunray_45exp {
    0%, 10%, 100% {
        d: path("m25 9v-4");
    }
    50% {
        d: path("m25 9v-7");
    }
}

/* SVG expand sunray_135 */

@keyframes sunray_135exp {
    0%, 10%, 100% {
        d: path("m41 25h4");
    }
    50% {
        d: path("m41 25h7");
    }
}

/* SVG expand sunray_225 */

@keyframes sunray_225exp {
    0%, 10%, 100% {
        d: path("m25 45v-4");
    }
    50% {
        d: path("m25 48v-7");
    }
}

/* SVG expand sunray_315 */

@keyframes sunray_315exp {
    0%, 10%, 100% {
        d: path("m5 25h4");
    }
    50% {
        d: path("m2 25h7");
    }
}

/* SVG swing moon */

@keyframes moon_swing {
    0%, 100% {
        rotate: 0deg;
    }
    33% {
        rotate: -10deg;
    }
    66% {
        rotate: 10deg;
    }
}

/* SVG swing stars */

@keyframes stars_swing {
    0%, 100% {
        rotate: 0deg;
    }
    33% {
        rotate: -5deg;
    }
    66% {
        rotate: 5deg;
    }
}

/* SVG blinking stars */

@keyframes stars_blink {
    0%, 100% {
        opacity: 1;
    }
    20% {
        opacity: .8;
    }
    40% {
        opacity: 1;
    }
    60% {
        opacity: .2;
    }
    80% {
        opacity: .4;
    }
}

/* SVG trashcan shake lid */

@keyframes trashcanshakelid {
    0%, 50%, 100% {
        rotate: 0deg;
    }
    12.5% {
        rotate: -4deg;
    }
    37.5% {
        rotate: 4deg;
    }
}

/* SVG arrow jump */

@keyframes arrowjump {
    0%, 12.5%, 25%, 100% {
        translate: 0;
    }
    6.25% {
        translate: 0 -8%;
    }
    18.75% {
        translate: 0 -4%;
    }
}

/* SVG arrow push chevron */

@keyframes arrowpush {
    0% {
        d: path("m8 8 42 21 42-21");
    }
    100% {
        d: path("m8 39 42 21 42-21");
    }
}

/* DOES NOT WORK AS INTENDED
@keyframes chevronpushed {
    0% {
        d: path("m46.422 98.211-39.267-19.633a12.944 12.944 58.283 0 1-7.1554-11.578v-34a4.9443 4.9443 148.28 0 1 7.1554-4.4223l39.267 19.633a8 8 180 0 0 7.1554 0l39.267-19.633a4.9443 4.9443 31.717 0 1 7.1554 4.4223v34a12.944 12.944 121.72 0 1-7.1554 11.578l-39.267 19.633a8 8 180 0 1-7.1554 0z");
    }
    100% {
        d: path("m46.422 98.211-39.267-19.633a12.944 12.944 58.283 0 1-7.1554-11.578 4.9443 4.9443 148.28 0 1 7.1554-4.4223l39.267 19.633a8 8 180 0 0 7.1554 0l39.267-19.633a4.9443 4.9443 31.717 0 1 7.1554 4.4223 12.944 12.944 121.72 0 1-7.1554 11.578l-39.267 19.633a8 8 180 0 1-7.1554 0z");
    }
}*/

/* SVG arrowAlt push chevron */

@keyframes arrowaltpush {
    0% {
        d: path("m8-39.5 42 21 42-21");
    }
    100% {
        d: path("m8 18.5 42 21 42-21");
    }
}

/* SVG hamburger to cross upper */

@keyframes hamburgertocrossupper {
    0% {
        d: path("m8 8h84");
    }
    100% {
        rotate: 45deg;
        d: path("m8 50h84");
    }
}

/* SVG hamburger to cross lower */

@keyframes hamburgertocrosslower {
    0% {
        d: path("m8 92h84");
    }
    100% {
        rotate: -45deg;
        d: path("m8 50h84");
    }
}

/************************/
/* Side-wide properties */
/************************/

:root {
    --anim_dur: 500ms;
    --bord_rad: 25px;
    --bord_rad_circ: calc((25vh + 25vw) / 2);
    --col_green: hwb(150 15% 40%);
    --col_red: hwb(0 15% 40%);
    --col_blue: hwb(205 15% 30%);
    --col_blue_transp: hwb(205 15% 30% / .15);
    --col_darkblue: hwb(215 15% 40%);
    --col_gold: hwb(50 15% 15%);
    --col_darkgrey: hwb(0 15% 85%);
    --col_grey: hwb(0 50% 50%);
    --col_lightgrey: hwb(0 85% 15%);
    --col_whitesmoke: hwb(0 95% 5%);
    margin: 0;
    padding: 0;
    font: 500 1rem "Open Sans", sans-serif;
    color: var(--col_darkgrey);
    line-height: 1.5;
}

html, body {
    background: var(--col_grey);
    margin: 0;
    padding: 0;
}

a, a:visited {
    color: var(--col_blue);
    text-decoration: solid underline var(--col_blue) .1rem;
    text-underline-offset: .2rem;
    font-weight: 600;
    transition: color var(--anim_dur), text-decoration var(--anim_dur), background-color var(--anim_dur);
}

a:hover, a:active, a:focus, a:focus-visible, a:focus-within {
    color: var(--col_darkblue);
    text-decoration: solid underline var(--col_darkblue) .1rem;
    background-color: var(--col_blue_transp);
}

h1, h2, h3, h4, h5 {
    padding: 0;
    margin: 0 0 2rem 0;
    font-weight: 700;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.75rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

h5 {
    font-size: 0.75rem;
}

svg {
    fill: var(--col_darkgrey);
    stroke: var(--col_darkgrey);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 16px;
    transition: all var(--anim_dur);
    overflow: visible;
}

div#contentloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: whitesmoke;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    z-index: 999;
}

div#contentloader > div#contentloaderAnim {
    background: var(--col_darkgrey);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    animation: load-scale-in-out 10s infinite both;
}

div#contentloader > div#contentloaderText {
    font-size: 1.5rem;
    font-weight: 600;
}

div#epd-background {
    position: fixed;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px) grayscale(50%) brightness(25%);
    /* Backdrop-Filter is not yet fully optimized. To counter performance drops, tranform hacks are being used to force the GPU to render the content */
    transform: translate3d(0, 0, 0);
    transform: translateZ(0);
    z-index: 998;
}

div#epd-notice {
    min-width: min(50%, 1250px);
    max-width: min(80%, 1250px);
    max-height: 80%;
    margin-top: 25vh;
    transform: translateY(-25%);
    padding: 1.5rem 2.5rem;
    background-color: whitesmoke;
    border-radius: var(--bord_rad);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column wrap;
    overflow: hidden;
    filter: drop-shadow(2.5px 2.5px 5px rgba(0,0,0,.5));
}

div#epd-notice > div#epd-initial_notice {
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row nowrap;
    gap: 0 2.5rem;
    width: 100%;
}

@media (width < 1000px) {
    div#epd-notice > div#epd-initial_notice {
        flex-flow: row wrap;
        gap: 1.5rem 2.5rem;
    }
}

div#epd-notice > div#epd-initial_notice > p {
    padding: 0;
    margin: 0;
    min-height: 100px;
}

div#epd-notice > div#epd-initial_notice > p:first-of-type {
    display: flex;
    align-items: center;
    flex: 0 1 50%;
}

@media (width < 1000px) {
    div#epd-notice > div#epd-initial_notice > p:first-of-type {
        flex: 1 0 100%;
        justify-content: center;
        text-align: center;
        height: auto;
    }
}

div#epd-notice .epd-click {
    transition: background-color var(--anim_dur), scale var(--anim_dur), color var(--anim_dur), width var(--anim_dur);
}

div#epd-notice > div#epd-initial_notice > p.epd-click {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    user-select: none;
    cursor: pointer;
    border-radius: var(--bord_rad);
    text-align: center;
    font-weight: 600;
    line-height: 1;
    flex: 1 0 200px;
    gap: .75rem;
}

div#epd-notice > div#epd-initial_notice > p.epd-click > svg {
    height: 2.75rem;
    fill: var(--col_darkgrey);
}

div#epd-notice > div#epd-initial_notice > p#epd-learnmore.epd-click > svg {
    stroke-width: 0;
}

div#epd-notice > div#epd-initial_notice > p#epd-understood.epd-click > svg {
    rotate: 45deg;
    transform-origin: center;
}

div#epd-notice > div#epd-initial_notice :is(p.epd-click:active, p.epd-click:focus, p.epd-click:focus-visible, p.epd-click:focus-within, p.epd-click:hover) {
    background-color: rgba(0,0,0,.1);
    scale: 1.025;
}

div#epd-notice > div#epd-initial_notice :is(p.epd-click:active, p.epd-click:focus, p.epd-click:focus-visible, p.epd-click:focus-within, p.epd-click:hover) > svg {
    scale: 1.025;
}

div#epd-notice > div#epd-initial_notice :is(p#epd-learnmore:active, p#epd-learnmore:focus, p#epd-learnmore:focus-visible, p#epd-learnmore:focus-within, p#epd-learnmore:hover) {
    --epd-cliepd-color: var(--col_darkblue);
    color: var(--epd-cliepd-color);
}

div#epd-notice > div#epd-initial_notice :is(p#epd-learnmore:active, p#epd-learnmore:focus, p#epd-learnmore:focus-visible, p#epd-learnmore:focus-within, p#epd-learnmore:hover) > svg {
    fill: var(--epd-cliepd-color);
}

div#epd-notice > div#epd-initial_notice :is(p#epd-learnmore:active, p#epd-learnmore:focus, p#epd-learnmore:focus-visible, p#epd-learnmore:focus-within, p#epd-learnmore:hover) > svg > g > circle#dot {
    animation: infodotjump 2.4s ease-in-out infinite;
    transform-origin: center;
}

div#epd-notice > div#epd-initial_notice :is(p#epd-understood:active, p#epd-understood:focus, p#epd-understood:focus-visible, p#epd-understood:focus-within, p#epd-understood:hover) {
    --epd-cliepd-color: var(--col_red);
    color: var(--epd-cliepd-color);
}

div#epd-notice > div#epd-initial_notice :is(p#epd-understood:active, p#epd-understood:focus, p#epd-understood:focus-visible, p#epd-understood:focus-within, p#epd-understood:hover) > svg {
    fill: var(--epd-cliepd-color);
    stroke: var(--epd-cliepd-color);
}

div#epd-notice > div#epd-initial_notice :is(p#epd-understood:active, p#epd-understood:focus, p#epd-understood:focus-visible, p#epd-understood:focus-within, p#epd-understood:hover) > svg > g > path {
    animation: negativewiggle_45 2.4s ease-in-out infinite;
    transform-origin: center;
}

div#epd-notice > div#epd-detailed {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    overflow: hidden;
}

div#epd-notice > div#epd-detailed > div#epd-d_content {
    display: flex;
    flex-flow: column nowrap;
    padding-right: 15px;
    overflow-y: auto;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > h2:first-of-type {
    margin-top: 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > h2:not(:first-of-type) {
    margin-top: 2rem;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > p {
    padding: 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div :is(p, ul, ol):first-child {
    margin-top: 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div :is(p, ul, ol):last-child {
    margin-bottom: 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > ul {
    margin: 0;
    margin-block: 0;
    padding-inline-start: 15px;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > ul > li {
    margin-bottom: .5rem;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > div.table {
    margin: 2rem 0;
    border-collapse: collapse;
    border-radius: var(--bord_rad);
    overflow: hidden;
    display: flex;
    flex-flow: column nowrap;
    border: 6px solid var(--col_grey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > div.table > div.tr {
    display: flex;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > div.table > div.tr:first-child {
    font-weight: 700;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > div.table > div.tr:not(:first-child) {
    border-top: 3px solid var(--col_grey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > div.table > div.tr > div {
    padding: 1rem;
    width: 50%;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > div.table > div.tr > div:first-of-type {
    border-right: 3px solid var(--col_grey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div > div.table > div.tr:nth-child(2n) {
    background-color: var(--col_lightgrey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings {
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    grid: auto / auto-flow dense minmax(225px, 5fr) minmax(250px, 4fr) 70px;
    place-items: stretch;
    place-content: stretch;
    border-radius: var(--bord_rad);
    border: 6px solid var(--col_grey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div[class^="epd-set"] {
    display: contents;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div[class^="epd-set"] > div[class^="epd-set"] {
    place-self: stretch;
    display: flex;
    padding: 1rem .5rem;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div[class^="epd-set"]:last-of-type > div[class^="epd-set"]:nth-child(2) {
    border-radius: 0 0 0 20px;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div[class^="epd-set"]:last-of-type > div[class^="epd-set"]:last-child {
    border-radius: 0 0 10px 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_header > div[class^="epd-set_header"] {
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 1.2rem;
    font-weight: bold;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_header > div.epd-set_header-name_desc {
    grid-area: 1 / 1 / 1 / span 2;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_header > div.epd-set_header-set_del {
    grid-area: 1 / 2 / 1 / span 2;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings :is(div[class^="epd-set"] > div[class^="epd-set_header"]:nth-child(2), div[class^="epd-set"]:nth-child(n + 2) > div[class^="epd-set"]:nth-child(3)) {
    border-left: 6px solid var(--col_grey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings :is(div[class^="epd-set"] > div[class^="epd-set_header"], div[class^="epd-set"]:not(:last-of-type) > div[class^="epd-set_item"]:not(:first-child)) {
    border-bottom: 6px solid var(--col_grey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div[class^="epd-set"] :is(div.epd-set_header_name-desc, div.epd-set_item-name, div.epd-set_item-desc) {
    grid-column-start: 1;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div[class^="epd-set"]:nth-child(2n) > div[class^="epd-set_item"] {
    background-color: var(--col_lightgrey);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-name {
    justify-content: flex-start;
    align-items: flex-end;
    font-size: 1.2rem;
    font-weight: bold;
    padding-bottom: .25rem;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-desc {
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: .8rem;
    font-style: italic;
    padding-top: 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list :is(div.epd-set_item-set, div.epd-set_item-del) {
    grid-row-end: span 2;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set {
    flex-flow: column wrap;
    grid-column-start: 2;
    justify-content: flex-start;
    align-items: flex-start;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set p {
    margin: 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set > p.epd-is_set{
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: .5rem;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set :where(p.epd-possible_val, p.epd-cur_val, p.epd-exp) {
    font-style: italic;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set :where(p.epd-possible_val, p.epd-cur_val) span {
    quotes: '\22' '\22';
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set > p.epd-cur_val {
    display: none;
    opacity: 0;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set > div.epd-edit_val {
    display: contents;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set > div.epd-edit_val > [class^="epd"] {
    margin-top: 1rem;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-set > div.epd-edit_val > p {
    font-weight: bold;
}

div.epd-toggle {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--col_grey);
    font-size: 1.1rem;
    font-weight: bold;
    text-align: center;
    user-select: none;
    border: 6px solid var(--col_grey);
    border-radius: var(--bord_rad_circ);
    background-color: whitesmoke;
    cursor: pointer;
    overflow: hidden;
}

@media (width < 1000px) {
    div.epd-toggle {
        font-size: 1rem;
    }
}

div.epd-toggle > div:nth-of-type(-n + 2) {
    position: absolute;
}

div.epd-toggle > div.epd-toggle_background {
    background-color: rgba(0,0,0,.15);
    height: 100%;
    width: 100%;
}

div.epd-toggle > div.epd-toggle_cur_val {
    background-color: var(--col_green);
    border-radius: var(--bord_rad_circ);
    translate: 0;
    filter: drop-shadow(0 0 10px rgba(0,0,0,.5));
    transition: translate var(--anim_dur), width var(--anim_dur), opacity var(--anim_dur);
}

div.epd-toggle > div:nth-last-of-type(-n + 2) {
    padding: 1rem 2rem;
    transition: color var(--anim_dur);
    z-index: 1;
}

@media (width < 1000px) {
    div.epd-toggle > div:nth-last-of-type(-n + 2) {
        padding: .5rem 1rem;
    }
}

div.epd-toggle > div:nth-last-of-type(-n + 2) > svg {
    vertical-align: middle;
    height: auto;
    width: 26.4px;
    scale: 1.5;
    fill: var(--col_grey);
    stroke: var(--col_grey);
    transition: fill var(--anim_dur), stroke var(--anim_dur), scale var(--anim_dur);
}

div.epd-toggle > div:nth-last-of-type(-n + 2).epd-toggle_active {
    color: var(--col_darkgrey);
}

div.epd-toggle > div#lm.epd-toggle_active > svg {
    fill: hwb(55 0% 0%);
    stroke: hwb(55 0% 0%);
}

div.epd-toggle > div#lm.epd-toggle_active > svg > g > circle {
    animation: 15s ease-in-out infinite scale-out-in;
    transform-origin: center;
}

div.epd-toggle > div#lm.epd-toggle_active > svg > g > g#sunrays {
    animation: 60s linear infinite rotate360, 15s ease-in-out 7.5s infinite scale-in-out;
    transform-origin: center;
}

div.epd-toggle > div#lm.epd-toggle_active > svg > g > g#sunrays > g#sunrays_45 > path#sunray_45 {
    animation: 5s ease-in-out infinite sunray_45exp;
    transform-origin: center;
}

div.epd-toggle > div#lm.epd-toggle_active > svg > g > g#sunrays > g#sunrays_45 > path#sunray_135 {
    animation: 5s ease-in-out infinite sunray_135exp;
    transform-origin: center;
}

div.epd-toggle > div#lm.epd-toggle_active > svg > g > g#sunrays > g#sunrays_45 > path#sunray_225 {
    animation: 5s ease-in-out infinite sunray_225exp;
    transform-origin: center;
}

div.epd-toggle > div#lm.epd-toggle_active > svg > g > g#sunrays > g#sunrays_45 > path#sunray_315 {
    animation: 5s ease-in-out infinite sunray_315exp;
    transform-origin: center;
}

div.epd-toggle > div#dm.epd-toggle_active > svg {
    fill: hwb(50 75% 5%);
}

div.epd-toggle > div#dm.epd-toggle_active > svg > g > path#moon {
    animation: 60s cubic-bezier(.68,-.55,.27,1.55) infinite moon_swing;
    transform-origin: center;
}

div.epd-toggle > div#dm.epd-toggle_active > svg > g > g#stars {
    animation: 60s cubic-bezier(.68,-.55,.27,1.55) infinite stars_swing;
    transform-origin: center;
}

div.epd-toggle > div#dm.epd-toggle_active > svg > g > g#stars > path:first-of-type {
    animation: 10s linear infinite reverse stars_blink;
}

div.epd-toggle > div#dm.epd-toggle_active > svg > g > g#stars > path:nth-of-type(2) {
    animation: 50s linear infinite stars_blink;
}

div.epd-toggle > div#dm.epd-toggle_active > svg > g > g#stars > path:nth-of-type(3) {
    animation: 5s linear infinite stars_blink;
}

div.epd-toggle > div#dm.epd-toggle_active > svg > g > g#stars > path:last-of-type {
    animation: 15s linear infinite stars_blink;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-del {
    grid-column-start: 3;
    justify-content: stretch;
    align-items: stretch;
    cursor: pointer;
    padding: .5rem;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-del > svg {
    height: auto;
    width: 100%;
    fill: rgba(0,0,0,.5);
    stroke: rgba(0,0,0,.5);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-del.epd-notset {
    cursor: not-allowed;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list > div.epd-set_item-del.epd-notset > svg {
    fill: rgba(0,0,0,.1);
    stroke: rgba(0,0,0,.1);
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list :is(div.epd-set_item-del:not(.epd-notset):active, div.epd-set_item-del:not(.epd-notset):focus, div.epd-set_item-del:not(.epd-notset):focus-visible, div.epd-set_item-del:not(.epd-notset):focus-within, div.epd-set_item-del:not(.epd-notset):hover) > svg {
    fill: var(--col_red);
    stroke: var(--col_red);
    scale: 1.025;
}

div#epd-notice > div#epd-detailed > div#epd-d_content > div#epd-settings > div.epd-set_list :is(div.epd-set_item-del:not(.epd-notset):active, div.epd-set_item-del:not(.epd-notset):focus, div.epd-set_item-del:not(.epd-notset):focus-visible, div.epd-set_item-del:not(.epd-notset):focus-within, div.epd-set_item-del:not(.epd-notset):hover) > svg > g > path#lid {
    animation: 1.2s ease-in-out var(--anim_dur) infinite trashcanshakelid;
    transform-origin: center;
}

div#epd-notice > div#epd-detailed > div#epd-close {
    margin: 2rem 0 1rem;
    padding: 1rem 0;
    background-color: var(--col_darkgrey);
    font-size: 1.1rem;
    font-weight: 600;
    color: whitesmoke;
    border-radius: var(--bord_rad);
    user-select: none;
    cursor: pointer;
    text-align: center;
    align-self: center;
    width: 95%;
}

div#epd-notice > div#epd-detailed :is(div#epd-close.epd-click:active, div#epd-close.epd-click:focus, div#epd-close.epd-click:focus-visible, div#epd-close.epd-click:focus-within, div#epd-close.epd-click:hover) {
    background-color: var(--col_red);
    width: 99%;
}

main {
    margin: 2.5%;
    padding: 2rem;
    background: whitesmoke;
    border-radius: var(--bord_rad);
    min-height: 75vh;
    height: auto;
    width: calc(95% - 4rem);
    filter: drop-shadow(5px 5px 10px rgba(0,0,0,.5));
}

footer {
    padding: 0 1rem;
    background-color: white;
    display: flex;
    flex-flow: column nowrap;
    bottom: 0;
    z-index: 995;
}

footer a {
    cursor: pointer;
}

footer > div#global_footer {
    padding: 2rem 0 1rem;
    display: flex;
    justify-content: space-evenly;
    flex-flow: row wrap;
    gap: 1rem;
}

footer > div#global_footer > div {
    max-width: 750px;
}

footer > div#global_footer :where(div#footer-links, div#footer-about, div#footer-about > div#footer-contact, div#footer-about > div#footer-credit) {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem 0;
}

footer > div#global_footer > div#footer-about > div#footer-contact > p {
    margin: 0;
    padding: 0;
}

div#footer-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(5px) grayscale(50%) brightness(25%);
    /* Backdrop-Filter is not yet fully optimized. To counter performance drops, tranform hacks are being used to force the GPU to render the content */
    transform: translate3d(0, 0, 0);
    transform: translateZ(0);
    z-index: 994;
}