QR code component solution using HTML and CSS

• I initially struggled with centering the card vertically on the page and after some researching, I found out that by applying min-height: 100vh to the body could accomplish this.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

I'm not entirely sure why exactly this works and if there are any more effective or clean ways to achieve this effect, I would love to know alternative ways to accomplish this!

• This project was also a great to get into the habit of writing CSS variables for properties that I thought I would have to re-use throughout the code.

After reading about it on MDN, their recommendation was to apply these styles directly to the :root pseudo-class. Where do you apply your CSS variables?

:root {
  --white: hsl(0, 0%, 100%);
  --lightGray: hsl(212, 45%, 89%);
  --grayishBlue: hsl(220, 15%, 55%);
  --darkBlue: hsl(218, 44%, 22%);
}