how to make individual colors for each page in primary navigation?

I'm trying to insert css that would allow each of my 3 page titles in my primary navigation to be a different color, and have a different hover color, and have a different active page color. what would the correct css be??

my site link is: https://www.sophielindemann.com/

thank you! 🙂

@sophielindemann Add to Home > Design > Custom CSS

nav#mainNavigation a[href="/design"] {
    color: green;
}
nav#mainNavigation a[href="/design"]:hover {
    color: violet;
}
#mainNavigation .active-link a[href="/design"] {
    color: red;
}

Do similar with other items