@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: normal;
    font-weight: 200;
    src: url(../fonts/groenehart/nunito-200.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: italic;
    font-weight: 200;
    src: url(../fonts/groenehart/nunito-200italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/groenehart/nunito-300.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: italic;
    font-weight: 300;
    src: url(../fonts/groenehart/nunito-300italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/groenehart/nunito-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/groenehart/nunito-italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/groenehart/nunito-600.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/groenehart/nunito-600italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/groenehart/nunito-700.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/groenehart/nunito-700italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: normal;
    font-weight: 800;
    src: url(../fonts/groenehart/nunito-800.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: italic;
    font-weight: 800;
    src: url(../fonts/groenehart/nunito-800italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: normal;
    font-weight: 900;
    src: url(../fonts/groenehart/nunito-900.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: Nunito;
    font-style: italic;
    font-weight: 900;
    src: url(../fonts/groenehart/nunito-900italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/groenehart/noto-sans-regular.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 400;
    src: url(../fonts/groenehart/noto-sans-italic.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans";
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/groenehart/noto-sans-700.woff2) format("woff2")
}

@font-face {
    font-display: swap;
    font-family: "Noto Sans";
    font-style: italic;
    font-weight: 700;
    src: url(../fonts/groenehart/noto-sans-700italic.woff2) format("woff2")
}

:root {
    --base-fontface-title: Nunito, serif;
    --base-fontface-body: Noto Sans, sans-serif;
    --base-fontface-button: Noto Sans, sans-serif;

    --base-color-canvas: #F5F5F5;
    --base-color-on-canvas-title: #064439;

    --base-color-on-surface-title: #064439;

    --base-color-inverse: #FFFFFF;
    --base-color-on-inverse: #333333;
    --base-color-on-inverse-muted: #333333;
    --base-color-on-inverse-title: #333333;

    --base-color-link: #C95100;
    --base-color-link-hover: #C95100;
    --base-color-link-active: #C95100;
    --base-color-link-visited: #C95100;

    --base-link-decoration: underline;

    --base-color-brand-primary: #064439;
    --base-color-brand-primary-hover: #021512;
    --base-color-brand-primary-active: #021512;
    --base-color-brand-primary-border: #042D25;
    --base-color-brand-primary-border-hover: #000000;
    --base-color-on-brand-primary: #FFFFFF;
    --base-color-on-brand-primary-hover: #FFFFFF;

    --base-color-brand-secondary: #C95100;
    --base-color-brand-secondary-hover: #963C00;
    --base-color-brand-secondary-active: #963C00;
    --base-color-brand-secondary-border: #B04700;
    --base-color-brand-secondary-border-hover: #722E00;
    --base-color-on-brand-secondary: #FFFFFF;
    --base-color-on-brand-secondary-hover: #FFFFFF;

    --base-color-brand-outline: transparent;
    --base-color-brand-outline-hover: #064439;
    --base-color-brand-outline-active: #021512;
    --base-color-brand-outline-border: #064439;
    --base-color-brand-outline-border-hover: #064439;
    --base-color-on-brand-outline: #064439;
    --base-color-on-brand-outline-hover: #FFFFFF;

    --base-color-graph: #064439;

    --base-color-on-loan-part-1: #ffffff;
    --base-color-on-loan-part-2: #ffffff;

    --base-radius-surface: 0.9375rem;
}