:root {
    --clr-light: hsl(269 96% 98%); /* light */
    --clr-pink: hsl(311 96% 92%); /* pink */
    --clr-light-pink: hsla(303 100% 33.7% / 0.85);
    --clr-yellow: hsl(56 85% 50%); /* yellow */
    --clr-dark: hsl(187 6% 42%); /* dark */
    --clr-black: hsl(327 49% 0%); /* black */
    --clr-white: hsl(196 100% 100%); /* white */
    --clr-violet: #660066; /* violet */

    --clr-light-blue: hsla(207 100% 75.1% / 0.77);
    --clr-light-border: hsla(329 96% 95% / 0.8);
    --clr-yellow-border: hsla(56 77% 45% / 0.8);
    --clr-dark-border: hsla(67 6% 66% / 0.8);

    --clr-cultureselector-text: white;

    /* sizes */


    --body-container-max-width: 1200px;
    /*--bg-all-content: transparent;*/
    --bg-all-content: var(--clr-violet);
    /*--bg-body-container: transparent;  */
    --bg-body-container: whitesmoke;
    /*--navigationContainer-bg: transparent;*/
    --navigationContainer-bg: hsla(179 100% 100% / 0.70);
    --navigationContainer-bg-animation: hsla(217 56.9% 13% / 0.10);
    /*
        --navigationContainer-bg-animation: red;*/
    --navigationContainer-min-height: 80px;
    /*--navigationContext-bg: transparent;*/ /* whitesmoke; */


    --bg-ribbon: #3f7670;
    /*--bg-glass-menu: lightgreen;*/
    --navbar-font-size: 1.5rem;
    --spike-color: var(--bg-all-content);
    --spike-width: 70px;
    --spike-height: 15px;
    --border-radius-default: 14px;
    --default-text-rotate: -1.4deg;
    --transparent-overlay: hsla(187 100% 97.6% / 0.73);
    --menu-link-color-default: green;
    /*--menu-link-color-active: red;*/
    --menu-link-color-underline: hsla(244 92.8% 22.9% / 0.87);
    --menu-link-underline-padding: 0;
    --toggle-icon-color: lightgray;
    --logo-img-bg: var(--clr-white);
    --body-bg: var(--clr-pink);
    --body-text: var(--clr-black);
    --logo-img-bg: var(--clr-white);
    --sidemenu-bg: var(--clr-violet);
    --sidemenu-text: var(--clr-light);
    --section-bg: var(--clr-yellow);
    --section-text: var(--clr-dark);
    --section-headlinetext: var(--clr-violet);
    --section-infotext: var(--clr-violet);
    --section-contentborder: var(--clr-light-border);
    --section-button-text: var(--clr-white);
    --card-bg: var(--clr-pink);
    --card-bg-hover: var(--clr-white);
    --card-headlinetext: var(--clr-violet);
    --card-headlinetext-hover: var(--clr-violet);
    --card-infotext: var(--clr-black);
    --card-infotext-hover: var(--clr-black);
    --btn-bg: #FFFFFF;
    --btn-text: #FFFFFF;
    --clr-btn-text: var(--clr-white);
    --clr-btn-bg: var(--clr-white);
    --clr-btn-text-hover: var(--clr-white);
    --clr-btn-bg-hover: var(--clr-white);
}


figure {
    border-radius: var( --border-radius-default);
    padding: 0px;
    margin: auto;
}

figcaption {
    border-radius: var( --border-radius-default);
    color: black;
    font-style: italic;
    font-size: 0.8rem;
    padding: 2px;
    text-align: center;
}