:root {
    --White: hsl(0, 0%, 100%);
    --Light-gray: hsl(212, 45%, 89%);
    --Grayish-blue: hsl(220, 15%, 55%);
    --Dark-blue: hsl(218, 44%, 22%);
}

body {
    background-color: var(--Light-gray);
    font-family: 'Outfit', sans-serif;
    font-size: 1em;
    font-weight: 400;
}
main {
    display: grid;
    place-items: center;
    height: 100vh; /* it will not align vertically without */
}

.card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--White);
    width: 20em;
    height: 32em;
    padding: 1em ;
    border-radius: 1.5em;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    margin: 0;
}

.qr-code {
    width: 20em;
    height: 20em;
    border-radius: 0.5em;
}

.text_title {
    color: var(--Dark-blue);
    font-weight: 700;
    text-align: center;
    padding: .5em .5em 0;
}

.text_subtitle {
    color: var(--Grayish-blue);
    text-align: center;
    padding: 0 1.5em;
}

.attribution {
    display: none;
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}