/*
    1 - CSS variables.
 */
:root {
    /* min-width reference only - does not alter media
       max-width requires -1 pixel
        huge: 1440px;
        wide: 1280px;
        xlarge: 1080px;
        large: 960px;    // admin sidebar auto folds
        medium: 782px;   // adminbar goes big
        small: 600px;
        mobile: 480px;
        zoomed-in: 280px;
    /* end media sizes */

    /* START EDITS */
    --max-width-sm: 800px;
    --max-width-md: 1000px;
    --max-width-lg: 1200px;
    --max-width: 1400px;
    --max-width-xl: 1600px;
    --padding: 30px;

    /* fonts and text */
    --font-family: 'arial', sans-serif;
    --font-family-h: 'arial black', sans-serif;

    --font-size: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 20px;
    --font-size-xl: 24px;
    --font-size-xxl: 50px;
    --font-size-h1: 50px;
    --font-size-h2: 40px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-h5: 16px;
    --font-size-h6: 20px; /* not set */

    --line-height: 1.25;
    --line-height-h: 1.25;
    --line-height-sm: 1;

    --spacing-text: 20px;
    --spacing-h: 20px;

    --font-style: normal;
    --font-variant: normal;

    --weight-light: 300;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-semi: 600;
    --weight-bold: 700;
    --font-weight: 400;
    --font-weight-h: 400;

    /* colors */
    --black: #000000;
    --white: #ffffff;
    --error: #d50404;
    --gray-dark: #333333;
    --gray-medium: #a7a7a7;
    --gray-light: #b5b5b5;

    /* universal color naming */
    --color-alpha: #009a49; /* green */
    --color-bravo: #da291c; /* red */
    --color-charlie: #fff200; /* yellow */

    --color-bg: var(--white);
    --color-text: var(--black);
    --color-text-other: var(--white);

    --color-link: var(--color-alpha);
    --button-bg: var(--color-alpha);
    --color-link-hover: var(--white);
    --button-hover-bg: var(--color-bravo);

    /* border */
    --color-border: var(--color-alpha);
    --border-radius: 1em;
    /* END EDITS */
}

@media all and (min-width: 782px) {
    :root {
        --font-size: 18px;
        --font-size-xl: 50px;
        --font-size-xxl: 150px;
        --line-height: 1.5;

        --font-size-h1: 50px;
        --font-size-h2: 40px;
    }

}