Sizing of the main content

My portfolio has a fixed navbar on top, and I want my main content section to be the same size as the viewport minus the navbar.

This means that when user starts scrolling down, the second section shows up immediately and when he gets to the end of the second section, the start of it hits the navbar.

When I made the page without the navbar, I just used two divs and gave each of them height of 100vh, which worked perfectly. With the navbar, I tried to use height: calc(100vh - 100px), but that didn’t work, or at least I used it improperly.

Here’s the link to my CodePen. I’ve got no idea how to do what I mean to. So you’d better understand what I’m trying to achieve, the text of each section should be in the middle of it when you open it.

Also, if you have any advice on how I could’ve made any of the navbar elements better, please tell me! :slight_smile: