Responsive social profile using flexbox

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

I'm proud of labeling all the classes to names that make sense. And using root selector with variable names that make sense.

I would try to make the footer stay at the bottom but center the content to be centered with the social profile flexbox. Also try to keep left and right margin of the black background in the body element which disappears when shrinking the content to mobile width.

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

I couldn't get the footer to stay at the bottom without using position fixed which I'm not sure is the best solution. The footer text was also not centered with the flexbox container containing the social profile.

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

How to remove some of the space between the avatar image and the name of the developer. Best practices for all of the content and to make it responsive depending on size of page.

I also couldn't get the link font color to change to black upon hovering over the link with the hover pseudo selector.

I tried adding the color property but the black color is not working.

.social__link:hover {
  background-color: var(--clr-primary);
  color: var(--clr-neutral-black);
}