/*
Import the fonts required by the style guide
*/
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

/* 
CSS custom properties set in :root become usable throughout the rest
of the CSS and can be used in any css rule using the following syntax:

To setup the variable:
--main-color: blue;

To use the variable:
color: var(--main-color);

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties 

Styles from style guide set in variables for use throughout the CSS.
*/
:root {
    /* widths for various device sizes */
    --mobile-width: 375px;
    --desktop-width: 1440px;

    /* colors per style guide */
    --white: hsl(0, 0%, 100%);
    --light: hsl(212, 45%, 89%);
    --greyish: hsl(220, 15%, 55%);
    --dark: hsl(218, 44%, 22%);

    font-size: 15px; /* per style guide */
}

body {
    
    font-family: 'Outfit', sans-serif;
    background: var(--light);
}

.qr-code {
    /* 
    using rem (relative units) will set the font to a percentage
    of the font size set on the root element.
    .8rem sets the font size to 80% of the 15px set 
    on the root element
    */
    font-size: .8rem; 
    width: calc(var(--mobile-width) - 80px); /* guide linked in README */
    border: 1px solid var(--light);
    margin: 140px auto;
    background: var(--white);
    border-radius: 5%;
    padding: 20px;
}

.qr-code-image {
    width: 100%;
    border-radius: 5%;
}

.qr-code-title {
    text-align: center;
    color: var(--dark);
    font-weight: 700;
}

.qr-code-instructions {
    text-align: center;
    font-weight: 400;
    color: var(--greyish);
    font-size: 1.1rem;
}