:root {
    /* COLORS */
    --green: #0F0;
    --white: #FFF;
    --black: #000;
    --grey: #929292;
    --grey-two: rgba(255, 255, 255, 0.50);


    /*  FONT FAMILIES */
    --font: "ABC Diatype Unlicensed Trial", sans-serif;
    --font-second: "JetBrains Mono", monospace;


    /* FONT SIZES */
    --size-16: 16px;
    --size-22: 22px;
    --size-24: 24px;
    --size-28: 28px;
    --size-30: 30px;
    --size-32: 32px;
    --size-36: 36px;
    --size-48: 48px;
    --size-64: 64px;
    --size-80: 80px;
    --size-128: 128px;
    --size-153: 153px;
    --size-186: 186px;
    --size-245: 245px;
    --size-297: 297px;


    --space-2xs: 8px;
    --space-xs: 16px;
    --space-sm: 20px;
    --space-sm2: 25px;
    --space-md: 40px;
    --space-lg: 50px;
    --space-xl: 60px;
    --space-2lg: 75px;
    --space-2xl: 100px;
    --space-3xl: 150px;
    --space-4xl: 200px;
    --space-5: 5px;
    --space-15: 15px;
    --space-24: 24px;
    --space-30: 30px;
    --space-32: 32px;
    --space-35: 35px;
    --space-45: 45px;
    --space-70: 70px;
    --space-77: 77px;
    --space-80: 80px;
    --space-90: 90px;
    --space-110: 110px;
    --space-130: 130px;
    --space-175: 175px;
    --space-290: 290px;
}


@media (max-width: 1600px) {
    :root {
        /* FONT SIZES */
        --size-128: 82px;
        --size-153: 120px;
        --size-186: 136px;
        --size-245: 195px;
        --size-297: 237px;
        --size-80: 60px;

        /* SPACES */
        --space-2xl: 90px;
        --space-3xl: 130px;
        --space-4xl: 180px;
        --space-290: 240px;
    }
}


@media (max-width: 1250px) {
    :root {
        /* FONT SIZES */
        --size-30: 20px;
        --size-64: 48px;
        --size-128: 82px;
        --size-153: 120px;
        --size-186: 136px;
        --size-245: 195px;
        --size-297: 237px;

        /* SPACES */
        --space-md: 35px;
        --space-lg: 40px;
        --space-xl: 50px;
        --space-2lg: 60px;
        --space-2xl: 80px;
        --space-3xl: 110px;
        --space-4xl: 150px;

        --space-70: 60px;
        --space-77: 65px;
        --space-80: 65px;
        --space-90: 75px;
        --space-110: 90px;
        --space-130: 105px;
        --space-175: 140px;
        --space-290: 200px;
    }
}


@media (max-width: 992px) {
    :root {
        /* FONT SIZES */
        --size-24: 16px;
        --size-30: 16px;
        --size-36: 22px;
        --size-64: 32px;
        --size-128: 64px;
        --size-153: 80px;
        --size-186: 106px;
        --size-245: 100px;
        --size-297: 107px;

        /* SPACES */
        --space-md: 30px;
        --space-lg: 30px;
        --space-xl: 40px;
        --space-2lg: 50px;
        --space-2xl: 60px;
        --space-3xl: 80px;
        --space-4xl: 100px;

        --space-70: 50px;
        --space-77: 55px;
        --space-80: 55px;
        --space-90: 60px;
        --space-110: 70px;
        --space-130: 80px;
        --space-175: 100px;
        --space-290: 140px;
    }
}


@media (max-width: 768px) {
    :root {
        /* FONT SIZES */
        --size-22: 20px;
        --size-24: 16px;
        --size-28: 24px;
        --size-30: 16px;
        --size-32: 24px;
        --size-36: 22px;
        --size-48: 36px;
        --size-64: 32px;
        --size-80: 48px;
        --size-128: 64px;
        --size-153: 70px;
        --size-186: 90px;
        --size-245: 100px;
        --size-297: 110px;

        /* SPACES */
        --space-2xs: 6px;
        --space-xs: 14px;
        --space-sm: 18px;
        --space-sm2: 22px;

        --space-md: 24px;
        --space-lg: 24px;
        --space-xl: 32px;
        --space-2lg: 40px;
        --space-2xl: 50px;
        --space-3xl: 60px;
        --space-4xl: 80px;

        --space-15: 12px;
        --space-24: 20px;
        --space-30: 24px;
        --space-32: 28px;
        --space-35: 30px;
        --space-45: 36px;

        --space-70: 40px;
        --space-77: 45px;
        --space-80: 45px;
        --space-90: 50px;
        --space-110: 60px;
        --space-130: 70px;
        --space-175: 80px;
        --space-290: 100px;
    }
}



@media (max-width: 480px) {
    :root {
        /* FONT SIZES */
        --size-16: 14px;
        --size-22: 18px;
        --size-24: 16px;
        --size-28: 22px;
        --size-30: 16px;
        --size-32: 20px;
        --size-36: 22px;
        --size-48: 32px;
        --size-64: 28px;
        --size-80: 42px;
        --size-128: 56px;
        --size-153: 60px;
        --size-186: 76px;
        --size-245: 90px;
        --size-297: 97px;

        /* SPACES */
        --space-2xs: 6px;
        --space-xs: 12px;
        --space-sm: 16px;
        --space-sm2: 20px;

        --space-md: 20px;
        --space-lg: 22px;
        --space-xl: 30px;
        --space-2lg: 36px;
        --space-2xl: 45px;
        --space-3xl: 55px;
        --space-4xl: 70px;

        --space-5: 5px;
        --space-15: 12px;
        --space-24: 18px;
        --space-30: 22px;
        --space-32: 26px;
        --space-35: 28px;
        --space-45: 32px;

        --space-70: 35px;
        --space-77: 38px;
        --space-80: 40px;
        --space-90: 45px;
        --space-110: 50px;
        --space-130: 60px;
        --space-175: 70px;
        --space-290: 90px;
    }
}



@media (max-width: 400px) {
    :root {
        /* FONT SIZES */
        --size-16: 14px;
        --size-22: 18px;
        --size-24: 16px;
        --size-28: 20px;
        --size-30: 16px;
        --size-32: 20px;
        --size-36: 22px;
        --size-48: 30px;
        --size-64: 28px;
        --size-80: 40px;
        --size-128: 52px;
        --size-153: 56px;
        --size-186: 72px;
        --size-245: 86px;
        --size-297: 92px;

        /* SPACES */
        --space-2xs: 6px;
        --space-xs: 10px;
        --space-sm: 14px;
        --space-sm2: 18px;

        --space-md: 18px;
        --space-lg: 20px;
        --space-xl: 28px;
        --space-2lg: 32px;
        --space-2xl: 40px;
        --space-3xl: 48px;
        --space-4xl: 60px;

        --space-5: 5px;
        --space-15: 10px;
        --space-24: 18px;
        --space-30: 22px;
        --space-32: 24px;
        --space-35: 26px;
        --space-45: 30px;

        --space-70: 32px;
        --space-77: 36px;
        --space-80: 38px;
        --space-90: 42px;
        --space-110: 48px;
        --space-130: 56px;
        --space-175: 64px;
        --space-290: 80px;
    }
}