QR Component | Mobile First solution with CSS Flexbox

Hi Frontendmentor community,

This is my QR component beginner challenge solution and my first submission. I was having difficulty in making the large size of my solution's <main> container to smaller dimensions to match the solution .jpg screenshot given on the challenge page. I request the community to review and give feedback for the live site and the shared source code on the following parameters-

1. Does it follow all the good web accessibility practices?
2. Is the site mobile first and responsive on all devices?
3. Do all the padding, margin and border settings comply with the original design(as i am not a pro member and do not have access to the design files)?
4. Are all the colors and font settings matching the original design?
5. Do you have any other code refactoring suggestion?

Please feel free and do not hesitate to review my code and do give feedback for improvement. All suggestions are welcome. Waiting to learn from your feedback and experience. Thank you for reviewing my challenge submission.