@media all {

    /* Global site variables */    

    :root {

        /* Colors CI */

        --color-red-rgb: 255, 70, 34;
        --color-red: rgb(var(--color-red-rgb));

        --color-darkpurple-rgb: 27, 6, 77;
        --color-darkpurple: rgb(var(--color-darkpurple-rgb));

        --color-yellow-rgb: 255, 163, 0;
        --color-yellow: rgb(var(--color-yellow-rgb));

        --color-green-rgb: 9, 123, 61;
        --color-green: rgb(var(--color-green-rgb));

        --color-lilac-rgb: 163, 158, 255;
        --color-lilac: rgb(var(--color-lilac-rgb));

        --color-offwhite-rgb: 255, 250, 224;
        --color-offwhite: rgb(var(--color-offwhite-rgb));

        --color-white-rgb: 255, 255, 255;
        --color-white: rgb(var(--color-white-rgb));

        /* Page */

        --page-width: 100vw;
        --page-gap: var(--size-10);  
        --page-padding: var(--size-4);
        --page-grid: 
            1fr
            var(--page-padding)
            repeat(11, minmax(0, var(--colmax)) var(--container-gap))
            minmax(0, var(--colmax))
            var(--page-padding)
            1fr;
        --header-grid-max:
            var(--page-padding)
            repeat(5, minmax(0, var(--colmax)) var(--container-gap))
            1fr;

        /* Header */

        --header-background: var(--color-offwhite);
        --header-background-scrolled: rgba(var(--color-white-rgb), .9);

        /* Naigation variable */

        --navigation-item-padding-x: 1rem;
        --navigation-item-padding-y: .625rem;

        /* Content */

        --content-width-inner: calc(var(--content-width-outer) - (var(--page-padding) * 2));
        --content-width-outer: 90rem;
        --content-width-narrow: calc((var(--content-width-outer) - (var(--page-padding) * 2) - (11 * var(--container-gap))) / 12 * 8 + (7 * var(--container-gap)));

        /* 
        --logo-height: calc(var(--size-4) * 2.625);
        --logo-padding: calc(var(--size-4) * 1.1875);
        */

        --logo-height: 2.625rem;
        --logo-padding: 1.1875rem;

        /* Container */

        --container-gap: var(--size-6);
        --colmax: calc((var(--content-width-inner) / 12) - (var(--container-gap) / 11));
        --colmax: calc((var(--content-width-inner) - var(--container-gap) * 11) / 12);

        /* Gallery */

        --gallery-gap: var(--size-2);

        /* Relational gaps */

        --gap-gallery-text: var(--size-4);
        --gap-header-bodytext: var(--size-4);

        /* Fonts */

        --font-family-body: 'Silka', sanf-serif;
        --font-family-header: 'Silka', sanf-serif;

        --font-weight-body: 500;

        /* Filter */

        --backdrop-blur: blur(.125rem);

        /* Transitions */

        --transition-default: all .2s ease-in-out;
        --transition-slow: all .6s ease-in-out;
        --transition-brr: all .15s cubic-bezier(.54,.18,.6,1.89);

        /* Radii */

        --border-radius-small: .25rem;
        --border-radius-medium: .5rem;
        --border-radius-large: 1rem;
        --border-radius-full: 100vmax;

        /* Shadows */

        /* Was: rgba(var(--color-darkpurple-rgb) -> Is: rgba(var(--ce-color-interactive-rgb)) */
        
        
        --box-shadow-menu: 0 .125rem 1rem rgba(var(--color-darkpurple-rgb, var(--ce-color-bg-rgb)), .08);
        --box-shadow-32: 0 0 2rem rgba(var(--ce-color-interactive-rgb), .08);
        --box-shadow-24: 0 0 1.5rem rgba(var(--ce-color-interactive-rgb), .08);
        --box-shadow-16: 0 .25rem 1rem rgba(var(--ce-color-interactive-rgb), .08);
        --text-shadow: 0 0 .625em rgba(var(--ce-color-interactive-rgb), 1);

        /* Accessibility */

        --a11y-focus-color-rgb: var(--color-red-rgb);
        --a11y-focus-opacity: .5;
        --a11y-focus-color: rgba(var(--a11y-focus-color-rgb), var(--a11y-focus-opacity));

        /* Gradients */

        --gradient-copyright: linear-gradient(rgba(var(--color-darkpurple-rgb),0), rgba(var(--color-darkpurple-rgb),.25));

    }

    /* Dynamic font scaling */

    :root,
    body,
    h1,h2,h3,h4,h5,
    .h1,.h2,.h3,.h4,.h5 {
        --dynamic-clamp-start: 48; /*rem*/
        --dynamic-clamp-end: 88; /*rem*/

        --dynamic-size-diff: calc(var(--dynamic-size-max) - var(--dynamic-size-min));
        --dynamic-clamp-diff: calc(var(--dynamic-clamp-end) - var(--dynamic-clamp-start));
        --dynamic-size-clamp: calc((var(--dynamic-size-min) * 1rem) + var(--dynamic-size-diff) * ((100vw - (var(--dynamic-clamp-start) * 1rem)) / var(--dynamic-clamp-diff)));
        --dynamic-size-scaler: clamp((var(--dynamic-size-min) * 1rem), var(--dynamic-size-clamp), (var(--dynamic-size-max) * 1rem));
    }

    /* Dynamic size scaling */

    :root {
        --font-size-small: .875rem;

        --dynamic-size-min: .25; /*rem*/
        --dynamic-size-max: .5; /*rem*/

        --size-1: var(--dynamic-size-scaler); /* default-values 4 -> 8 */
        --size-2: calc(var(--size-1) * 2); /* default-values 8 -> 16 */
        --size-3: calc(var(--size-1) * 3); /* default-values 12 -> 24 */
        --size-4: calc(var(--size-1) * 4); /* default-values 16 -> 32 */
        --size-5: calc(var(--size-1) * 5); /* default-values 20 -> 40 */
        --size-6: calc(var(--size-1) * 6); /* default-values 24 -> 48 */
        --size-7: calc(var(--size-1) * 7); /* default-values 28 -> 56 */
        --size-8: calc(var(--size-1) * 8); /* default-values 32 -> 64 */
        --size-9: calc(var(--size-1) * 9); /* default-values 36 -> 72 */
        --size-10: calc(var(--size-1) * 10); /* default-values 40 -> 80 */
        --size-12: calc(var(--size-1) * 12); /* default-values 48 -> 96 */
        --size-14: calc(var(--size-1) * 14); /* default-values 56 -> 112 */
        --size-16: calc(var(--size-1) * 16); /* default-values 64 -> 128 */
        --size-18: calc(var(--size-1) * 18); /* default-values 72 -> 144 */
        --size-20: calc(var(--size-1) * 20); /* default-values 80 -> 160 */
    }

    body {
        --dynamic-size-min: 1; /*rem*/
        --dynamic-size-max: 1.1875; /*rem*/
    }

    body,
    h1, h2, h3, h4, h5,
    .h1, .h2, .h3, .h4, .h5 {
        font-size: var(--dynamic-size-scaler);
    }

    h1, .h1 {
        --dynamic-size-min: 3; /*rem*/
        --dynamic-size-max: 4; /*rem*/
    }

    h2, .h2 {
        --dynamic-size-min: 2; /*rem*/
        --dynamic-size-max: 3; /*rem*/
    }

    .ce-type-mask_stage_l .ce-header > :is(h1,.h1),
    h3, .h3 {
        --dynamic-size-min: 1.5; /*rem*/
        --dynamic-size-max: 2; /*rem*/
    }

    h4, .h4 {
        --dynamic-size-min: 1.25; /*rem*/
        --dynamic-size-max: 1.5; /*rem*/
    }

    h5, .h5 {
        --dynamic-size-min: 1.188; /*rem*/
        --dynamic-size-max: 1.25; /*rem*/
    }

    h6, .h6 {
        --dynamic-size-min: 1; /*rem*/
        --dynamic-size-max: 1.1875; /*rem*/
    }
}

