:root {

    --page-max-width: 1000px;
    --page-max-inner-width: 960px;

    --padding-small: 20px;
    --padding-medium: 40px;
    --padding-large: 60px;

    --page-grid-gap: 2em;

    --border-radius: 8px;

    --page-background: #4185eeff;
    --font-main: "PT Sans Narrow", sans-serif;

    --color-text: #3a3a3a;
    --color-text-imagecaption: #646464;
    --color-heading: var(--color-green-darkest);
    --color-text-alternate: #e6e6e6;

    --color-text-menu: #ffffff;
    --color-white: #fefefeff;
    --color-white-faded: #fefefe73;
    --color-white-transparent: rgba(255, 255, 255, 0.329);

    --color-grey-darkest: hsl(0, 0%, 40%);
    --color-grey-darker: hsl(0, 0%, 50%);
    --color-grey-dark: hsl(0, 0%, 60%);
    --color-grey: hsl(0, 0%, 70%);
    --color-grey-light: hsl(0, 0%, 90%);
    --color-grey-lighter: hsl(0, 0%, 95%);
    --color-grey-faded: hsla(0, 0%, 95%, 0.5);

    --color-green-darkest: hsl(66, 60%, 28%);
    --color-green-darker: hsl(66, 60%, 38%);
    --color-green-dark: hsl(66, 60%, 48%);
    --color-green: hsl(66, 60%, 58%);
    --color-green-light: hsl(66, 60%, 68%);
    --color-green-lighter: hsl(66, 60%, 78%);
    --color-green-faded: hsla(66, 60%, 78%, 0.5);

    --color-blue-darker: hsl(223, 84%, 39%);
    --color-blue-dark: hsl(223, 84%, 49%);
    --color-blue: #3f70ee;
    --color-blue-light: hsl(223, 84%, 69%);
    --color-blue-lighter: hsl(223, 84%, 79%);
    --color-form-field: hsl(223, 78%, 86%);
    --color-blue-faded: hsla(223, 83%, 79%, 0.5);

    --color-gold-darker: #7a6000;
    --color-gold-dark: #ad8800;
    --color-gold: hsl(47, 100%, 44%);
    --color-gold-light: hsl(47, 100%, 54%);
    --color-gold-lighter: hsl(47, 100%, 64%);
    --color-gold-faded: hsla(47, 100%, 64%, 0.5);

    --color-eco-green-darker: #4c5e26;
    --color-eco-green-dark: #698235;
    --color-eco-green: hsl(80, 42%, 46%);
    --color-eco-green-light: hsl(80, 42%, 56%);
    --color-eco-green-lighter: hsl(80, 42%, 66);
    --color-eco-green-faded: hsla(80, 42%, 66%, 0.5);

    --color-forest-green-darker: hsl(100, 41%, 07%);
    --color-forest-green-dark: hsl(100, 41%, 17%);
    --color-forest-green: hsl(100, 41%, 27%);
    --color-forest-green-light: hsl(100, 41%, 37%);
    --color-forest-green-lighter: hsl(100, 41%, 47%);
    --color-forest-green-faded: hsla(100, 41%, 47%, 0.5);

    --color-red: hsl(359, 79%, 51%);
    --color-red-dark: hsl(359, 79%, 41%);
    --color-red-light: hsl(359, 79%, 61%);
    --color-red-faded: hsla(359, 79%, 51%, 0.5);

    --input-border-color: var(--color-blue-dark);
    --focus-color: var(--color-red);
    --select-arrow-color: var(--input-border-color);

    --font-size-xxsmall: .5rem;
    --font-size-xsmall: .75rem;
    --font-size-small: 1.13rem;
    --font-size-nav: 1.25rem;
    --font-size-default: 1.25rem;
    --font-size-normal: 1.5rem;
    --font-size-large: 1.75rem;
    --font-size-xlarge: 2rem;
    --font-size-xxlarge: 2.25rem;

    --h1-size: 5rem;
    --h2-size: 3rem;
    --h3-size: 2rem;
    --h4-size: 1.75rem;
    --h5-size: 1.5rem;

    --icon-size-xxsmall: 12px;
    --icon-size-xsmall: 16px;
    --icon-size-small: 18px;
    --icon-size-default: 22px;
    --icon-size-large: 28px;
    --icon-size-xlarge: 32px;
    --icon-size-xxlarge: 36px;

    box-sizing: border-box;

}

body,
html {
    background-color: var(--page-background);
    font-family: var(--font-main);
    margin: 0;
    color: var(--color-text);
}

.color {

    &.blue {
        --background-color: var(--color-blue);
        --text-color: var(--color-white);
    }

    &.blue-l {
        --background-color: var(--color-blue-light);
        --text-color: hsl(0 0 100);
    }

    &.blue-d {
        --background-color: var(--color-blue-dark);
        --text-color: hsl(0 0 100);
    }

    &.forest {
        --background-color: var(--color-forest-green);
        --text-color: var(--color-white);
    }

    &.forest-l {
        --background-color: var(--color-forest-green-light);
        --text-color: hsl(0 0 100);
    }

    &.forest-d {
        --background-color: var(--color-forest-green-dark);
        --text-color: hsl(0 0 100);
    }

    &.gold {
        --background-color: var(--color-gold);
        --text-color: var(--color-white);
    }

    &.gold-l {
        --background-color: var(--color-gold-light);
        --text-color: hsl(0 0 100);
    }

    &.gold-d {
        --background-color: var(--color-gold-dark);
        --text-color: hsl(0 0 100);
    }
}

