:root {
    /* Primary */
    --white: #FFFFFF;
    --cloudy: #f4f4f4;
    --black: #010101;
    --blue: #2e3973;
    --teal: #3bbfbe;
    --orange: #ec614c;
    --purple: #463a76;
    --pink: #d61d5f;
    --salmon: #f9658b;
    --green: #b4d343;
    --yellow: #f8bc1c;

    /* Secondary */
    --blue-lighter: #9fdeef;
    --blue-light: #7fd2ea;
    --teal-light: #37eccf;
    --teal-med: #51bbbe;
    --teal-dark: #5ea2a2;
    --teal-darker: #3c8080;

    --green-lighter: #d8e483;
    --green-light: #bfd36d;
    --green-med: #a6b46d;
    --green-dark: #839f3d;
    --green-darker: #63853a;

    --yellow-lighter: #fded9e;
    --yellow-light: #f3d061;

    --pink-med: #e693ba;
    --pink-dark: #d2567d;
    --pink-darker: #941a48;

    --brown-lighter: #dab776;
    --brown-light: #bb9267;
    --brown-med: #c29456;
    --brown-dark: #ab6246;
    --brown-darker: #914623;

    /* fonts */
    --tide-3: 'TideSans-300LilKahuna', sans-serif;
    --tide-4: 'TideSans-400LilDude', sans-serif;
    --tide-6: 'TideSans-600Bunny', sans-serif;
    --tide-7: 'TideSans-700Mondo', sans-serif;

    /* timing */
    --smoother: .6s;
    --smooth: .4s;
    --quick: .2s;

    /* additional styling */
    --border-buttons: 1rem;
}