:root {
    --font-default: 18px;
    --line-default: 24.3px;

    --font-small: 15px;
    --line-small: 18px;

    --font-big: 20px;
    --line-big: 25px;

    --font-extra-small: 12px;
    --line-extra-small: 15px;

    --font-h1: 40px;
    --line-h1: 42px;

    --font-h2: 35px;
    --line-h2: 40px;

    --font-h3: 25px;
    --line-h3: 30px;
}

@font-face {
    font-family: "Satoshi-Medium";
    src: url("font/Satoshi-Medium.woff") format("woff");
    font-weight: 500;
    font-display: swap;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi-MediumItalic";
    src: url("font/Satoshi-MediumItalic.woff") format("woff");
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: "Satoshi-Bold";
    src: url("font/Satoshi-Bold.woff") format("woff");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Satoshi-BoldItalic";
    src: url("font/Satoshi-BoldItalic.woff") format("woff");
    font-weight: 700;
    font-style: italic;
}

.default-extra-small {
    font-size: var(--font-extra-small);
    line-height: var(--line-extra-small);
    font-weight: 500;
}

.default-small {
    font-size: var(--font-small);
    line-height: var(--line-small);
    font-weight: 500;
}

.default-big {
    font-size: var(--font-big);
    line-height: var(--line-big);
}

h1, h2, h3 {
    max-width: min(85%, 1500px);
}

h1 {
    font-size: var(--font-h1);
    line-height: var(--line-h1);
    font-weight: 500;
}

h2 {
    font-size: var(--font-h2);
    line-height: var(--line-h2);
    font-weight: 500;
}

h3 {
    font-size: var(--font-h3);
    line-height: var(--line-h3);
    font-weight: 500;
}

@media only screen and (max-width: 1350px) {
    :root {
        --font-default: 16px;
        --line-default: 21.6px;

        --font-big: 18px;
        --line-big: 20px;

        --font-small: 14px;
        --line-small: 16px;

        --font-h1: 30px;
        --line-h1: 30px;

        --font-h2: 25px;
        --line-h2: 30px;

        --font-h3: 20px;
        --line-h3: 25px;
    }
}

@media only screen and (max-width: 950px) {
    :root {
        --font-h1: 25px;
        --line-h1: 25px;

        --font-h2: 20px;
        --line-h2: 22px;
        
        --font-h3: 18px;
        --line-h3: 20px;
    }
}