It's 61 bytes because you're using two spaces instead of tabs! :^)
You can shave off 2 more bytes by using em instead of rem. In your use case they are functionally the same. Rem is em relative to the root element. Your <main> pretty much is the root element.
I definitely considered this! But rem feels more predictable and straightforward. I have seen debates on em vs. rem, and there is certainly value with em in websites that have lots of nested and/or discrete responsive components, but for a very simple site, I quite like rem.
Ue rem when your reference is the base page. Use m when the refrerence. is surrounding text.
As examples, I size page elements in rem, but text elements (usally), in em.
My main, content, article, header, footer, and aside should all generally reference page, and are in rem.
Main body text width, headings (h1 ... h6), super- and sub-scripts, code and pre blocks (often jarringly sized by default) reference the containing unit and should be in em units. Also, generally, figure and table captions, table text, etc.
I prefer to give figure or sub-element (tables, callouts, note boxes, etc.) margins and paddings in em as well.
In my opinion em would be more predictable. With the current configuration, users of this package would only be able to adjust the font size by setting font-size on the html element, but not on the body element or any container elements of the main element, or even the main element itself. That is pretty confusing to me, I think it is a pretty typical expectation that making the font size of a container bigger or smaller should always make everything inside proportionately bigger or smaller.
I'm sure. For that reason (ignoring nesting), I think rem is easier to use correctly. I think what you're getting at is that simple sites have little nesting, therefore em, but I'm thinking about in terms of em being great for say, css framework developers.
You can shave off 2 more bytes by using em instead of rem. In your use case they are functionally the same. Rem is em relative to the root element. Your <main> pretty much is the root element.