Responsive landing page using CSS Flexbox with Mobile-first workflow

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

I'm proud that I was able to build the project with my own hands without copying and pasting code. Next time, I would like to do the project more relaxed and not think about perfection, and thus be able to move forward faster in the building.

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

It was difficult to add the same hover effect to the border of the icons and to the icons and that when you hover the cursor over one of the two, the color of both changed. I was able to overcome this problem with the help of AI and other people who told me that I could use nesting (like in SASS) or use combined selectors. I chose the second:

.icon-border:hover {
  border-color: var(--secondary-color);
}

.icon-border:hover .fa-brands {
  color: var(--secondary-color);
}

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

1. I created several CSS style sheets depending on each screen width to optimize performance. My question is, can I have custom properties in one style sheet and then override its value in another style sheet? Or should I define the custom properties only in the base style sheet?

For example:

styles.css

:root {
  --primary-background-color: hsl(257, 40%, 49%);
  --secondary-color: hsl(300, 69%, 71%);
  --text-color: #fff;
  --heading-font-family: "Poppins", sans-serif;
  --body-font-family: "Open Sans", sans-serif;
  --large-font-size: 2rem;
  --medium-font-size: 1.6rem;
  --small-font-size: 1.3rem;
}

desktop.css

:root {
  --large-font-size: 4rem;
  --medium-font-size: 1.9rem;
  --small-font-size: 1.4rem;
}

2. How can I make a footer always visible at the bottom of the page regardless of the viewport height size? I mean, I know I can do it with position: absolute but that would cause the footer to be placed above the other elements when the viewport height is reduced, right? So I would like to know if there is another way to do it. I tested my website on mobile devices and you can't see the footer without scrolling, which is annoying because it is only a landing page and the footer only has social media icons and the attribution text.

Thank you very much beforehand for your help.