:root {
    /**************************************************************************************************/
    /********* FONT
    /**************************************************************************************************/
    --font1 : "DM Sans", sans-serif;

    --font-size-XS  : 11px;
    --font-size-S   : 15px;
    --font-size-M   : 18px;
    --font-size-L   : 22px;
    --font-size-XL  : 28px;
    --font-size-XXL : 45px;

    --line-height : 1.35em;

    --text-decoration-thickness: 1px;
    --text-underline-offset: 0.2em;


    /**************************************************************************************************/
    /********* COLORS
    /**************************************************************************************************/
    --font-color : #000;
    --font-color-light : #333;
    --background-color : #fff;

    --orange : #fd7300;
    --violet : #c461c0;
    --blue : #37c0b6;

    --btn-color: #fff;
    --btn-background-color : var(--violet);
    --btn-border-color : #fff;
    --btn-background-color-hover : var(--violet);
    --btn-border-color-hover : var(--violet);

    /**************************************************************************************************/
    /********* LAYOUTS 
    /**************************************************************************************************/
    --header-height : 140px; 
    --gutter-left : 14vw;
    --gutter-right : var(--gutter-left);
    --gutter : 4vw;
    --gutter-v: 10vh;
}
@media screen and (max-width: 1650px) {
    :root {
        --gutter-left : 10vw;
    }
}
@media screen and (max-width: 1350px) {
    :root {
        --gutter-left : 5vw;

        --font-size-XS  : 13px;
        --font-size-S   : 14px;
        --font-size-M   : 16px;
        --font-size-L   : 20px;
        --font-size-XL  : 24px;
        --font-size-XXL : 30px;
    }
}
@media screen and (max-width: 950px) {
    :root {
        --header-height : 80px; 
    }
}
@media screen and (max-width: 900px) {
    :root {
        --gutter-left : 3vw;

        --font-size-XS  : 11px;
        --font-size-S   : 13px;
        --font-size-M   : 14px;
        --font-size-L   : 18px;
        --font-size-XL  : 24px;
        --font-size-XXL : 30px;
    }
}

@media screen and (max-width: 700px) {
    :root {
        --gutter-left : 15px;
    }
}