/*Variable css*/
:root {
    /*--default-container-max-width        : 92%;*/
    --margin-for-default-container       : 5%;
    --margins-for-default-container      : calc(var(--margin-for-default-container) * 2);
    --default-container-max-width        : calc(100% - var(--margins-for-default-container));

    --margin-for-secondary-container     : 5%;
    --margins-for-secondary-container    : calc(var(--margin-for-secondary-container) * 2);
    --secondary-container-max-width      : calc(100% - var(--margins-for-secondary-container));

    --typo-primary                       : 'Raleway', sans-serif;
    --typo-secondary                     : 'Just Lovely Roman', sans-serif;
    --typo-tertiary                      : 'NewParis Text', sans-serif;

    --font-size-multiplier               : 4;
    /*--font-size-multiplier-in-px         : calc(var(--font-size-multiplier) * 1px);*/
    --font-size-multiplier-in-px         : calc(var(--font-size-multiplier) * (.8px + (1 - .8) * ((100vw - 320px) / (1920 - 320))));
    --base-font-size                     : 0.75rem;
    --font-size-100                      : var(--base-font-size);
    --font-size-200                      : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) / 2));
    --font-size-300                      : calc(var(--base-font-size) + var(--font-size-multiplier-in-px));
    --font-size-400                      : calc(var(--base-font-size) + var(--font-size-multiplier-in-px) + (var(--font-size-multiplier-in-px) / 2));
    --font-size-500                      : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 2));
    --font-size-600                      : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 3));
    --font-size-700                      : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 4));
    --font-size-800                      : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 6));
    --font-size-900                      : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 8));
    --font-size-1000                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 10));
    --font-size-1100                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 12));
    --font-size-1200                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 14));
    --font-size-1300                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 16));
    --font-size-1400                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 18));
    --font-size-1500                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 20));
    --font-size-1600                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 22));
    --font-size-1700                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 24));
    --font-size-1800                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 26));
    --font-size-1900                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 28));
    --font-size-2000                     : calc(var(--base-font-size) + (var(--font-size-multiplier-in-px) * 30));

    --primary-color                      : #F9B4A4;
    --secondary-color                    : #FEF5F3;
    --tertiary-color                     : #3D5240;

    --price-color                        : var(--primary-color);

    --btn-primary-color                  : white;
    --btn-primary-color--is-hover        : var(--primary-color);
    --btn-primary-bg-color               : var(--primary-color);
    --btn-primary-bg-color--is-hover     : white;
    --btn-primary-border-color           : var(--primary-color);
    --btn-primary-border-color--is-hover : var(--primary-color);

    --btn-tertiary-color                 : white;
    --btn-tertiary-bg-color              : var(--tertiary-color);

    --product-badge-bg-color             : var(--tertiary-color);
    --product-badge-bg-color-trend       : var(--tertiary-color);
    --product-badge-bg-color-casual      : var(--primary-color);

    --input-focus-color                  : var(--primary-color);

    --link-color-on-hover                : var(--primary-color);

    --product-flag-bg-color              : var(--primary-color);

    --nav-bg--color                      : white;
}

@media screen and (min-width : 768px) {
    :root {
        --nav-bg--color : #f7f7f7;
    }
}

@media screen and (min-width : 1024px) {
    :root {
        /*--default-container-max-width  : 85%;*/
        --margin-for-default-container   : 7.5%;
        --margin-for-secondary-container : 8%;
    }
}

@media screen and (min-width : 1200px) {
    :root {
        /*--default-container-max-width : 80%;*/
        --margin-for-default-container   : 11%;
        --margin-for-secondary-container : 12.5%;
    }
}