:root,
:host
{
    --base-unit: 1.25vw;
    --secondary-unit: 1.2vw;
    --thirt-unit: 1.0vw;
    --base-line-height: 1.4em;
    --accent-color: #505a5b;
    --main-color: #505a5b;
    --content-text-color: #FFFFFF;
    --secondary-color: #505a5b85;
    --third-color: #505a5b34;
    --highlighting-color: #91bada;
    --highlighting-color-darker: #6f90a8;
    --main-font: "Eina", Arial, Helvetica, sans-serif;
    --main-font-weight-thin: 400;
    --main-font-weight-extra-light: 400;
    --main-font-weight-light: 400;
    --main-font-weight-regular: 400;
    --main-font-weight-medium: 400;
    --main-font-weight-semi-bold: 600;
    --main-font-weight-bold: 600;
    --main-font-weight-extra-bold: 600;
    --main-font-weight-black: 600;

    --secondary-font: "Taviraj", Arial, Helvetica, sans-serif;
    --secondary-font-weight-thin: 300;
    --secondary-font-weight-extra-light: 300;
    --secondary-font-weight-light: 300;
    --secondary-font-weight-regular: 400;
    --secondary-font-weight-medium: 400;
    --secondary-font-weight-semi-bold: 400;
    --secondary-font-weight-bold: 400;
    --secondary-font-weight-extra-bold: 400;
    --secondary-font-weight-black: 400;

    --page-padding: 3.125vw;
    --default-padding: 3.125vw;
    --bg-color-white: #F4F6F6;
    --bg-color-blue: #CADAF2;
    --bg-color-grey: #DBDAD8;

    --element-margin-top: 4rem;
    --element-margin-bottom: 4rem;
}

/*@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: 1400px){
    :root,
    :host {
        --base-unit: 18px;
    }
}

@media(max-width: 1000px){
    :root,
    :host {
        --base-unit: 1.8vw;
    }
}

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

@media(max-width: 768px){
    :root,
    :host {
        --base-unit: 2vw;
    }
}

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

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

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