Newsletter sign-up form (HTML + CSS + JS vanilla)

What are you most proud of, and what would you do differently next time?

I think implementation is pretty close to the Figma design and works as expected.

What challenges did you encounter, and how did you overcome them?

Essentially styling the <dialog> element.

By default, <dialog> has a display: none and switches to display: block when opened. I wanted to customize the dialog and use a display: flex, but only when dialog is open. I had to use for the first time an attribute selector for that, otherwise dialog would appear by default on the page:

.success-dialog[open] {
   display: flex
   /* ... */
}

Also, dialog is centered by default but after my CSS reset, it wasn't anymore. Had to use margin: auto to fix that. Maybe my CSS reset could be improved.

What specific areas of your project would you like help with?

Any feedback/advice welcome!