QR Code Component Challenge Solution using Semantic html and flexbox.

You hard coded the position of the card. In this case the best way to do this, is by using flexbox. Apply flexbox to html

html {
font-family: var(--FONT-FAMILY);
background-color:  #D5E1EF;
text-align: center;
/* add these four lines to place the card in the middle of the page*/
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

main {
width: 320px;
height: 497px;
border-radius: 20px;
box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05);
background-color: var(--BACKGROUND-COLOR);
/* you don't need these lines, flexbox on html will do this */
/*     position:absolute; */
/*     top: 50%; */
/*     left: 50%; */
/*     transform: translate(-50%, -50%);    */
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}