:root {
    --clr-light-gray: hsl(212, 45%, 89%);
    --clr-white: hsl(0, 0%, 100%);
    --clr-dark-blue: hsl(218, 44%, 22%);
    --clr-grayish-blue: hsl(220, 15%, 55%);
    --font-primary: 'Outfit', sans-serif;
    --radius: 0.9375rem;
    --shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.1);
}


body {
    background-color: var(--clr-light-gray);
    font-family: var(--font-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.card {
    background-color: var(--clr-white);
    padding: clamp(1rem, 5vw, 1.5rem);
    border-radius: var(--radius);
    width: clamp(16rem, 80vw, 20rem);
    text-align: center;
    box-shadow: var(--shadow);
}

.card img {
    width: 100%;
    border-radius: 0.625rem;
}

h1 {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    margin-block-start: 1rem;
    color: var(--clr-dark-blue);
    max-width: 100%;
    width: 30ch;
}

p {
    font-size: clamp(0.85rem, 2vw, 1rem);
    text-align: center;
    color: var(--clr-grayish-blue);
    max-width: 100%;
}