1) Stop using PX for everything. You're flipping the bird at accessibility. They're called EM / REM, use 'em!
2) Beware that :where is bleeding edge and browser support is barely two years old. This means a lot of mobile devices won't recognize it.
... and honestly I do NOT find it more legibile. But what do I know? I think the "nesting" crap is equally garbage from a code legibility standpoint.
3) They "typing" effect is accessibility trash too. There's a reason Microsoft's MARQUEE tag was not accepted into HTML.
4) You don't need to use that extra italic tag anymore for checkboxes. You are already using appearance:none and generated content, so just use that.
Just beware that Firefox has only had "proper" support for five years... whilst webkit and blink have supported it for a decade and a half.
See what I did with appearance:none here:
https://medium.com/codex/even-better-styled-html-css-checkboxes-7e9345b5bffd
You could just as easily custom style them the way you did without the italic tag. In fact that's probably my next article.