:root {
    --page-max-width: 1190px;
    --page-padding: 30px;

    --c-white: #ffffff;
    --c-black: #000000;
    --c-accent: #a5decb;
    --c-bg-darnest: #121212;
    --c-bg-dark: #242424;
    --c-bg-medium: #2e2e2e;
    --c-bg-light: #393939;

    --font-main: 'Lato', sans-serif;
    --font-special: 'Source Sans Pro', sans-serif;
    --font-header: 'Bodoni', serif;

    /* height divided by width (100% = square) */
    --other-category-proportion-photo: 150%;
    --category-proportion-photo: 150%;
    --session-proportion-photo: 100%;
}

/*
 * Breakpoints. Custom properties don't work in media queries, so these values
 * are written out in every @media rule (all rules use max-width):
 *
 *   mobile-little   359px
 *   mobile-small    480px
 *   mobile-max      600px
 *   tablet-medium   768px
 *   tablet-max     1024px
 *   desktop-min    1300px
 *   desktop-mac    1440px
 */