@Tryt4n
Posted
Because you declaring width and height as a percentage, when the content is bigger then it's overlapping or when the screen size is narrow and tall it's just look not nice. You should avoid declaring width and height based on percentages values to avoid those kinds of situations. They are very problematic in terms of responsiveness. Just declare a constant value or use min-width, max-width, or min max values.
Your email validation checking only for gmail, hotmail and yahoo mails. Instead of doing some things with regex on your own there are easier way to do this. Just google out regex for email or use library like email-validator.
You can also consider using a <dialog> element for your confirmation element. It's way better and way more accessible.
Tip:
In your case if you want to center element in the page the easiest way is to use dispaly: grid and place-content: center or place-items: center on your container element so in this case on <main> element. It's easier than declaring top and left with some values and then doing the math.
