style.css

/* ============== STYLE SHEET FOR QR CODE COMPONENT ============= */

/* COLOR VARIABLES */
:root {
    --white: hsl(0, 0%, 100%);
    --light-grey: hsl(212, 45%, 89%);
    --grayish-blue: hsl(218, 44%, 22%);
    --grey: grey;

    font-size: 15px;
    --font-primary: "Outfit", sans-serif;
    --font-wt-body: 400;
    --font-wt-bold: 700;
}

/* STYLES */

/* Mobile: 375px; Desktop: 1440px */
body {
    background-color: var(--light-grey);
}

.container {
    display:flex;
    flex-direction: column;
    flex-wrap: nowrap;
    flex: 0 0 40%;
    justify-content: center;
    align-items: center;
    
    min-width: 375px;
    width: 100%;
    max-width: 1440px;
    height: 100vh;
}

.card {    
    background-color: var(--white);

    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
    min-width: 330px;
    max-width: 350px;

    padding: 15px;
    margin-inline: 4rem;
    border-radius: 15px;       
}

.card>img {
    
    border-radius: 15px; 
    width:100%;

}


.card>h1 {
    padding: 10px;
    margin: 1rem 1rem auto auto;

    font-size: 1.5em;
    font-family: var(--font-primary);
    font-weight: var(--font-wt-bold); 
    color: var(--grayish-blue);

    text-align: center;
}

.card>span {   
    margin-bottom: 1.5rem;
    font-family: var(--font-primary);
    font-size: 1.2em;
    font-weight:var(--font-wt-body);
    text-align: center;
    
    color: var(--grey);

}

footer {
    display: flex;
    justify-content: center;
    margin-inline: auto;
    color: var(--grayish-blue); 

}