@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

:root {
    --green: #248B45;

    --black: #050505;
    --black-rgb: 5, 5, 5;
    --gray-1000: #1E1E1F;
    --gray-900: #323334;
    --gray-800: #4B4C4F;
    --gray-700: #646568;
    --gray-600: #7D7F83;
    --gray-500: #97989B;
    --gray-400: #B1B2B5;
    --gray-300: #CBCCCD;
    --gray-200: #E5E6E7;
    --gray-100: #F4F5F5;
    --gray-50: #fafafa;
    --white: #ffffff;
    --white-rgb: 255, 255, 255;

    --scaleFactor: 1;
    /* Фонтын хэмжээг хянах үндсэн коэффициент */

    --h1: calc(96px * var(--scaleFactor));
    --h2: calc(64px * var(--scaleFactor));
    --h3: calc(56px * var(--scaleFactor));
    --h4: calc(48px * var(--scaleFactor));
    --h5: calc(32px * var(--scaleFactor));
    --h6: calc(24px * var(--scaleFactor));

    --subheading-1: calc(24px * var(--scaleFactor));
    --subheading-2: calc(20px * var(--scaleFactor));
    --subheading-3: calc(16px * var(--scaleFactor));
    --subheading-4: calc(14px * var(--scaleFactor));

    --paragraph-large: calc(18px * var(--scaleFactor));
    --paragraph-medium: calc(16px * var(--scaleFactor));
    --paragraph-small: calc(14px * var(--scaleFactor));
    --paragraph-xsmall: calc(12px * var(--scaleFactor));

    --caption-1: calc(16px * var(--scaleFactor));
    --caption-2: calc(14px * var(--scaleFactor));
    --caption-3: calc(12px * var(--scaleFactor));
    --caption-4: calc(10px * var(--scaleFactor));

    --sudheading-1: calc(48px * var(--scaleFactor));
    --sudheading-2: calc(32px * var(--scaleFactor));
    --sudheading-3: calc(24px * var(--scaleFactor));
    --sudheading-4: calc(20px * var(--scaleFactor));
    --sudheading-5: calc(16px * var(--scaleFactor));
    --sudheading-6: calc(14px * var(--scaleFactor));
    --sudheading-7: calc(12px * var(--scaleFactor));

    --main-font: "font";
}

.dark-mode {
    --black: #ececec;
    --white-rgb: 5, 5, 5;
    --black-rgb: 255, 255, 255;
    --white: #050505;
    --gray-50: #1E1E1F;
    --gray-100: #323334;
    --gray-200: #4B4C4F;
    --gray-300: #646568;
    --gray-1000: #fafafa;
}


@font-face {
    font-family: 'font';
    src: url('../fonts/TTHoves-Regular.woff2') format('woff2'),
        url('../fonts/TTHoves-Regular.woff') format('woff');
    /* src: url('../fonts/font.woff') format('woff2'); */
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'font';
    src: url('../fonts/TTHoves-Medium.woff2') format('woff2'),
        url('../fonts/TTHoves-Medium.woff') format('woff');
    font-weight: 500;
    font-style: medium;
}

@font-face {
    font-family: 'font';
    src: url('../fonts/TTHoves-DemiBold.woff2') format('woff2'),
        url('../fonts/TTHoves-DemiBold.woff') format('woff');
    font-weight: 600;
    font-style: demibold;
}

@font-face {
    font-family: 'font';
    src: url('../fonts/TTHoves-Bold.woff2') format('woff2'),
        url('../fonts/TTHoves-Bold.woff') format('woff');
    font-weight: 700;
    font-style: bold;
}

@font-face {
    font-family: 'font';
    src: url('../fonts/TTHoves-ExtraBold.woff2') format('woff2'),
        url('../fonts/TTHoves-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: extraBold;
}


* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    font-family: var(--main-font);
    margin: 0;
    background-color: var(--white);
    /* overflow-x: hidden; */
}

a {
    text-decoration: none;
}

h1 {
    font-family: var(--main-font);
    font-size: var(--h1);
    font-style: extraBold;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.32px;
    margin: 0;
    text-transform: uppercase;
}

