@font-face {
    font-family: 'ManropeLight'; /* Regular 300 */
    src: url('/styles/fonts/Manrope/Manrope-Light.ttf');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'ManropeRegular'; /* Regular 400 */
    src: url('/styles/fonts/Manrope/Manrope-Regular.ttf');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'ManropeMedium'; /* Medium 500 */
    src: url('/styles/fonts/Manrope/Manrope-Medium.ttf');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'ManropeSemiBold'; /* Semi-bold 600 */
    src: url('/styles/fonts/Manrope/Manrope-SemiBold.ttf');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'ManropeBold'; /*  Bold 700  */
    src: url('/styles/fonts/Manrope/Manrope-Bold.ttf');
    font-style: normal;
    font-weight: normal;
}
@font-face {
    font-family: 'ManropeExtraBold'; /*  Bold 800  */
    src: url('/styles/fonts/Manrope/Manrope-ExtraBold.ttf');
    font-style: normal;
    font-weight: normal;
}


:root {
    --color-background: #ffffff;
    --text-color-main: #000000;
    --text-color-main-rgb: 0, 0, 0;

    --font-family-xsm: 'ManropeLight';
    --font-family-sm: 'ManropeRegular';
    --font-family-md: 'ManropeMedium';
    --font-family-lg: 'ManropeSemiBold';
    --font-family-xl: 'ManropeBold';
    --font-family-2xl: 'ManropeExtraBold';

    --font-size-xsm: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 2rem;
    --font-size-4xl: 3rem;

    --line-height-xsm: 1;
    --line-height-sm: 1.15;
    --line-height-md: 1.25;
    --line-height-lg: 1.5;

    --page-max-width: 2300px;
    --top-menu-height: 4rem;
    --info-line-height: 3rem;
    --header-height: 4rem;
}

[data-theme="1"] {
    --color-main: #424242;
    --color-main-rgb: 66, 66, 66;
    --color-background: #424242;
}

[data-theme="2"] {
    --color-main: #B7C4FD;
    --color-main-rgb: 183, 196, 253;
    --color-background: #F4F7FE;
}

[data-theme="3"] {
    --color-main: #FFA858;
    --color-main-rgb: 255, 168, 88;
    --color-background: #FFA858;
}

@media only screen and (max-width: 767px) {
    :root {
    }
}