Simple QR Code Component using CSS Flexbox and custom color variables

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

What I am most proud of is that I was able to use custom CSS variables for the first time just to setup my colors in location. Specifically at the top of my style element.

:root {
      --main-bg-color: #D5E1EF;
      --title-color: #1F314F;
      --desc-color: #68778D;
    }

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

I had a little bit of trouble on importing the font that includes only 2 font weights. When I was trying to import the font by copying the embed link tags on google fonts website. I really wanted to only include the font weights that I only need. I did some googling and you only need to specify the font weights just like this:

``

And the font weights I only need is 400 and 700.

One other thing I struggled a little is how I can center the QR code component at the middle of the page without using flex box but I ended up using flex box because it is the only one I know and I needed to set width and height of the containing element to 100vw and 100vh respectively.

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

In this html code, I am just curious if I should have used the section tag instead of the article tag to apply some semantic meaning. I wanted to know if which is better to use? Should I have used the section tag or stick with the article tag or what tag do you recommend instead?

    
    
      Improve your front-end skills by building projects
      Scan the QR code to visit Frontend Mentor and take your coding skills to the next level