:root {
    --font-regular: "FHOscar-Regular";
    --font-semibold: "FHOscar-SemiBold";
    --font-bold: "FHOscar-Black";

    --font-greek-regular: "IBMPlexSans-Regular";
    --font-greek-semibold: "IBMPlexSans-SemiBold";

    --color-primary: #364a1e;  /*original 464a1e*/
    --color-secondary: #83a823;
    --color-brown: #876741;
    --color-light-brown: #fec280;
    --color-light-blue: #e0f3fd;
    --color-black: #101010;
    --color-white: #dee1e2;
    --color-gray-1: #bcc5c8;
    --color-gray-2: #969696;

    --radius-lg: 45rem;
    --radius-md: 40rem;
    --radius-sm: 30rem;
    --radius-sm2: 35rem;
    --radius-xsm: 20rem;
    --radius-xsm2: 25rem;
    --radius-xxsm: 15rem;

    --header-height: 110rem;
    --logo-width: 197rem;
    --side-gap: 20rem;
    --context: 1920;

    --fs-title-xlg: 120rem;
    --lh-title-xlg: 124rem;
    --fs-title-lg: 60rem;
    --lh-title-lg: 68rem;
    --fs-title-md: 44rem;
    --lh-title-md: 52rem;
    --fs-title-rg: 28rem;
    --lh-title-rg: 36rem;
    --fs-title-xsm: 20rem;
    --lh-title-xsm: 28rem;
    --fs-title-xxsm: 16rem;
    --lh-title-xxsm: 26rem;

    --fs-body-md: 20rem;
    /* --lh-body-md: 28rem; */
}

@media (max-width: 1500px) {
    :root {
        --context: 1920;
    }
}

@media (max-width: 1375px) {
    :root {
        --context: 1750;
    }
}

@media (max-width: 1180px) {
    :root {
        --context: 1450;
    }
}

@media (max-width: 834px) {
    :root {
        --header-height: 70rem;
        --logo-width: 130rem;
        --radius-lg: 35rem;
        --radius-sm2: 25rem;
        --context: 834;
        --fs-body-md: 16rem;
        /* --lh-body-md: 24rem; */
        --fs-title-xlg: 60rem;
        --lh-title-xlg: 62rem;
        --fs-title-lg: 40rem;
        --lh-title-lg: 48rem;
        --fs-title-md: 32rem;
        --lh-title-md: 40rem;
        --fs-title-rg: 20rem;
        --lh-title-rg: 28rem;
        --fs-title-xsm: 16rem;
        --lh-title-xsm: 24rem;
        --fs-title-xxsm: 14rem;
        --lh-title-xxsm: 22rem;
    }
}

/* @media (max-width: 768px) {
    :root {
        --context: 768;
    }
} */

@media (max-width: 933px) and (max-height: 433px) {
    :root {
        --context: 950;
        --header-height: 70rem;
        --logo-width: 130rem;
        --radius-lg: 35rem;
        --radius-sm2: 25rem;
        --fs-body-md: 16rem;
        /* --lh-body-md: 24rem; */
        --fs-title-xlg: 60rem;
        --lh-title-xlg: 62rem;
        --fs-title-lg: 40rem;
        --lh-title-lg: 48rem;
        --fs-title-md: 32rem;
        --lh-title-md: 40rem;
        --fs-title-rg: 20rem;
        --lh-title-rg: 28rem;
        --fs-title-xsm: 16rem;
        --lh-title-xsm: 24rem;
        --fs-title-xxsm: 14rem;
        --lh-title-xxsm: 22rem;
    }
}

@media (max-width: 500px) {
    :root {
        --header-height: 70rem;
        --logo-width: 130rem;
        --radius-lg: 25rem;
        --radius-sm: 20rem;
        --radius-sm2: 25rem;
        --radius-sm2: 20rem;
        --context: 390;
        --fs-title-xlg: 44rem;
        --lh-title-xlg: 50rem;
        --fs-title-lg: 32rem;
        --lh-title-lg: 36rem;
        --fs-title-md: 26rem;
        --lh-title-md: 32rem;
        --fs-title-rg: 18rem;
        --lh-title-rg: 24rem;
        --fs-title-xsm: 16rem;
        --lh-title-xsm: 22rem;
    }
}

@media (max-width: 800px) and (max-height: 433px) {
    :root {
        --context: 850;
    }
}

@font-face {
    font-family: "FHOscar-Black";
    src: url(../fonts/FHOscar-Black.woff) format("woff");
    font-style: normal;
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "FHOscar-Regular";
    src: url(../fonts/FHOscar-Regular.woff) format("woff");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "FHOscar-SemiBold";
    src: url(../fonts/FHOscar-SemiBold.woff) format("woff");
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "IBMPlexSans-Regular";
    src: url("../fonts/IBMPlexSans-Regular.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0384-03CE;
}

@font-face {
    font-family: "IBMPlexSans-SemiBold";
    src: url("../fonts/IBMPlexSans-SemiBold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0384-03CE;
}

* {
    margin: 0;
    padding: 0;
    font-family: var(--font-regular), var(--font-greek-regular), sans-serif;
    text-rendering: optimizeLegibility;
}

html {
    scroll-behavior: smooth;
    line-height: 1;
    font-size: min(calc(100vw / var(--context)), 1px);
}

body {
    font-size: var(--fs-body-md);
    line-height: 1.618; /* golden ratio */
    letter-spacing: 1px;
    font-weight: 500;
    font-feature-settings: "kern" 1;
    font-kerning: normal;
    color: var(--color-black);
}

b {
    font-weight: normal;
    font-family: var(--font-semibold), var(--font-greek-semibold), sans-serif;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

/* extra small */
@media only screen and (max-width: 339px) and (min-width: 0) {
    * {
        display: none;
    }
}