/*
    This file defines the "globals" for the site.
        - The color palette
        - The sizes of the media queries
        - The root font size, which adjusts based on screen width

    It should be imported first.
    Then all other stylesheets can reference the color palettes, use rem units, and use the sizes for their own media queries.
*/

:root {
    font-size: 16px;

    --medium-width: 700px;
    --small-width: 500px;
    --smaller-width: 400px;
    --smallest-width: 330px;

    /* These all get set in the JS before the html loads */
    --color-1: white;
    --color-2: white;
    --color-3: white;
    --color-4: white;
}

@media screen and (max-height: 700px) {
    :root {
        font-size: 12px;
    }
}

@media screen and (max-height: 550px) {
    :root {
        font-size: 10px;
    }
}

@media screen and (max-width: 700px) {
    :root {
        font-size: 12px;
    }
}

@media screen and (max-width: 500px) {
    :root {
        font-size: 10px;
    }
}

@media screen and (max-width: 400px) {
    :root {
        font-size: 8px;
    }
}

@media screen and (max-width: 330px) {
    :root {
        font-size: 6px;
    }
}

@font-face {
    font-family: TargaMS;
    src: url(../fonts/targa.ms.ttf);
}