@media (min-width: 62rem) {

    /* Global site variables */    
    .ce-type-mask_stage_l .ce-header > :is(h1,.h1) {
        --dynamic-size-min: 2; /*rem*/
        --dynamic-size-max: 3; /*rem*/
    }

    :root {

        --logo-height: var(--size-6);
        --logo-padding: calc(var(--size-2) * 1.625);

        --page-padding: var(--size-10);

        --container-gap: var(--size-5);

        /* font sizes */

        --font-size-large: 1.105263157894737em;

    }

}

@media (min-width: 90rem) {
    /* Global site variables */    
    .ce-type-mask_stage_l .ce-header > :is(h1,.h1) {
        --dynamic-size-min: 3; /*rem*/
        --dynamic-size-max: 4; /*rem*/
    }
}

/* ###################
##### Bootstrap ######
################### */
@layer bootstrap {

    @media all {

        :root {
            --bs-border-width: 0;
            --bs-link-color-rgb: var(--ce-color-fg-rgb, var(--color-darkpurple-rgb));
            --bs-link-hover-color-rgb: var(--ce-color-interactive-rgb, var(--color-darkpurple-rgb));
            --bs-body-font-family: var(--font-family-body);
            --bs-body-font-weight: var(--font-weight-body);
            --bs-body-color: var(--ce-color-fg, var(--color-darkpurple));
            --bs-body-color-rgb: var(--ce-color-bg-rgb, var(--color-offwhite-rgb));
            --bs-body-bg: var(--ce-color-bg, var(--color-offwhite));
        }

        body {
            color: var(--color-darkpurple);
        }

        .container,
        .container-lg,
        .container-md,
        .container-sm,
        .container-xl,
        .container-xxl {
            max-width: var(--content-width-outer);
        }


        .container,
        .container-fluid,
        .container-lg,
        .container-md,
        .container-sm,
        .container-xl,
        .container-xxl {
            padding-right: var(--page-padding);
            padding-left: var(--page-padding);
        }

        .btn {
            --bs-btn-font-size: unset;
        }

        .btn-primary,
        .btn-outline-primary {
            --bs-btn-font-weight: 700;
            --bs-btn-font-size: 1rem;
            --bs-btn-line-height: 1;
            --bs-btn-padding-x: var(--size-4);
            --bs-btn-padding-y: var(--bs-btn-padding-x);
        }

        .btn-primary {
            --bs-btn-color: var(--ce-color-cta-fg);
            --bs-btn-bg: var(--ce-color-cta-bg);
            --bs-btn-border-color: var(--ce-color-cta-bg);

            --bs-btn-focus-color: var(--ce-color-cta-fg);
            --bs-btn-focus-bg: var(--ce-color-cta-bg);
            --bs-btn-focus-border-color: var(--ce-color-cta-bg);

            --bs-btn-hover-color: var(--ce-color-cta-fg);
            --bs-btn-hover-bg: var(--ce-color-cta-bg);
            --bs-btn-hover-border-color: var(--ce-color-cta-bg);

            --bs-btn-active-color: var(--ce-color-cta-fg);
            --bs-btn-active-bg: var(--ce-color-cta-bg);
            --bs-btn-active-border-color: var(--ce-color-cta-bg);

            --bs-btn-border-width: 3px;
        }
        
        .btn {
            --bs-btn-disabled-color: --bs-btn-color;
            --bs-btn-disabled-bg: --bs-btn-bg;
            --bs-btn-disabled-border-color: --bs-btn-border-color;
        }

        :is(.card,.accordion-item, .ce-media-overlay) .btn-primary {
            --bs-btn-color: var(--ce-color-card-cta-fg);
            --bs-btn-bg: var(--ce-color-card-cta-bg);
            --bs-btn-border-color: var(--ce-color-card-cta-bg);

            --bs-btn-focus-color: var(--ce-color-card-cta-fg);
            --bs-btn-focus-bg: var(--ce-color-card-cta-bg);
            --bs-btn-focus-border-color: var(--ce-color-card-cta-bg);

            --bs-btn-hover-color: var(--ce-color-card-cta-fg);
            --bs-btn-hover-bg: var(--ce-color-card-cta-bg);
            --bs-btn-hover-border-color: var(--ce-color-card-cta-bg);

            --bs-btn-active-color: var(--ce-color-card-cta-fg);
            --bs-btn-active-bg: var(--ce-color-card-cta-bg);
            --bs-btn-active-border-color: var(--ce-color-card-cta-bg);
        }

        .btn-primary.btn-small-padding {
            --bs-btn-padding-y: var(--size-4);
        }

        .btn-link {
            --bs-btn-font-size: 1.3125rem;
            --bs-btn-color: currentColor;
            --bs-btn-focus-color: var(--ce-color-interactive);
            --bs-btn-hover-color: var(--ce-color-interactive);
            --bs-btn-active-color: var(--ce-color-interactive);
        }

        :is(.card,.accordion-item) .btn-link {
            --bs-btn-color: currentColor;
            --bs-btn-focus-color: var(--ce-color-card-interactive);
            --bs-btn-hover-color: var(--ce-color-card-interactive);
            --bs-btn-active-color: var(--ce-color-card-interactive);
        }

        .btn-link:focus-visible {
            color: var(--bs-btn-focus-color);
        }

        .btn-outline-primary {
            --bs-btn-color: var(--ce-color-interactive);
            --bs-btn-bg: transparent;
            --bs-btn-border-color: var(--ce-color-cta-bg);

            --bs-btn-focus-color: var(--ce-color-interactive);
            --bs-btn-focus-bg: transparent;
            --bs-btn-focus-border-color: var(--ce-color-cta-bg);

            --bs-btn-hover-color: var(--ce-color-interactive);
            --bs-btn-hover-bg: transparent;
            --bs-btn-hover-border-color: var(--ce-color-cta-bg);

            --bs-btn-active-color: var(--ce-color-interactive);
            --bs-btn-active-bg: transparent;
            --bs-btn-active-border-color: var(--ce-color-cta-bg);

            --bs-btn-border-width: 3px;
        }

        :is(.card,.accordion-item) .btn-outline-primary {
            --bs-btn-color: var(--ce-color-card-interactive);
            --bs-btn-bg: transparent;
            --bs-btn-border-color: var(--ce-color-card-cta-bg);

            --bs-btn-focus-color: var(--ce-color-card-interactive);
            --bs-btn-focus-bg: transparent;
            --bs-btn-focus-border-color: var(--ce-color-card-cta-bg);

            --bs-btn-hover-color: var(--ce-color-card-interactive);
            --bs-btn-hover-bg: transparent;
            --bs-btn-hover-border-color: var(--ce-color-card-cta-bg);

            --bs-btn-active-color: var(--ce-color-card-interactive);
            --bs-btn-active-bg: transparent;
            --bs-btn-active-border-color: var(--ce-color-card-cta-bg);
        }

        .navbar {
            --bs-navbar-nav-link-padding-x: calc(var(--size-1) * 1.25);
        }

        .page-header-controls .btn ,
        .linguise_switcher_popup {
            --bs-btn-padding-x: calc(var(--size-1) * 1.25);
        }

        .dropdown-menu {
            --bs-link-hover-color-rgb: var(--ce-color-interactive-rgb, var(--color-darkpurple-rgb));
            --bs-body-color: var(--ce-color-fg, var(--color-darkpurple));
            --bs-body-bg: var(--ce-color-bg, var(--color-offwhite));            

            --bs-dropdown-font-size: unset;
            --bs-dropdown-padding-y: var(--size-4);
            --bs-dropdown-item-padding-x: 0;
            --bs-dropdown-item-padding-y: calc(var(--size-1) * 1.25);
            --bs-dropdown-link-hover-bg: transparent;
            --bs-dropdown-link-hover-color: var(--ce-color-interactive);
            --bs-dropdown-link-active-bg: transparent;
            --bs-dropdown-link-active-color: var(--ce-color-interactive);
        }

        .page-footer .nav-link {        
            --bs-nav-link-color: var(--ce-color-fg);
            --bs-nav-link-hover-color: var(--color-1-hover);
        }

        .page-footer-bottom .row {
            --bs-gutter-y: var(--size-6);
        }

        .pagination {
            --bs-pagination-font-size: unset;
        }

        .page-link {
            --bs-pagination-color: var(--ce-color-fg);
        }

    }

    @media (min-width: 62rem) {

        .btn-primary,
        .btn-outline-primary,
        .btn-link {
            --bs-btn-font-size: 1.3125rem;
            --bs-btn-padding-x: var(--size-5);
            --bs-btn-padding-y: var(--bs-btn-padding-x);

            &.btn-small-padding {
                --bs-btn-padding-y: var(--size-2);
            }
        }

    }

    @media (min-width: 80rem) {

        .navbar {
            --bs-navbar-nav-link-padding-x: calc(var(--size-1) * 2.5);
        }

        .page-header-controls .btn ,
        .linguise_switcher_popup {
            --bs-btn-padding-x: calc(var(--size-1) * 2.5);
        }

    }

}

