:root {
    /* Palette from the style guide */
    --color-white: hsl(0, 0%, 100%);
    --color-slate-300: hsl(212, 45%, 89%);
    --color-slate-500: hsl(216, 15%, 48%);
    --color-slate-900: hsl(218, 44%, 22%);

    /* New: shadow variable for reuse and easier theming */
    --card-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.1);
}

/* 1. Reset box-sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 2. Base/global styles */
body {
    margin: 0;
    min-height: 100vh;

    display: flex;
    flex-direction: column;
    /* stack children vertically */
    align-items: center;
    /* center horizontally */
    justify-content: center;
    /* center vertically */

    background-color: var(--color-slate-300);
    font-family: "Outfit", sans-serif;
    color: var(--color-slate-900);
}

/* 3. Make images responsive by default */
img {
    /* Instead of clamp(0%,100%,100%), we simply ensure the image
     never exceeds its container’s inline size */
    max-inline-size: 100%;
    display: block;
    height: auto;
}

/* 4. The white card container */
.card {
    background-color: var(--color-white);
    border-radius: 1.25rem;
    /* 20px ÷ 16 = 1.25rem */
    box-shadow: var(--card-shadow);
    /* use the new custom property */

    /* fluid width down to very small screens, then cap via clamp() */
    width: clamp(18rem, 90%, 21.875rem);
    padding: 1.5rem;
    /* 24px ÷ 16 = 1.5rem */
    text-align: center;
}

/* 5. QR code image inside the card */
.card img {
    width: 100%;
    border-radius: 0.5rem;
    /* 8px ÷ 16 = 0.5rem */
    margin-block-end: 1.25rem;
    /* 20px ÷ 16 = 1.25rem */
}

/* 6. Heading text */
.card h1 {
    font-size: 1.125rem;
    /* 18px ÷ 16 = 1.125rem */
    font-weight: 700;
    color: var(--color-slate-900);
    margin: 0 0 1rem;
    /* 16px ÷ 16 = 1rem */
    line-height: 1.3;
}

/* 7. Paragraph (body copy) */
.card p {
    font-size: 0.9375rem;
    /* 15px ÷ 16 = 0.9375rem */
    font-weight: 400;
    color: var(--color-slate-500);
    line-height: 1.5;
    margin: 0;
}

/* 8. Attribution (show “Challenge by…” at the bottom) */
.attribution {
    font-size: 0.6875rem;
    /* 11px ÷ 16 = 0.6875rem */
    text-align: center;
    margin-block-start: 1.25rem;
    /* 20px ÷ 16 = 1.25rem */
    color: var(--color-slate-500);
}

.attribution a {
    color: var(--color-slate-900);
    text-decoration: none;
}

.attribution a:hover {
    text-decoration: underline;
}

/* 9. Slightly larger card on tablet+ */
/* Converted 768px → 48rem (48 × 16 = 768) */
@media (min-width: 48rem) {
    .card {
        max-width: 21.875rem;
        /* 350px ÷ 16 = 21.875rem */
        padding: 2rem;
        /* 32px ÷ 16 = 2rem */
    }
}