Some Advice:
1) you don't have to say ".0" on initial-scale, 1 is 1. "all is all"
2) add height=device-height, some older Android browsers need it to report size properly in landscape. (like my old Icoo tablet)
3) say type="shortcut icon", not just "icon". It's only a couple bytes and it nabs a few older UA's.
4) You might want to ditch all the classes for nothing for actual semantics.
5) What makes some words divided by vertical breaks a grammatical/structural paragraph? That's not a single complete thought containing at least one full sentence.
6) The lack of text in your social icons violates accessibility norms.
7) you have no media target for your stylesheet links, meaning you're sending a screen media layout to "all". This kind-of defeats one of the entire reasons CSS even exists. It's one of those things that if you see missing in someone's HTML, it's likely they don't know enough HTML or CSS to tell others how to build websites. (Yes, I realize that pretty much means ALL HTML/CSS frameworks)
8) Both the informative with ".divider" betwixt them and the social icons are short bullet points or lists of choices. That's UL/LI's job. The latter is also navigation, so NAV might not hurt.
9) Don't "Grid" the HTML element, it can have... undesired consequences.
10) Use the condensed font properties to save a few bytes in the CSS, and do NOT trust the line-height to inherit properly.
11) don't pad things that are scaled in EM with pixels. If you're gonna use EM, use 'em!
12) Since you're not playing with images -- and even if you were -- just say "background" not "background-color"
13) It's 2021, you can ditch the XML-style closures on empty/void tags.
14) Avoid @import unles you have a pre-processor to fold it out. Putting it into LINK will mke the browser start loading the fonts sooner.
15) "main.css" is painfully vague,try working the media target you designed for into the filename, such as "screen.css"
16) Presentational classes like "icon" and "fa-2x" are code bloat if you use combinators. What's better? Saying "fa-2x" five times in the markup, or font-size:2em; once in the stylesheet?
17) a calculation to reduce the font-sizes based on VW when rotated could also work wonders for you.
18) Because lines can be varying lengths, focusing on how many of them you have is a bad gauge of code quality or consistency. File SIZE is far more important.
19) As <i> tags are non-focusable, they're not the correct target for psuedo's like :hover, and you're leaving keyboard navigation out in the cold. Target the parent anchor with a combinator.
20) those icon are already inside an anchor, cursor:pointer is redundant.
100 lines does no favors if it violates basic semantics and accessibility, even on a page this simple.