:root {
    --scarlet: #c5050c;
    --scarlet-dark: #9b0000;
    --charcoal-grey: #282728;
    --greyish-brown: #494949;
    --bullet-light-grey: #d2d2d2;
    --slate-grey: #646569;
    --brown-grey: #adadad;
    --uw-page-bg: #f7f7f7;
    --brown-grey-hover: #f9f9f9;
    --uw-anchor-color: #0479a8;
    --pale-sky-blue: #dadfe1;
    --white: #fff;
    --black: #000;
    --dark: #171617;
    --orange: #ff8000;
    --green: #1db954;

    --color-header-bottom-border: #cfcfcf;

    /* base size unit, all margins and static dimensions are
           multiples of this */
    --bu: 8px;
    --margin-xs: var(--bu);
    --margin-s: calc(var(--margin-xs) * 2);
    --margin-m: calc(var(--margin-s) * 2);
    --margin-l: calc(var(--margin-m) * 2);
    --margin-xl: calc(var(--margin-l) * 2);
    --max-page-width: 1280px;
    --border-radius: 5px;

    /* In the mobile menu, this is the building photo currently  */
    --z-index-mobile-menu-image-overlay: 10;

    /* In the mobile menu, this is the gradient that goes over the building  */
    --z-index-mobile-menu-gradient-overlay: 20;

    /* In the mobile menu, this is the text that goes over the gradient  */
    --z-index-mobile-menu-text: 30;

    /* In the desktop top utility menu, when you click Login, this is the submenu */
    --z-index-utility-login-nav: 500;

    /* Holds the entire mobile menu, basically controls background color */
    --z-index-mobile-menu: 9999;

    --z-index-skip-to-content: 100;

    --z-index-section-nav-button: 20000;

    --z-index-section-nav-menu: 20001;

    --z-index-negative-one: -1;
}