h2 {
    font-family: var(--main-font);
    font-size: var(--h2);
    font-style: extraBold;
    font-weight: 800;
    line-height: 110%;
    letter-spacing: -0.32px;
    margin: 0;
    text-transform: uppercase;
}

h3 {
    font-family: var(--main-font);
    font-size: var(--h3);
    font-style: extraBold;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.32px;
    margin: 0;
    text-transform: uppercase;
}

h4 {
    font-family: var(--main-font);
    font-size: var(--h4);
    font-weight: extraBold;
    font-weight: 800;
    line-height: 100%;
    letter-spacing: -0.32px;
    margin: 0;
    text-transform: uppercase;
}

h5 {
    font-family: var(--main-font);
    font-size: var(--h5);
    font-style: extraBold;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -0.32px;
    margin: 0;
    text-transform: uppercase;
}

h6 {
    font-family: var(--main-font);
    font-size: var(--h6);
    font-style: normal;
    font-weight: 800;
    line-height: 120%;
    letter-spacing: -0.32px;
    margin: 0;
    text-transform: uppercase;
}

.subheading-1 {
    font-family: var(--main-font);
    font-size: var(--subheading-1);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.subheading-2 {
    font-family: var(--main-font);
    font-size: var(--subheading-2);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.subheading-3 {
    font-family: var(--main-font);
    font-size: var(--subheading-3);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.subheading-4 {
    font-family: var(--main-font);
    font-size: var(--subheading-4);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

p {
    font-size: var(--paragraph-medium);
    font-style: medium;
    font-weight: 500;
    line-height: 140%;
    margin: 0;
}

p b {
    font-weight: bold;
}

.paragraph-large {
    font-size: var(--paragraph-large);
    font-style: medium;
    font-weight: 500;
    line-height: 140%;
}

.paragraph-medium {
    font-size: var(--paragraph-medium);
    font-style: medium;
    font-weight: 500;
    line-height: 140%;
}

.paragraph-small {
    font-size: var(--paragraph-small);
    font-style: medium;
    font-weight: 500;
    line-height: 140%;
}

.paragraph-xsmall {
    font-size: var(--paragraph-xsmall);
    font-style: medium;
    font-weight: 500;
    line-height: 140%;
}

.caption-1 {
    font-family: var(--main-font);
    font-size: var(--caption-1);
    font-style: demibold;
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
}

.caption-2 {
    font-family: var(--main-font);
    font-size: var(--caption-2);
    font-style: demibold;
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
}

.caption-3 {
    font-family: var(--main-font);
    font-size: var(--caption-3);
    font-style: demibold;
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
}

.caption-4 {
    font-family: var(--main-font);
    font-size: var(--caption-4);
    font-style: demibold;
    font-weight: 600;
    line-height: 100%;
    text-transform: uppercase;
}

.sudheading-1 {
    font-family: var(--main-font);
    font-size: var(--sudheading-1);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.sudheading-2 {
    font-family: var(--main-font);
    font-size: var(--sudheading-2);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.sudheading-3 {
    font-family: var(--main-font);
    font-size: var(--sudheading-3);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.sudheading-4 {
    font-family: var(--main-font);
    font-size: var(--sudheading-4);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.sudheading-5 {
    font-family: var(--main-font);
    font-size: var(--sudheading-5);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.sudheading-6 {
    font-family: var(--main-font);
    font-size: var(--sudheading-6);
    font-style: demibold;
    font-weight: 600;
    line-height: 120%;
}

.color-yellow {
    color: var(--yellow);
}

.color-black {
    color: var(--black);
}

.color-gray-900 {
    color: var(--gray-900);
}

.color-gray-800 {
    color: var(--gray-800);
}

.color-gray-700 {
    color: var(--gray-700);
}

.color-gray-600 {
    color: var(--gray-600);
}

.color-gray-500 {
    color: var(--gray-500);
}

.color-gray-400 {
    color: var(--gray-400);
}

.color-gray-300 {
    color: var(--gray-300);
}

.color-gray-200 {
    color: var(--gray-200);
}

.color-gray-100 {
    color: var(--gray-100);
}

.color-white {
    color: var(--white);
}