:root {
    --base: 100vw;
    --page-width: 1440;
    --size: calc(var(--base) / var(--page-width));

    --black: #000;
    --white: rgba(245, 241, 233, 1);
    --yellow: rgba(255, 217, 98, 1);
    --blue: rgba(127, 162, 213, 1);
    --orange: rgba(247, 173, 121, 1);
    --green: rgba(95, 132, 87, 1);

    --gap: calc(20 * var(--size));

    --padding-small: calc(45 * var(--size));
    --padding-default: calc(90 * var(--size));
    --padding-big: calc(210 * var(--size));

    --font-family: "C059", serif;
    --font-size-body: calc(26 * var(--size));
    --line-height-body: 1.19rem;

    /* 12 / 14 */
    --font-size-t1: 0.4615rem;
    --line-height-t1: 0.5384rem;

    /* 18 / 22 */
    --font-size-t2: 0.692rem;
    --line-height-t2: 0.84rem;

    /* 150 / 130 */
    --font-size-h1: 4.25rem;
    --line-height-h1: 3.4rem;

    /* 70 / 70 */
    --font-size-h2: 2.69rem;
    --line-height-h2: 2.69rem;
}

/* RESPONSIVE */
@media only screen and (max-width: 740px) {
    :root {
        --page-width: 390;

        --padding-small: calc(30 * var(--size));
        --padding-default: calc(35 * var(--size));
        --padding-big: calc(130 * var(--size));

        --font-size-body: calc(20 * var(--size));

        /* 12 / 14 */
        --font-size-t1: 0.5rem;
        --line-height-t1: 0.6rem;

        /* 18 / 22 */
        --font-size-t2: 0.8rem;
        --line-height-t2: 1rem;

        /* 150 / 130 */
        --font-size-h1: 3rem;
        --line-height-h1: 2.5rem;

        /* 70 / 70 */
        --font-size-h2: 2.35rem;
        --line-height-h2: 2.35rem;
    }
}