:root {
    --orange: rgb(255, 159, 24);
    --darkorange: rgb(129, 88, 30);
    --black: #000;
    --blue: #166dca;
    --darkblue: #154981;
    --white: #fff;
    --red: #a00;
    --green: #198754;
    --lightgrey: #ddd;
    --darkgrey: #303030;

    --world-blue: #12e3fb;
    --sun-orange: #fee981;
}

@font-face {
    font-family: "Syncopate";
    src: url('/fonts/Syncopate-Regular.ttf') format('embedded-opentype'),
        /* IE */
        url('/fonts/Syncopate-Regular.ttf') format('woff2'),
        /* Modern */
        url('/fonts/Syncopate-Regular.ttf') format('woff'),
        /* Current */
        url('/fonts/Syncopate-Regular.ttf') format('truetype'),
        /* Mobile */
        url('/fonts/Syncopate-Regular.ttf') format('svg'),
        /* Legacy iOS */
}

@font-face {
    font-family: "Syncopate-Bold";
    src: url('/fonts/Syncopate-Bold.ttf') format('embedded-opentype'),
        /* IE */
        url('/fonts/Syncopate-Bold.ttf') format('woff2'),
        /* Modern */
        url('/fonts/Syncopate-Bold.ttf') format('woff'),
        /* Current */
        url('/fonts/Syncopate-Bold.ttf') format('truetype'),
        /* Mobile */
        url('/fonts/Syncopate-Bold.ttf') format('svg'),
        /* Legacy iOS */
}

/****************************************************************************************
***  MAIN BODY
****************************************************************************************/
/* Move down content because we have a fixed navbar that is 76px tall */
body {
    /* background-color: var(--lightgrey); */
    color: var(--black);
}