feat: ✨ add styles for dialog element & its backdrop

[krypton225]

Description

This PR implements new styles to address an issue with heading elements inside the dialog HTML element.

The goal is to:

• Ensure there is a beautiful design for the dialog HTML element.
• Make additional styles for dialog header, content, and footer to improve the overall UI and UX.

Changes Made

• Add new styles for the dialog HTML element using some custom CSS properties in the mvp.css file.
• Add a style for the ::backdrop pseudo-element to make sense for the user with some background-color and opacity.
• Add a new section in the index.html file to make an example for the dialog and its state in the open.

Screenshot

Additional Notes

• If there are any specific design guidelines or additional functionality to consider, please let me know.
• Feel free to reach out if you have any questions or need further clarification on the changes.

[ChristopherBilg]

Hey Krypton! I'm more than happy to review this and potentially add some of it; however, MVP.css is designed and intended to be an Out of the box CSS styling for HTML elements. No class names, no framework to learn. I see the majority of your proposed changes are in class names. If you'd like to refactor those into CSS combinators (and the like), then I would be happy to include these changes.

[krypton225]

@ChristopherBilg

Thank you very much!
I'm happy to read your awesome comment.

OK. As you said: MVP.css is designed and intended to be an Out-of-the-box CSS styling for HTML elements. No class names, no framework to learn..

Do you need to remove the classes only, with the example of course, and push a new commit?