:root {
    /* div */
    --containerValue: 100%;
    --negativeMarginX: -0.75rem;
    --basePadding: 1.5rem;

    /* colors */
    --color_main: #c00418; /*red*/
    --color_one: #cfaa40; /*gold*/
    --color_two: #fff2cf; /*beige*/
    --color_three: #FFC300; /*orange*/

    --black: #000;
    --white: #FFFFFF;
    --grey: #999999;
    --gray_dark: #666;
    --grey_light: #EEEEEE;
    --grey_fake: #EEEEEf;

    /* fonts */
    --sans-serif: 'Open Sans';
    --serif: 'Literata';

    /* border-radius */
    --borderradius_default: 5px;
    --borderradius_large: 30px;

}

@media screen and (min-width: 1400px) {
  :root {
    --containerValue: calc(1320px - var(--basePadding));
    --negativeMarginX: calc((var(--viewportWidth) - var(--containerValue)) / -2);
  }
}