@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

/*─────────────────────────────────────────
  1. Reset & Box‐Sizing
─────────────────────────────────────────*/
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*─────────────────────────────────────────
  2. CSS Variables (Design Tokens)
─────────────────────────────────────────*/
:root {
  /* Colors */
  --clr-white:      hsl(0,   0%, 100%);
  --clr-slate-300:  hsl(212, 45%, 89%);
  --clr-slate-500:  hsl(216, 15%, 48%);
  --clr-slate-900:  hsl(218, 44%, 22%);

  /* Typography */
  --ff-primary:     'Outfit', sans-serif;
  --fs-body:        0.9375rem;  /* 15px */
  --fs-heading: 1.375rem;
  --lh-body:        1.6;
  --fw-normal:      400;
  --fw-bold:        700;

  --space-200:      1rem;      /* 16px */
  --space-300:      1.5rem;    /* 24px */
  --space-500:      2.5rem;    /* 40px */

  --br-sml: 10px;
  --br-lrg: 20px;
}

/*─────────────────────────────────────────
  3. Base Typography & Background
─────────────────────────────────────────*/
html {
  font-size: 16px; /* 1rem = 16px */
  background-color: var(--clr-slate-300);
}

/* Heading style */
.text-heading {
  font-family: var(--ff-primary);
  font-size: var(--fs-heading);
  line-height: 120%;
  font-weight: var(--fw-bold);
  letter-spacing: 0px;
  color: var(--clr-slate-900);
}

/* Body-copy style */
.text-body {
  font-family: var(--ff-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-normal);
  color: var(--clr-slate-500);
}
/*─────────────────────────────────────────
  4. Layout / Artboard Container
─────────────────────────────────────────*/
/* “Artboard” wrapper matching design widths */
.wrapper {
  width: 100%;
  max-width: 375px;      /* mobile artboard */
  margin: 0 auto;
  min-height: 100vh;     
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;         /* breathing room on small screens */
}

/* At desktop sizes, expand the artboard */
@media (min-width: 1440px) {
  .wrapper {
    max-width: 1440px;   /* desktop artboard */
    padding: 0;          
  }
}

.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }


.qr-container {
    background-color: var(--clr-white);
    padding: var(--space-200) var(--space-200) var(--space-500);
    max-width: 320px;
    border-radius: var(--br-lrg);
}

.qr-image {
    margin-bottom: var(--space-300);
}

.qr-image img {
    width: 100%;
    height: auto;
    display: block;

    border-radius: var(--br-sml);
}

.qr-content {
    padding: 0 var(--space-200);
    text-align: center;
}

.qr-content h1 {
    margin: 0 0 var(--space-200);
}