:root {
    --font-family-default: 'robotoregular';
    --font-stretch-default: normal;
    --font-style-default: normal;
    --font-weight-default: 300;

    --font-size-body: 16px;
    --font-size-base: 16;

    --color-black: #000;
}

html,
body {
    font-family: var(--font-family-default);
    font-size: var(--font-size-body);
    font-stretch: var(--font-stretch-default);
    font-style: var(--font-style-default);
    font-weight: var(--font-weight-default);

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

@media screen and (max-width: 320px) {
    html,
    body {
        font-size: calc(var(--font-size-base) * .85 * 1px);
    }
}

@media screen and (min-width: 320px) and (max-width: 480px) {
    html,
    body {
        --min-font-size-base: calc(var(--font-size-base) * .85);
        --max-font-size-base: calc(var(--font-size-base) * 1.28);
        font-size: calc(var(--min-font-size-base) * 1px + (var(--max-font-size-base) - var(--min-font-size-base)) * ((100vw - 320px) / (480 - 320)));
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    html,
    body {
        font-size: calc(var(--font-size-base) * 1.28 * 1px);
    }
}

@media screen and (min-width: 768px) and (max-width: 1200px) {
    html,
    body {
        font-size: calc(var(--font-size-base) * .88 * 1px);
    }
}

@media screen and (min-width: 1200px) and (max-width: 1600px) {
    html,
    body {
        --min-font-size-base: calc(var(--font-size-base) * .88);
        --max-font-size-base: calc(var(--font-size-base) * 1.1713);
        font-size: calc(var(--min-font-size-base) * 1px + (var(--max-font-size-base) - var(--min-font-size-base)) * ((100vw - 1200px) / (1600 - 1200)));
    }
}

@media screen and (min-width: 1600px) {
    html,
    body {
        font-size: calc(var(--font-size-base) * 1.1713 * 1px);
    }
}