Social Icons In Footer - Change Color For Each Icon (Including Hover)

Title says it all, I'm on Harris Ingram and I'm trying to change the color of each individual social icon in the footer so they're all different colors (Facebook, Instagram, Email link). I'd also like a different hover color than the non-hover color (IE, if regular icon is light blue, I'd like hover to be dark blue) .

I figured out how to change the color, but I can't figure out how to change them to individual colors for each social icon. Also, as soon as I hover, they go back to black with a gray hover on the hovered icon. 

URL: https://azalea-bullfrog-8m3w.squarespace.com/
PW: testing

Thanks!

You can use this to Website Tools > Custom CSS

div#block-f0658470f5c86ed7d4b5  {
    a:nth-child(1) .sqs-use--mask {
    fill: #f1f;
}
     a:nth-child(2) .sqs-use--mask {
    fill: green;
}
     a:nth-child(3) .sqs-use--mask {
    fill: #000;
}}

2 hours ago, tuanphan said:

You can use this to Website Tools > Custom CSS

div#block-f0658470f5c86ed7d4b5  {
    a:nth-child(1) .sqs-use--mask {
    fill: #f1f;
}
     a:nth-child(2) .sqs-use--mask {
    fill: green;
}
     a:nth-child(3) .sqs-use--mask {
    fill: #000;
}}

This mostly worked, thank you! Do you know how to add in a hover color that's unique to each icon too? 

14 hours ago, 5638952 said:

This mostly worked, thank you! Do you know how to add in a hover color that's unique to each icon too? 

You can use new code like this

div#block-f0658470f5c86ed7d4b5  {
    a:nth-child(1) .sqs-use--mask {
    fill: #f1f;
}
a:nth-child(1):hover .sqs-use--mask {
    fill: #fff;
}
     a:nth-child(2) .sqs-use--mask {
    fill: green;
}
a:nth-child(2):hover .sqs-use--mask {
    fill: red;
}
     a:nth-child(3) .sqs-use--mask {
    fill: #000;
}
 a:nth-child(3):hover .sqs-use--mask {
    fill: #f1f;
}}

Thank you so much! That works beautifully!