:root {

    /* Colors */

    /* Primary */

    --primary-900: hsl(203,76%,13%);
    --primary-800: hsl(205, 53%, 17%);
    --primary-700: hsl(205, 37%, 24%);
    --primary-600: hsl(205, 24%, 37%);
    --primary-500: hsl(205, 17%, 53%);
    --primary-400: hsl(206, 23%, 70%);
    --primary-300: hsl(207, 33%, 84%);
    --primary-200: hsl(204, 56%, 93%);
    --primary-100: hsl(208, 100%, 97%);

    /* Grays */

    --gray-900: hsl(252, 4%, 22%);
    --gray-800: hsl(252, 4%, 25%);
    --gray-700: hsl(250, 4%, 31%);
    --gray-600: hsl(250, 3%, 42%);
    --gray-500: hsl(257, 3%, 57%);
    --gray-400: hsl(260, 4%, 72%);
    --gray-300: hsl(255, 5%, 84%);
    --gray-200: hsl(260, 6%, 91%);
    --gray-100: hsl(260, 9%, 94%);

    /* Accents */

    --purple-900: hsl(240, 90%, 16%);
    --purple-800: hsl(240, 64%, 21%);
    --purple-700: hsl(240, 42%, 28%);
    --purple-600: hsl(240, 26%, 40%);
    --purple-500: hsl(240, 21%, 56%);
    --purple-400: hsl(240, 26%, 72%);
    --purple-300: hsl(240, 36%, 85%);
    --purple-200: hsl(240, 56%, 94%);
    --purple-100: hsl(240, 100%, 97%);

    --blue-900: hsl(216, 90%, 12%);
    --blue-800: hsl(215, 86%, 14%);
    --blue-700: hsl(216, 73%, 19%);
    --blue-600: hsl(215, 56%, 29%);
    --blue-500: hsl(215, 37%, 45%);
    --blue-400: hsl(215, 38%, 63%);
    --blue-300: hsl(212, 48%, 80%);
    --blue-200: hsl(212, 68%, 90%);
    --blue-100: hsl(210, 100%, 95%);

    --green-900: hsl(185, 100%, 10%);
    --green-800: hsl(185, 69%, 14%);
    --green-700: hsl(185, 44%, 21%);
    --green-600: hsl(185, 27%, 34%);
    --green-500: hsl(184, 17%, 51%);
    --green-400: hsl(184, 22%, 69%);
    --green-300: hsl(183, 28%, 84%);
    --green-200: hsl(184, 41%, 93%);
    --green-100: hsl(180, 54%, 97%);

    /* Font Stacks */

    --sans-serif:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --serif: 'Merriweather', serif;
}

/* Base body styles for all projects */

*, :after, :before {
    box-sizing: border-box;
}

body {
    font-family: var(--sans-serif);
    color: var(--gray-900);
}