:root{
    --outfit-bold: 700;
    --outfit-regular: 400;
    
    --spacing-200: 1rem;
    --spacing-300: 1.5rem;
    --spacing-500: 2.5rem;
    
    --font-size-md: 0.9375rem;
    --font-size-xxl: 1.375rem;
    
    --color-slate-300: #D5E1EF;
    --color-slate-500: #68778D;
    --color-slate-700: #FFFFFF;
    --color-slate-900: #1F314F;
}

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

.qr-code-page{
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Outfit', serif;
    background-color: var(--color-slate-300);
}

.qr-code-card{
    display: flex;
    flex-direction: column;
    width: 320px;
    gap: var(--spacing-300);
    padding: var(--spacing-200) var(--spacing-200) var(--spacing-500) var(--spacing-200);
    background-color: var(--color-slate-700);
    border-radius: 20px;
}

.qr-code-card__code-image{
    height: 288px;
    border-radius: 10px;
}

.qr-code-card__content{
    padding: 0 var(--spacing-200);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-200);
    text-align: center;
}

.qr-code-card__title{
    font-size: var(--font-size-xxl);
    font-weight: 700;
    color: var(--color-slate-900);
}

.qr-code-card__description{
    font-size: var(--font-size-md);
    font-weight: 400;
    color: var(--color-slate-500);
}