1) might help if your markup made any sense; you're using H1/H2 like the garbage HGROUP tag thought they were supposed to be used; it isn't. Your H2 is not starting a whole new subsection of the page!
2) That DIV for nothing in the header is kind of strange.
3) The heading by itself isn't a section, it's a HEADER. MAIN is the main contnet, but the whole section -- including the paragraph -- would be the SECTION. Most of your "DIV for nothing" would/should get the axe.
4) Where's your media target for the stylesheet LINK?
5) Why are you setting that outdated IE only X-UA-Compatible nonsense? Are you blacklisted?
6) If you add a faux-body DIV (which one often has anyways for implementing modals) you could move the input before it, hide the input (hidden attribute), and then use the adjacent sibling selector to overried your variables on it. This would mean the only thing JS needs to track is the onchange in localstorage. CSS could then do ALL your heavy lifting.
7) text, UI elements, and padding shouldn't be done in PX since that's inaccessible and/or possibly broken for many users. They're called EM, use 'em!
8) Since your SVG are CSS/scripting only functionality, they probably shouldn't be in the markup to begin with. Generated content is your friend.
Quick rewrite to show what I mean:
https://codepen.io/jason-knight/pen/NWpqKzZ
See my own article on doing this: