:root{

    /*-- Width Size --*/

    --content-d: 1440px;
    --content-l: 1080px;
    --content-t: 768px;
    --content-m: 480px;

    /*-- Font Family --*/

    --f-family:   'Outfit', sans-serif;
    --f-family-h: 'Outfit', sans-serif;

    /*-- Font Size --*/

    --fs-base: 18px;
    --fs-h1:   3.4rem;
    --fs-h2:   2.3rem;
    --fs-h3:   2rem;
    --fs-h4:   1.8rem;
    --fs-h5:   1.4rem;

    /*-- Font Weight --*/
    
    --f-weight-h: 800;
    --f-weight-b: 600;
    --f-weight-r: 400;
    --f-weight-l: 200;
    --f-weight-t: 100;

    /*-- LH --*/

    --line-h:   1.5;
    --line-h-b: 1.3;
    --line-h-m: 1.3;

    /*-- Colors --*/

    --color-dark:    #141516;
    --color-black:   #1a1b1c;
    --color-grey:    #252526;
    --color-silver:  #333333;
    --color-pearl:   #cacaca;

    --color-soft:    #f4f4f4;
    --color-light:   #f9f9f9;

    /*-- Border radius --*/

    --bdr-two:    2px;
    --bdr-five:   5px;
    --bdr-ten:    10px;
    --bdr-twenty: 20px;
    --bdr-thirty: 30px;

}

@media only screen and (max-width: 1440px){
    :root{
        --fs-base: 16px;
        --fs-h1:   2.6rem;
        --fs-h2:   2rem;
        --fs-h3:   1.8rem;
        --fs-h4:   1.6rem;
        --fs-h5:   1.2rem;

        /*-- LH --*/

        --line-h-b: 1.4;
        --line-h-m: 1.6;
    }
}

@media only screen and (max-width: 768px){
    :root{
        --fs-h1: 2rem;
        --fs-h2: 1.8rem;
        --fs-h3: 1.4rem;
        --fs-h4: 1.2rem;
        --fs-h5: 1rem;

    }
}

@media only screen and (max-width: 480px){
    :root{
        --fs-base: 14px;
        --fs-h1: 1.6rem;
        --fs-h2: 1.4rem;
        --fs-h3: 1.2rem;
        --fs-h4: 1rem;
        --fs-h5: 0.8rem;

        /*-- LH --*/

        --line-h-b: 1.3;

    }
}