QR Code Component using basic HTML5, CSS3 and Flexbox

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

I am proud with the solution I formulated base on my own basic knowledge of HTML, CSS, and CSS Flexbox. I also used the fundamentals such as box models, semantics, proper structures etc. I treated this challenge as an opportunity to actively recall and apply what I’ve learned from past lectures. What I will do next is, I will try to read documentations so that I will take up too much time figuring out things.

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

Since I didn't use any documentations or tools aside from using fonts, I've had hard time formulation a solution in my head such as applying flexbox, using var for the hsl colors etc. I also had hard time figuring out the fonts, content sizes but I've overcome it by figuring out what's the closest possible replica of those said properties.

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

I'm open to all feedback, but I'd especially appreciate help with the following areas:

Responsiveness: Are there better ways to handle mobile responsiveness, especially for centering the component vertically?

Styling Practices: Is my use of CSS custom properties and font import clean and maintainable?

Layout Structure: I used Flexbox for centering — is this the most efficient approach for this type of layout?

Code Optimization: Are there any unnecessary CSS declarations or better practices I could follow?

General Code Readability: Is the HTML and CSS structure readable and scalable for future projects?