@import url('./utilities/normalize.css');
@import url('./utilities/container.css');
@import url('./utilities/header-layout.css');
@import url('./utilities/container-colors.css');
@import url('./utilities/fluid_styled_content.css');
@import url('./utilities/spline-slider.css');
@import url('./utilities/base.css');
@import url('./utilities/cookie-consent.css');
@import url('./layout/menu.css');
@import url('./layout/header.css');
@import url('./layout/footer.css');
@import url('./layout/search.css');
@import url('./layout/banner.css');
@import url('./layout/quicklinks.css');
@import url('./elements/accordion.css');
@import url('./elements/gallery.css');
@import url('./elements/quote.css');
@import url('./elements/forms.css');
@import url('./elements/table.css');
@import url('./elements/infobox.css');
@import url('./elements/news-list.css');
@import url('./elements/bullets.css');
@import url('./elements/uploads.css');
@import url('./elements/textmedia.css');
@import url('./elements/category-teaser.css');
@import url('./elements/page-teaser.css');
@import url('./elements/splide.css');
@import url('./elements/news-footer.css');
@import url('./elements/link-list.css');
@import url('./elements/404.css');
@import url('./elements/news.css');
@import url('./elements/events.css');
@import url('./elements/contact.css');
/* ROOTS */

html {
    scroll-behavior: smooth;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: var(--primary-font-family), Arial, Helvetica, sans-serif;
    color: var(--color-secondary);
}

:root {
    --color-secondary-h: 0;
    --color-secondary-s: 0%;
    --color-secondary-l: 20%;

    --primaryLightnessChange: 10%;

    --color-primary-80-l: calc(
        var(--color-primary-1-l) + var(--primaryLightnessChange)
    );
    --color-primary-60-l: calc(
        var(--color-primary-1-l) + 2 * var(--primaryLightnessChange)
    );
    --color-primary-40-l: calc(
        var(--color-primary-1-l) + 3 * var(--primaryLightnessChange)
    );
    --color-primary-20-l: calc(
        var(--color-primary-1-l) + 4 * var(--primaryLightnessChange)
    );
    --color-primary-10-l: calc(
        var(--color-primary-1-l) + 4 * var(--primaryLightnessChange) + 5%
    );
    --color-primary-1: hsl(
        var(--color-primary-1-h),
        var(--color-primary-1-s),
        var(--color-primary-1-l)
    );
    --color-primary-2: hsl(
        var(--color-primary-2-h),
        var(--color-primary-2-s),
        var(--color-primary-2-l)
    );
    --color-primary-80: hsl(
        var(--color-primary-1-h),
        var(--color-primary-1-s),
        var(--color-primary-80-l)
    );
    --color-primary-60: hsl(
        var(--color-primary-1-h),
        var(--color-primary-1-s),
        var(--color-primary-60-l)
    );
    --color-primary-40: hsl(
        var(--color-primary-1-h),
        var(--color-primary-1-s),
        var(--color-primary-80-l)
    );
    --color-primary-20: hsl(
        var(--color-primary-1-h),
        var(--color-primary-1-s),
        var(--color-primary-20-l)
    );
    --color-primary-10: hsl(
        var(--color-primary-1-h),
        var(--color-primary-1-s),
        var(--color-primary-10-l)
    );

    --secondaryLightnessChange: 16%;

    --color-secondary-80-l: calc(
        var(--color-secondary-l) + var(--secondaryLightnessChange)
    );
    --color-secondary-60-l: calc(
        var(--color-secondary-l) + 2 * var(--secondaryLightnessChange)
    );
    --color-secondary-40-l: calc(
        var(--color-secondary-l) + 3 * var(--secondaryLightnessChange)
    );
    --color-secondary-20-l: calc(
        var(--color-secondary-l) + 4 * var(--secondaryLightnessChange)
    );
    --color-secondary-15-l: calc(
        var(--color-secondary-l) + 4 * var(--secondaryLightnessChange) - 2%
    );
    --color-secondary-10-l: calc(
        var(--color-secondary-l) + 5 * var(--secondaryLightnessChange) - 8%
    );

    --color-secondary: hsl(
        var(--color-secondary-h),
        var(--color-secondary-s),
        var(--color-secondary-l)
    );
    --color-secondary-80: hsl(
        var(--color-secondary-h),
        var(--color-secondary-s),
        var(--color-secondary-80-l)
    );
    --color-secondary-60: hsl(
        var(--color-secondary-h),
        var(--color-secondary-s),
        var(--color-secondary-60-l)
    );
    --color-secondary-40: hsl(
        var(--color-secondary-h),
        var(--color-secondary-s),
        var(--color-secondary-40-l)
    );
    --color-secondary-20: hsl(
        var(--color-secondary-h),
        var(--color-secondary-s),
        var(--color-secondary-20-l)
    );
    --color-secondary-15: hsl(
        var(--color-secondary-h),
        var(--color-secondary-s),
        var(--color-secondary-15-l)
    );
    --color-secondary-10: hsl(
        var(--color-secondary-h),
        var(--color-secondary-s),
        var(--color-secondary-10-l)
    );
    --color-white: #fff;
    --color-dark-gray: #5c5c5c;

    --font-size-45: 2.8rem;
    --font-size-40: 2.5rem;
    --font-size-32: 2rem;
    --font-size-28: 1.75rem;
    --font-size-24: 1.5rem;
    --font-size-20: 1.25rem;
    --font-size-18: 1.125rem;
    --font-size-16: 1rem;
    --font-size-14: 0.87rem;
    --font-size-12: 0.75rem;
    --font-size-10: 0.625rem;

    --line-height-56: 1.1;
    --line-height-32: 1.3;
    --line-height-30: 1.25;
    --line-height-24: 1.5;
    --line-height-16: 1.5;

    --primary-font-family: 'Roboto', sans-serif;
    --secondary-font-family: 'Roboto Condensed', sans-serif;

    --gap: 25px;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local(''),
        url('../Fonts/roboto-v30-latin-regular.woff2') format('woff2');
}

/* roboto-italic - latin */
@font-face {
    font-family: 'Roboto';
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src: local(''),
        url('../Fonts/roboto-v30-latin-italic.woff2') format('woff2');
}

/* roboto-500 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 500;
    src: local(''), url('../Fonts/roboto-v30-latin-500.woff2') format('woff2');
}

/* roboto-700 - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local(''), url('../Fonts/roboto-v30-latin-700.woff2') format('woff2');
}

/* roboto-condensed-regular - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src: local(''),
        url('../Fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2');
}

/* roboto-condensed-bold - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src: local(''),
        url('../Fonts/roboto-condensed-v25-latin-700.woff2') format('woff2');
}