Huddle landing page - introductory section | CSS nesting

What are you most proud of, and what would you do differently next time?

Familiariazing more with structuring the HTML and organizing the CSS styles.

What challenges did you encounter, and how did you overcome them?

I cannot figure out why the social icons :focus state is not getting the same styles as :active and :hover.

What specific areas of your project would you like help with?

How can I fix the :focus state of the social icons?

It doesn' t get the same styles (even though they are in the same declaration set) with :active and :hover. In Firefox, focusing on the social icons looks ugly and focuses on the bottom half of the icons.