:root {
  /* ========================
     COLORS
  ======================== */
  --color-background-primary: hsl(212, 45%, 89%);
  --color-text-secondary: hsl(216, 15%, 48%);
  --color-text-heading: hsl(218, 44%, 22%);
  --color-white: hsl(0, 0%, 100%);

  /* ========================
     SPACING SCALE
  ======================== */
  --spacing-sm: 1rem; /* 16px */
  --spacing-md: 1.5rem; /* 24px */
  --spacing-lg: 2.5rem; /* 40px */

  /* ========================
     TYPOGRAPHY
  ======================== */
  --font-size-heading: 1.375rem; /* 22px */
  --font-size-body: 0.9375rem; /* 15px */

  /* ========================
     LETTER SPACING
  ======================== */
  --letter-spacing-body: 0.0125rem; /* 0.2px */

  /* ========================
     FONT WEIGHT
  ======================== */
  --fw-regular: 400;
  --fw-bold: 700;

  /* ========================
     BORDER RADIUS
  ======================== */
  --radius-regular: 20px;
}

/* ========================
   CSS RESET 
======================== */

/* Box sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
}

/* Core body setup */
html {
  font-size: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: "Outfit", sans-serif;
  background-color: var(--color-background-primary);
  color: var(--color-text-secondary);
  -webkit-font-smoothing: antialiased;

  display: grid;
  place-items: center;
  min-height: 100vh;
}

/* Media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Form elements inherit fonts */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove built-in form typography quirks */
button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Text wrapping improvements */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

.qr-card {
  padding: var(--spacing-sm);
  background-color: var(--color-white);
  border-radius: var(--radius-regular);
  width: 100%;
  max-width: 320px;
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.05);

  display: flex;
  gap: var(--spacing-md);
  flex-direction: column;
}

.qr-card .qr-card__image {
  border-radius: 12px;
}

.qr-card__content {
  padding: var(--spacing-sm);
  text-align: center;
}

.qr-card__title {
  font-weight: var(--fw-bold);
  font-size: var(--font-size-heading);
  line-height: 1.3;
  letter-spacing: 0px;
  color: var(--color-text-heading);
  margin-bottom: var(--spacing-sm);
}

.qr-card__description {
  font-weight: var(--fw-regular);
  color: var(--color-text-secondary);
  letter-spacing: var(--letter-spacing-body);
  font-size: var(--font-size-body);
  line-height: 1.5;
}

/* Screen-reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}