Social Links Profile

The suggestions I would give you:

• For better visualization (it attracts, means your are organized), you could create different .css files for each purpose:

1. reset.css (*{margin,padding,box-sinzing}; :root; reset-list styles),
2. style.css (normal, for visual styles) and
3. responsive.css(media query) [you can look any of my projects to compare]

• For better responsivity and accessibility, you should always use (rem; em; %) for font-size [primarily rem] and using px just for sizing such as margin/padding/width/height -- for width/height, try using max/min for better responsivity, but that should not be 100% of the time
• Into the link section, you should thinks it's a clickable option that should lead you to the social medias, so you need to add the tag <a> like that:

<ul>
   <li><a href="#">Facebook</a></li>
   ...
</ul>

but you did a great job using <ul> for that case

• For media query, you should test the breakpoints in your layout to determine which should be the "max-width", you can create more than one if necessary. For example, you create a media to max-375px, but at 768px width screen it already start to get compressed, at 400px it's impossible to see