/* 1. Global Variables & Reset */

:root {
 /* Colors frpm the design */
 --color-white: hsl(0, 0%, 100%);
 --color-slate-300: hsl(212, 45%, 89%); /* Background color */
 --color-slate-500: hsl(216, 15%, 48%); /* Text color */
 --color-slate-900: hsl(218, 44%, 22%); /* Dark text color */

 /* Typography */
 --font-family-outfit: 'Outfit', sans-serif;
 --font-weight-regular: 400;
 --font-wheight-bold: 700;
 --font-size-paragraph: 15px;
}

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

body {
 background-color: var(--color-slate-300);
 font-family: var(--font-family-outfit);

 /* Centering the card */
 display: flex;
 justify-content: center;
 align-items: center;
 min-height: 100vh;
 padding: 15px; /* For small screens */
}

/* 2. Card Styles */
.card {
 background-color: var(--color-white);
 /* Optimal size based on 375px design layout */
 width: 100%;
 max-width: 320px;

 border-radius: 20px;
 padding: 16px; /* Padding around the image and content */
 text-align: center;

 /* Subtle shadow to match proffesional design */
 box-shadow: 0 25px 25px rgba(0, 0, 0, 0.04);
 
}

/* 3. Image Styling */
.card__image-container {
    overflow: hidden; /* Important to clip the image's corners */
    border-radius: 10px;
}

.card__qr-image {
    display: block;
    width: 100%;
    height: auto;
}

/* 4. Text Styling */
.card__title {
    color: var(--color-slate-900);
    /* Estimated based on visual comparison (slightly larger than body copy) */
    font-size: 22px; 
    font-weight: var(--font-weight-bold);
    
    /* Vertical spacing */
    margin-top: 24px;
    margin-bottom: 16px; 
    
    /* Horizontal padding for text */
    padding: 0 12px; 
    line-height: 1.3;
}

.card__text {
    color: var(--color-slate-500);
    font-size: var(--font-size-paragraph); /* 15px from Style Guide */
    font-weight: var(--font-weight-regular);
    
    /* Space at the very bottom */
    margin-bottom: 24px; 
    
    /* Horizontal padding for text */
    padding: 0 20px; 
    line-height: 1.4;
}

/* 5. Attribution Styling */
.attribution {
    font-size: 11px; /* Small, unobtrusive text size */
    text-align: center;
    position: absolute; /* Position it relative to the body/viewport */
    bottom: 20px; /* Place it near the bottom */
    width: 100%;
    color: var(--color-slate-500); /* Use the standard paragraph color */
    padding: 0 10px;
}

.attribution a {
    color: var(--color-slate-900); /* Use the dark heading color for links */
    text-decoration: none;
    font-weight: var(--font-weight-bold);
    transition: color 0.3s ease;
}

.attribution a:hover {
    color: #3685FF; /* A slightly brighter blue for better hover feedback */
    text-decoration: underline;
}