html CSS y flexbox

Firstly, congratulations on the solution.

I have some considerations about your project:

Regarding structuring the page with HTML: note that the card in question is self-contained content and therefore semantically it would be inside an <article>. Furthermore, it is important to use titles respecting the hierarchy, remember that color and size issues can be resolved later using CSS.

Regarding styles, I just have to comment on a more effective way to center the card:

.main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
}

This is enough to align the card horizontally and vertically using flexbox.

Again, congratulations on the solution and I hope you found my comment helpful.