Some other observations...
FORM is SECTION level, so why the section?
What makes "restricted area - login required" a heading describing what the section is/does and/or the creation of a new subsection?
IF you don't have a margin auto container inside a flex centering, if the screen is too short it will chop off the top with no ability to scroll up.
"HeaderOptions" is decidedly vague. That's your main menu isn't it?
Placeholder is for an example of what to type in, such as a username might be "JimboJones", not "username"
If your starting value is empty, don't say value=""
Pure red and pure brown are illegible on a dark background for most of the population, as is your nearly invisible dark blue on dark blue for the h1's anchor.
Again checheckitycheck yourself... Oh wait, that's the wrong link.
https://webaim.org/resources/contrastchecker/The default type for a button is "submit", so you don't need to say that.
Your formatting is screwed up in firefox here, with the input bei9ng decidedly broken. I suspect that's your use of the "universal" reset screwing over sizing of INPUT tags. There's a reason I
NEVER * { margin:0; padding:0; }, even in testing. It's also triggering double scrollbars at some screen sizes, that's likely a result of setting flex on HTML in addition to BODY. That can have weird side-effects.
Courier new is a shitty font-face for screen media, and you failed to provide a fallback family. (serif in this case)
Pages should only have one H1, thus saying "body > header h1" is pretty pointless;
And this is more of a silly nitpick, but your code formatting is all over the blasted place. It looks like tabs and spaces are intermingled and inconsistently applied. Though that could just be codepen's shitty editors screwing with things.
Czech it:
https://codepen.io/jason-knight/pen/jOGBNLZ