:root {

    --color-primary-black: #000;
    --color-primary-white: #fff;
    --color-primary-red: #c8102e;
    --color-primary-blue: #244c5a;
    --color-primary-green: #b7bf10;
    --color-primary-steele-gray: #7d938f;
    --color-primary-dark-gray: #212322;
    --color-figcaption: #757575;
    --color-light-gray: #d9d9d9;
    --color-lightest-gray: #f6f6f6;
    --color-figcaption: #757575;
    --font-body: 1.7rem;
    --font-body-medium-small: 1.5rem;
    --font-body-small: 1.3rem;
    --font-body-medium: 2rem;
    --font-body-large: 3rem;
    --font-body-extra-large: 3.5rem;
    --font-main: 'Open Sans', sans-serif;
    --font-headline: 'Libre Baskerville', serif;
    --font-secondary: 'Open Sans Condensed', sans-serif;
    --bu: 10px;
    --margin-small: var(--bu);
    --margin-medium: calc(var(--margin-small) * 2);
    --margin-normal: calc(var(--margin-medium) * 2);
    --margin-large: calc(var(--margin-normal) * 2);
    --margin-extra-large: calc(var(--margin-large) * 2);
    --content-width-normal: 1140px;
    --content-width-narrow: 780px;
}

@media (max-width: 1366px) {
    :root {
        --content-width-normal: 900px;
    }
}

@media (max-width: 768px) {
    :root {
        --bu: 8px;
    }
}