/* === FLUID SIZES === */

:root {
    --h1: 42px;
    --h2: 35px;
    --h3: 27px;
    --h4: 20px;
    --p: 15px;
    --pixel-30-24: 24px;
    --pixel-16-14: 14px;
    --pixel-24-19: 19px;
    --pixel-22-18: 18px;
    --pixel-20-16: 16px;
}


@media screen and (min-width: 480px) {
  :root {
        --h1: calc(42px + ((100vw - 480px) / (1200 - 480)) * (55 - 42) );
        --h2: calc(35px + ((100vw - 480px) / (1200 - 480)) * (45 - 35) );
        --h3: calc(27px + ((100vw - 480px) / (1200 - 480)) * (35 - 27) );
        --h4: calc(20px + ((100vw - 480px) / (1200 - 480)) * (25 - 20) );
        --p: calc(15px + ((100vw - 480px) / (1200 - 480)) * (18 - 15) );
        --pixel-30-24: calc(24px + ((100vw - 480px) / (1200 - 480)) * (30 - 24) );
        --pixel-16-14: calc(14px + ((100vw - 480px) / (1200 - 480)) * (16 - 14) );
        --pixel-24-19: calc(19px + ((100vw - 480px) / (1200 - 480)) * (24 - 19) );
        --pixel-22-18: calc(18px + ((100vw - 480px) / (1200 - 480)) * (22 - 18) );
        --pixel-20-16: calc(16px + ((100vw - 480px) / (1200 - 480)) * (20 - 16) );
    }
}


@media screen and (min-width: 1200px) {
  :root {
        --h1: 55px;
        --h2: 45px;
        --h3: 35px;
        --h4: 25px;
        --p: 18px;
        --pixel-30-24: 30px;
        --pixel-16-14: 16px;
        --pixel-24-19: 24px;
        --pixel-22-18: 22px;
        --pixel-20-16: 20px;
    }
}