:root {
    /*main-colors:*/
    --cone: #111111;
    --ctwo: #2D2D2D;
    --cthree: #821E28;
    --cfour: #EBEAE8;
    --cfive: #707070;
    --csix: #E7E6EB;
    /*some defaults:*/
    --header: #222;
    --mainlink: #821E28;
    --overlink: #E51B31;
    --main-font-color: #333;
    --white: #fff;
    --footerone: #293033;
    --footertwo: #2D2D2D;
    --footerthree: #404B4F;
    --footer-hover: #dddddd;
    --textlogo-one: #EBCED1;
    --textlogo-two: #EBEAE8;
    --color-xlight: #f9f9f9;
    --color-light: #C1CACD;
    --color-medium: #D3C9B5;
    --color-dark: #404B4F;
    --radial-gradient: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(200,200,200,1) 100%);
    /*some utility classes:*/
    --spacing-unit: 1em;
    --margin: calc(1 * var(--spacing-unit));
    --padding: calc(1 * var(--spacing-unit));

    --margin-xs: calc(0.25 * var(--margin));
    --margin-s: calc(0.5 * var(--margin));
    --margin-m: calc(0.75 * var(--margin));
    --margin-n: calc(1 * var(--margin));
    --margin-l: calc(2 * var(--margin));
    --margin-xl: calc(4 * var(--margin));

    --padding-xs: calc(0.25 * var(--padding));
    --padding-s: calc(0.5 * var(--padding));
    --padding-m: calc(0.75 * var(--padding));
    --padding-n: calc(1 * var(--padding));
    --padding-l: calc(2 * var(--padding));
    --padding-xl: calc(4 * var(--padding));

    --wrapper-width: 1440px;

}
/*usage: */
.nice {
    margin: var(--margin);
}
.nice {
    margin: calc(2 * var(--margin));
}