/* ###################
##### MM-Menu ######
################### */
@media all {

    .mm-menu.mm-menu--theme-light {
        --mm-color-background: var(--ce-color-bg);
        --mm-color-border: transparent;
        --mm-color-icon: var(--ce-color-fg);
        --mm-color-text: var(--ce-color-fg);
        --mm-color-text-dimmed: rgb(var(--color-darkpurple-rgb) / 0.4);
        --mm-color-text-dimmed: var(--ce-color-fg);
        --mm-color-background-highlight:rgb(0 0 0 / 0.05);
        --mm-color-background-emphasis:rgb(255 255 255 / 0.75);
        --mm-color-focusring:#06c
    }

}

/* ##############
##### Page ######
############## */
@media all {
    :root {
    }
}

/* ##################
##### Container #####
################## */
@media all {
    :root {
    }
    .ce-grid-fullwidth-bg {
        --ce-color-bg: transparent;
    }
}

/* ###################
##### Textmedia ######
################### */
@media all {
    .ce-textmedia {
        --ce-textmedia-nowrap-wrap: wrap;
        --ce-gallery-margin-horizontal: 1rem
    }
}

@media(min-width: 48rem) {
    .ce-textmedia {
        --ce-textmedia-nowrap-wrap: nowrap
    }

    .ce-textmedia {
        --ce-gallery-margin-horizontal: 1.5rem
    }
}    

