:root {
    /* Typography */
    --default-font-family: sans-serif;
    --default-font-size: 16px;
    --header-font: sans-serif;
    --header-weight: 700;
    --h1-size: 32px;
    --h2-size: 24px;
    --h3-size: 18.72px;
    --h4-size: 16px;
    --h5-size: 13.28px;
    --h6-size: 10.72px;

    /* Layout */
    --content-padding: 20px;
    --nav-height: 50px;
    --nav-spacing: 15px;
    --breadcrumbs-height: 50px;
    --footer-height: 50px;
    --footer-spacing: var(--breadcrumbs-height);

    --max-width: 1024px;
    --min-width: calc(710px + (2 * var(--content-padding)));

    --main-height: calc(100vh - var(--nav-height) - var(--footer-height) - var(--breadcrumbs-height) - calc(2 * var(--content-padding)) - var(--footer-spacing));

    --content-border-radius: calc(0.5 * var(--content-padding));

    /* colors */
	--blue: #0ca0d6;
    --white: #FFF;

    --body-background: #EEE;
    --nav-color: #000055;
    --nav-hover-color: #FFF;
    --content-background: #FFF;
    --footer-background-color: #DDD;


}