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

    --primary-color                      : #2980b9;
    --secondary-color                    : rgb(255, 162, 44);

    --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);

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

    --link-color-on-hover                : var(--main-red-color);

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

    --nav-bg--color                      : white;

    /*FONTS*/

    --main-font: 'Raleway', sans-serif;
    --second-font: 'Graceland';
    --third-font: 'Freshman';

    /*COLORS*/

    --main-red-color: #852419;
    --second-red-color: #B93425;
}

@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%;
    }
}

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