/* ######################
##### Content menu ######
###################### */
@media all {
    .ce-content-menu {
        --ce-content-menu-menu-offset: 5rem;
        --ce-content-menu-trigger-offset: -7.5rem
    }

    .ce-content-menu {
        --ce-content-menu-menu-offset: calc(var(--scroll-offset));
        --ce-content-menu-trigger-offset: calc(-1 * (var(--scroll-offset) + var(--page-gap)))
    }
}

/* #################
##### Gallery ######
################# */
@media all {
    .ce-gallery {
        --ce-gallery-margin-vertical: 1rem;
        --ce-gallery-gutter: 0.75rem;
        --ce-gallery-width: 100%;
        --ce-gallery-icon-size: 1rem;
        --ce-gallery-column-width: 100%
    }

    .ce-intext .ce-gallery {
        --ce-gallery-width: calc(50% - (var(--container-gap) / 2))
    }

    .ce-nowrap .ce-gallery {
        --ce-gallery-width: 100%
    }

    .ce-gallery[data-ce-columns="2"] {
        --ce-gallery-column-width: calc(50% - (var(--ce-gallery-gutter) / 2));
    }

    .ce-gallery[data-ce-columns="3"] {
        --ce-gallery-column-width: calc(50% - (var(--ce-gallery-gutter) / 2))
    }

    .ce-gallery[data-ce-columns="4"] {
        --ce-gallery-column-width: calc(50% - (var(--ce-gallery-gutter) / 2))
    }
}

