/*
# Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

> 💡 These are just the design sizes. Ensure content is responsive and meets WCAG requirements by testing the full range of screen sizes from 320px to large screens.

## Colors

- White: hsl(0, 0%, 100%)

- Slate 300: hsl(212, 45%, 89%)
- Slate 500: hsl(216, 15%, 48%)
- Slate 900: hsl(218, 44%, 22%)

## Typography

### Body Copy

- Font size (paragraph): 15px

### Font

- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 400, 700

*/

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-family: "Outfit", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  color: #333;
}

main {
  max-width: 144rem;
  background-color: hsl(212, 45%, 89%);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.qr-header {
  width: 32rem;
  /* margin: auto; */
  padding: 1.5rem;
  background-color: hsl(0, 0%, 100%);
  border-radius: 0.8rem;
}

.qr-image {
  width: 100%;
  border-radius: 0.8rem;
}

.qr-text {
  text-align: center;
  margin-top: 1.8rem;
}

.qr-text h2 {
  font-weight: 700;
  margin-bottom: 2rem;
  font-size: 2.2rem;
}

.qr-text p {
  color: #868e96;
  margin-bottom: 2.4rem;
  font-size: 1.8rem;
}

@media (max-width: 23em) {
  html {
    font-size: 50%;
  }
}