:root,
:host
{
    --base-unit: 1.7175vw;
    --secondary-unit: 1.2vw;
    --thirt-unit: 1.0vw;
    --base-line-height: 1.4em;
    --main-color: #000000;
    --secondary-color: #F4F6F6;
    --third-color: #A39D96;
    --highlighting-color: #226CE0;
    --main-font: "Barlow", Arial, Helvetica, sans-serif;
    --main-font-weight-thin: 100;
    --main-font-weight-extra-light: 200;
    --main-font-weight-light: 300;
    --main-font-weight-regular: 400;
    --main-font-weight-medium: 500;
    --main-font-weight-semi-bold: 600;
    --main-font-weight-bold: 700;
    --main-font-weight-extra-bold: 800;
    --main-font-weight-black: 900;
    --page-padding: 3.125vw;
    --default-padding: 3.125vw;
    --bg-color-white: #F4F6F6;
    --bg-color-blue: #CADAF2;
    --bg-color-grey: #DBDAD8;
}

/*@media(min-width: 1921px){
    :root,
    :host {
        --base-unit: 32px;
        --secondary-unit: 24px;
    }
}

@media(max-width: 1920px){
    :root,
    :host {

    }
}

@media(max-width: 1320px){
    :root,
    :host {

    }
}
*/
@media(max-width: 1330px){
    :root,
    :host {
        --secondary-unit: 16px;
    }
}

@media(min-width: 1401px){
    :root,
    :host {
        --base-unit: 24px;
        --secondary-unit: 16px;
    }
}

@media(min-width: 1921px){
    :root,
    :host {
        --base-unit: 28px;
        --secondary-unit: 22px;
    }
}

@media(max-width: 1280px){
    :root,
    :host {
        --base-unit: 22px;
    }
}

@media(max-width: 768px){
    :root,
    :host {
        --base-unit: 18px;
        --page-padding: 5.25vw;
        --default-padding: 5.25vw;
    }
}

@media(max-width: 400px){
    :root,
    :host {
        --page-padding: 6.25vw;
        --default-padding: 6.25vw;
    }
}