@media(min-width: 30rem) {
    .ce-gallery[data-ce-columns="3"] {
        --ce-gallery-column-width: calc(33.3333% - (var(--ce-gallery-gutter) * 2 / 3))
    }
}

@media(min-width: 48rem) {
    .ce-nowrap .ce-gallery {
        --ce-gallery-width: calc(50% - (var(--container-gap) / 2))
    }

    .ce-gallery[data-ce-columns="4"] {
        --ce-gallery-column-width: calc(25% - (var(--ce-gallery-gutter) * 3 / 4))
    }
}

@media(min-width: 62rem) {
    .ce-intext .ce-gallery {
        --ce-gallery-width: calc(33.3333% - (var(--container-gap) * 2 / 3))
    }

    .ce-nowrap .ce-gallery {
        --ce-gallery-width: calc(33.3333% - (var(--container-gap) * 2 / 3))
    }
}

/* ###############
##### Media ######
############### */
@media all {
    .ce-media {
        --ce-media-icon-size: 1rem;
        --ce-media-copyright-size: 0.5rem;
        --ce-media-overlay-offset: 0.5rem;
    }
}

/* ################
##### Layout ######
################ */
@media all {
    .ce-layout-box {
        --ce-color-fg: var(--color-gray-dark);
        --ce-color-bg: var(--color-white);
        --ce-color-link: var(--color-1);
    }

    .ce-layout-box.ce-inverted {
        --ce-color-fg: var(--ce-inverted-color);
        --ce-color-bg: var(--ce-inverted-bg);
        --ce-color-link: var(--ce-inverted-color);
    }
}

