:root {
    --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%);

    --font-family: 'Outfit', sans-serif;

    --card-border-radius: 20px;

    /* Text Preset 1 */
    --font-preset-1-size: 2.2rem; /* 22px */
    --font-preset-1-line-height: 120%;
    --font-preset-1-letter-spacing: 0px;
    --font-preset-1-weight: 700;


    /* Text Preset 2 */
    --font-preset-2-size: 1.5rem; /* 15px */
    --font-preset-2-line-height: 140%;
    --font-preset-2-letter-spacing: 0.2px;
    --font-preset-2-weight: 400;

    --spacing-lg: 4rem; /* 40px */
    --spacing-md: 2.4rem; /* 24px */
    --spacing-sm: 1.6rem; /* 16px */
}

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

html {
    /* Set font size for easy rem calculations
   * default document font size = 16px, 1rem = 16px, 100% = 16px
   * (100% / 16px) * 10 = 62.5%, 1rem = 10px, 62.5% = 10px
  */
    font-size: 62.5%;
}

body {
    background-color: var(--color-slate-300);
    font-family: var(--font-family);
    color: var(--color-slate-500);
    width: 100vw;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}



.card {
    width: 100%;
    max-width: 320px;
    padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    background-color: var(--color-white);
    border-radius: var(--card-border-radius);
    box-shadow: 0px 25px 25px rgba(0, 0, 0, 0.047);
    text-align: center;
}

.qr-image {
    width: 100%;
    border-radius: 10px;
    margin-bottom: var(--spacing-md);
}

h2 {
    color: var(--color-slate-900);
    font-size: var(--font-preset-1-size);
    line-height: var(--font-preset-1-line-height);
    letter-spacing: var(--font-preset-1-letter-spacing);
    font-weight: var(--font-preset-1-weight);
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

p {
    font-size: var(--font-preset-2-size);
    line-height: var(--font-preset-2-line-height);
    letter-spacing: var(--font-preset-2-letter-spacing);
    font-weight: var(--font-preset-2-weight);
    padding: 0 var(--spacing-sm);
}