page-section {

    --padding: 0;
    --background-color: #ffffff;
    --text-color: var(--color-text);

    box-sizing: border-box;
    position: relative;

    width: 100%;

    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;

    padding: var(--padding) 0;

    color: var(--text-color);
    background-color: var(--background-color);

    align-items: center;

    &.no-color {
        --background-color: transparent;
        --text-color: var(--color-white);
    }

    &.padding-small {
        --padding: 20px;
    }

    &.padding-medium {
        --padding: 40px;
    }

    &.padding-large {
        --padding: 60px;
    }

}

page-section.splitted,
page-card.columns {

    display: grid;
    justify-content: center;
    align-items: flex-start;

    --grid-gap-halved: calc(var(--page-grid-gap) / 2);
    --section-width: calc((var(--page-max-inner-width) / 2) - (var(--grid-gap-halved)));

}

page-section.splitted {

    &.ratio-50-50 {
        grid-template-columns:
            1fr minmax(20px, var(--section-width)) var(--page-grid-gap) minmax(20px, var(--section-width)) 1fr;
    }

    &.ratio-60-40 {
        --section-width: calc((var(--page-max-inner-width) * 0.6) - (var(--grid-gap-halved)));
        --section-width-2: calc((var(--page-max-inner-width) * 0.4) - (var(--grid-gap-halved)));
        grid-template-columns:
            1fr minmax(20px, var(--section-width)) var(--page-grid-gap) minmax(20px, var(--section-width-2)) 1fr;
    }

    &.ratio-70-30 {
        --section-width: calc((var(--page-max-inner-width) * 0.7) - (var(--grid-gap-halved)));
        --section-width-2: calc((var(--page-max-inner-width) * 0.3) - (var(--grid-gap-halved)));
        grid-template-columns:
            1fr minmax(20px, var(--section-width)) var(--page-grid-gap) minmax(20px, var(--section-width-2)) 1fr;
    }

    &>*:first-child {
        margin-top: unset;
        grid-column: 2;
    }

    &>*:last-child {
        grid-column: 4;
    }

    section-part {
        display: flex;
        box-sizing: border-box;
        min-height: 50px;
        height: 100%;
        flex-direction: column;
    }
}

page-card.columns{
    grid-template-columns:
        minmax(20px, .3fr) 20px minmax(20px, .7fr);

    &>*:first-child {
        margin-top: unset;
        grid-column: 1;
    }

    &>*:last-child {
        grid-column: 3;
    }
}

page-card {

    font-size: var(--font-size-normal);
    box-sizing: border-box;
    width: 100%;

    max-width: var(--page-max-inner-width);

    display: flex;
    flex-direction: column;

    /* color: var(--color-text); */
    margin: 0;

    overflow: hidden;

    &.justify-left {
        text-align: left;
    }

    &.justify-center {
        text-align: center;
    }

    &.justify-right {
        text-align: right;
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        color: inherit;
    }

    p {

        margin-bottom: 0;

        &.align-center {
            text-align: center;
        }

        &.align-right {
            text-align: right;
        }

        span {
            &.bold {
                font-weight: bold;
            }

            &.italic {
                font-style: italic;
            }

            &.underline {
                text-decoration: underline;
            }

            &:empty {
                display: block;
                /* min-height: 20px; */
                margin-bottom: 1rem;
            }
        }
    }

    &.heading-1,
    &.heading-2,
    &.heading-3,
    &.heading-4,
    &.heading-5 {
        --color-text: var(--color-heading);
    }

    &.heading-1 h1 {
        text-align: center;
        font-size: var(--h1-size);
        margin: 0;
        padding: 0rem 0rem 0.7rem;
    }

    &.heading-2 h2 {
        text-align: center;
        font-size: var(--h2-size);
    }

    &.heading-3 h3 {
        font-size: var(--h3-size);
        margin: 0rem 0 0.5rem;
    }

    &.heading-4 h4 {
        font-size: var(--h4-size);
        margin: 0rem 0 .5rem;
    }

    &.heading-5 h5 {
        font-size: var(--h5-size);
        margin: 0rem 0 0.1rem;
        font-weight: bold;
    }

    &.padding-top-small {
        padding-top: var(--padding-small);
    }

    &.padding-top-medium {
        padding-top: var(--padding-medium);
    }

    &.padding-top-large {
        padding-top: var(--padding-large);
    }

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

    &.padding-bottom-medium {
        padding-bottom: var(--padding-medium);
    }

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

}

page-card img {
    --max-width: 100%;
    align-self: center;
    max-width: var(--max-width);
    height: auto;
}

page-card image-caption {
    margin-top: .5rem;
    font-size: var(--font-size-small);
    font-style: italic;
    text-align: center;
    color: var(--color-text-imagecaption);
}

asset-link {

    display: grid;
    grid-template-columns: 0fr 1fr;
    gap: 0.5rem;

    font-size: var(--font-size-normal);
    color: var(--color-blue-darker);
    cursor: pointer;

    width: fit-content;

    &:hover {
        color: var(--color-blue);
        text-decoration: underline;
    }

    sc-icon {

        fill: var(--color-blue-dark);

    }

}

sc-icon {
    aspect-ratio: 1/1;
}

sc-icon.hidden {
    display: none;
}

button {

    sc-icon:not(.hidden) {
        /* margin-right: .5em; */
        fill: var(--color-white);
    }
}

page-section.no-color asset-link,
page-section.color asset-link {
    color: var(--color-white);

    &:hover {
        color: var(--color-white);
    }

    sc-icon {
        fill: var(--color-grey-lighter);
    }
}