/* ################
##### Header ######
################ */
@media all {
    .page-header-sticky {
        /*! --min-window-height-px: 460; */
        /*! --page-header-height: 3.75rem */
    }

    .page-header-searchbox {
        --page-header-searchbox-width: 20rem;
        /*! --page-header-searchbox-height: 2.5rem; */
    }
}

@media(min-width: 30rem) {}

@media(min-width: 48rem) {
    .page-header-sticky {
        /*! --page-header-height: 6.875rem; */
        /*! --min-window-height-px: 600 */
    }
}

@media(min-width: 62rem) {
    .page-header-sticky {
        /*! --page-header-height: 9.375rem; */
        /*! --min-window-height-px: 760 */
    }
}

/* ##############
##### Page ######
############## */
@media all {
    :root {
        --body-max-width: 120rem
    }

    [class*="container"] {
        --bs-gutter-x: var(--page-padding);
    }

    :is(.ce-type-mask_stage_l, .ce-type-mask_stage_s) [class*="container"],
    [class*="container"] [class*="container"] {
        padding-inline: 0;
        max-width: 100%;
    }

    .row {
        --bs-gutter-x: var(--container-gap);
        --bs-gutter-y: var(--size-3);
    }
}

@media(min-width: 30rem) {}

@media(min-width: 48rem) {}

@media(min-width: 62rem) {}

