:root {
    /* colores */
    --color-white:  hsl(0, 0%, 100%);
    --color-lightGray: hsl(212, 45%, 89%);
    --color-greyBlue: hsl(220, 15%, 55%);
    --color-darkBlue: hsl(218, 44%, 22%);
    --color-a-blue: hsl(228, 45%, 44%);
    /*  font */
    --pSize: 14px;
    --impSize: 20px;
    /* media queries */
    --mediaMobile:  375px;
    --mediaDesktop: 1440px;
    /* sizes */
    --imgWidth: 90%;
    --pWdith: 80%;
}
* {
    box-sizing: border-box;   
}

.attribution { font-size: 11px;text-align: center;}
.attribution a { color: var(--color-a-blue)}

.card {
    background-color: var(--color-white);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: nowrap;
}
.qrImg {
    margin-top: 15px;
    align-items: center;
    border-radius: 10px;
}
.improve, .scan{
    font-family: 'Nanum Gothic', sans-serif;
    text-align: center;
}
.improve {
    line-height: 21px;
}

.scan {
    padding: 0%;
    line-height: 16px;
    color: var(--color-greyBlue);
}

/* :FOR MOBILE */
@media (min-width: 375px) {
    body {
        background-color: var(--color-lightGray);
    }
    .card {
        --mobMargin: 20%;
        margin-top: var(--mobMargin);
        margin-bottom: var(--mobMargin);
        margin-left: auto;
        margin-right: auto;
        width: 300px;
        height: 460px;
        
    }
    .qrImg {
        width: var(--imgWidth);
    }
    .improve {
        width: var(--imgWidth);
        padding-left: 4px;
        padding-right: 4px;
        font-size: var(--impSize);
        font-weight: 700;
    }
    .scan {
        width: var(--pWdith);
        font-size: var(--pSize);
        font-weight: 400;
        margin-bottom: 20px;
        margin-top: 0px;
    }
}

/* :FOR DESKTOP */
@media (min-width: 1440px ) {
    .card{
        --deskMargin: 20%;
        margin-top: var(--deskMargin);
        margin-bottom:var(--deskMargin);
        scale: 1.5;
        align-items: center;
        align-self: stretch;
    }
}