Native CSS nesting and View Transitions API (read description)

For this challenge, I decided to implement some cutting-edge CSS features. These are native CSS nesting and the View Transitions API. Note: as of the posting of this solution only Chromium supports the View Transitions API and not many browsers yet support native nesting. This is why the generated screenshot shows a broken UI.

I find native nesting really cool as it's an implementation of one of the coolest features of sass/scss. It makes it easier to keep your styles organized without having to duplicate a lot of code.

The View Transitions API makes animations easier to implement. I recommend reading this article by Jake Archibald at Google as well as the official MDN web docs page if you want to learn more about it. Btw, I helped edit the MDN page and my pull request got merged!

There are a couple of things that don't work as they should. I'm getting some very weird bugs with styles being applied to elements that don't have the associated class. Also, I did error handling differently from the way Frontend Mentor specifies.

And shoutout to Adam Argyle's Open Props for giving me some premade, easy-to-use animations via CSS variables.

Anyway, I found this challenge really fun. I learned a lot about native nesting and the view transitions api. If I were to keep working on this, I would probably almost completely rewrite it since using a lot of cutting-edge features at the same time isn't the best for compatibility. Also, my JavaScript could definitely be cleaned up.