/* ###############
##### Theme ######
############### */
@media all {
    [class*="ce-theme"] {
        color: var(--ce-color-fg);
        background-color: var(--ce-color-bg);
    }

    [class*="ce-theme"] [class*="ce-theme"] {
        --ce-color-bg: transparent;      
        --ce-color-bg-rgb: unset;
        --ce-color-fg: inherit;
        --ce-color-interactive-rgb: inherit;
        --ce-color-interactive: inherit;
        --ce-color-tag-bg: inherit;
        --ce-color-tag-fg: inherit;
        --ce-color-cta-bg: inherit;
        --ce-color-cta-fg: inherit;
        --ce-color-cta-hover-bg: inherit;
        --ce-color-cta-hover-fg: inherit;

        --ce-color-card-bg: inherit;
        --ce-color-card-bg-card-bg: inherit;
        --ce-color-card-fg: inherit;
        --ce-color-card-interactive-rgb: inherit;
        --ce-color-card-interactive: inherit;
        --ce-color-card-cta-bg: inherit;
        --ce-color-card-cta-fg: inherit;
        --ce-color-card-cta-hover-bg: inherit;
        --ce-color-card-cta-hover-fg: inherit;
    }

    .ce-theme-off-white ,
    .base-theme-off-white ,
    [class*="ce-theme"] .override-theme.ce-theme-off-white {
        --ce-color-bg: var(--color-offwhite);
        --ce-color-bg-rgb: var(--color-offwhite-rgb);
        --ce-color-fg: var(--color-darkpurple);
        --ce-color-interactive-rgb: var(--color-red-rgb);
        --ce-color-interactive: var(--color-red);
        --ce-color-tag-bg: var(--color-darkpurple);
        --ce-color-tag-fg: var(--color-offwhite);
        --ce-color-cta-bg: var(--color-red);
        --ce-color-cta-fg: var(--color-offwhite);
        --ce-color-cta-hover-bg: var(--color-yellow);
        --ce-color-cta-hover-fg: var(--color-darkpurple);

        --ce-color-card-bg: var(--color-white);
        --ce-color-card-bg-card-bg: var(--color-offwhite);
        --ce-color-card-fg: var(--color-darkpurple);
        --ce-color-card-interactive-rgb: var(--color-red-rgb);
        --ce-color-card-interactive: var(--color-red);
        --ce-color-card-cta-bg: var(--color-red);
        --ce-color-card-cta-fg: var(--color-offwhite);
        --ce-color-card-cta-hover-bg: var(--color-darkpurple);
        --ce-color-card-cta-hover-fg: var(--color-offwhite);
    }

    .ce-theme-off-white {
        --ce-inherited-color-bg: var(--color-offwhite);
    }

    .ce-theme-yellow ,
    .base-theme-yellow ,
    [class*="ce-theme"] .override-theme.ce-theme-yellow {
        --ce-color-bg: var(--color-yellow);
        --ce-color-bg-rgb: var(--color-yellow-rgb);
        --ce-color-fg: var(--color-darkpurple);
        --ce-color-interactive-rgb: var(--color-darkpurple-rgb);
        --ce-color-interactive: var(--color-darkpurple);
        --ce-color-tag-bg: var(--color-darkpurple);
        --ce-color-tag-fg: var(--color-offwhite);
        --ce-color-cta-bg: var(--color-offwhite);
        --ce-color-cta-fg: var(--color-darkpurple);
        --ce-color-cta-hover-bg: var(--color-red);
        --ce-color-cta-hover-fg: var(--color-offwhite);

        --ce-color-card-bg: var(--color-offwhite);
        --ce-color-card-bg-card-bg: var(--color-white);
        --ce-color-card-fg: var(--color-darkpurple);
        --ce-color-card-interactive-rgb: var(--color-red-rgb);
        --ce-color-card-interactive: var(--color-red);
        --ce-color-card-cta-bg: var(--color-red);
        --ce-color-card-cta-fg: var(--color-offwhite);
        --ce-color-card-cta-hover-bg: var(--color-darkpurple);
        --ce-color-card-cta-hover-fg: var(--color-offwhite);
    }

    .ce-theme-yellow  {
        --ce-inherited-color-bg: var(--color-yellow);
    }

    .ce-theme-dark-purple ,
    .base-theme-dark-purple ,
    [class*="ce-theme"] .override-theme.ce-theme-dark-purple {
        --ce-color-bg: var(--color-darkpurple);
        --ce-color-bg-rgb: var(--color-darkpurple-rgb);
        --ce-color-fg: var(--color-offwhite);
        --ce-color-interactive-rgb: var(--color-offwhite-rgb);
        --ce-color-interactive: var(--color-offwhite);
        --ce-color-tag-bg: var(--color-offwhite);
        --ce-color-tag-fg: var(--color-darkpurple);
        --ce-color-cta-bg: var(--color-yellow);
        --ce-color-cta-fg: var(--color-darkpurple);
        --ce-color-cta-hover-bg: var(--color-offwhite);
        --ce-color-cta-hover-fg: var(--color-yellow);

        --ce-color-card-bg: var(--color-offwhite);
        --ce-color-card-bg-card-bg: var(--color-white);
        --ce-color-card-fg: var(--color-darkpurple);
        --ce-color-card-interactive-rgb: var(--color-red-rgb);
        --ce-color-card-interactive: var(--color-red);
        --ce-color-card-cta-bg: var(--color-red);
        --ce-color-card-cta-fg: var(--color-offwhite);
        --ce-color-card-cta-hover-bg: var(--color-darkpurple);
        --ce-color-card-cta-hover-fg: var(--color-offwhite);
    }

    .ce-theme-dark-purple {
        --ce-inherited-color-bg: var(--color-darkpurple);
    }

    .ce-theme-green ,
    .base-theme-green ,
    [class*="ce-theme"] .override-theme.ce-theme-green {
        --ce-color-bg: var(--color-green);
        --ce-color-bg-rgb: var(--color-green-rgb);
        --ce-color-fg: var(--color-offwhite);
        --ce-color-interactive-rgb: var(--color-offwhite-rgb);
        --ce-color-interactive: var(--color-offwhite);
        --ce-color-tag-bg: var(--color-offwhite);
        --ce-color-tag-fg: var(--color-darkpurple);
        --ce-color-cta-bg: var(--color-yellow);
        --ce-color-cta-fg: var(--color-darkpurple);
        --ce-color-cta-hover-bg: var(--color-offwhite);
        --ce-color-cta-hover-fg: var(--color-yellow);

        --ce-color-card-bg: var(--color-offwhite);
        --ce-color-card-bg-card-bg: var(--color-white);
        --ce-color-card-fg: var(--color-darkpurple);
        --ce-color-card-interactive-rgb: var(--color-red-rgb);
        --ce-color-card-interactive: var(--color-red);
        --ce-color-card-cta-bg: var(--color-red);
        --ce-color-card-cta-fg: var(--color-offwhite);
        --ce-color-card-cta-hover-bg: var(--color-darkpurple);
        --ce-color-card-cta-hover-fg: var(--color-offwhite);
    }

    .ce-theme-green {
        --ce-inherited-color-bg: var(--color-green);
    }

    .ce-theme-red ,
    .base-theme-red ,
    [class*="ce-theme"] .override-theme.ce-theme-red {
        --ce-color-bg: var(--color-red);
        --ce-color-bg-rgb: var(--color-red-rgb);
        --ce-color-fg: var(--color-offwhite);
        --ce-color-interactive-rgb: var(--color-offwhite-rgb);
        --ce-color-interactive: var(--color-offwhite);
        --ce-color-tag-bg: var(--color-offwhite);
        --ce-color-tag-fg: var(--color-darkpurple);
        --ce-color-cta-bg: var(--color-yellow);
        --ce-color-cta-fg: var(--color-darkpurple);
        --ce-color-cta-hover-bg: var(--color-offwhite);
        --ce-color-cta-hover-fg: var(--color-yellow);

        --ce-color-card-bg: var(--color-offwhite);
        --ce-color-card-bg-card-bg: var(--color-white);
        --ce-color-card-fg: var(--color-darkpurple);
        --ce-color-card-interactive-rgb: var(--color-red-rgb);
        --ce-color-card-interactive: var(--color-red);
        --ce-color-card-cta-bg: var(--color-red);
        --ce-color-card-cta-fg: var(--color-offwhite);
        --ce-color-card-cta-hover-bg: var(--color-darkpurple);
        --ce-color-card-cta-hover-fg: var(--color-offwhite);
    }

    .ce-theme-red {
        --ce-inherited-color-bg: var(--color-red);
    }

    [class*="ce-theme"] .override-theme[class*="ce-theme"] {
        --ce-inherited-color-bg: inherit;
    }

}

/* ################
##### Footer ######
################ */
@media all {
    .page-footer {
        /*! --ce-color-fg: var(--color-white); */
        /*! --ce-color-link: var(--ce-color-fg); */
    }
}