body{
    width:100vw;
    height:100vh;
    background-color:hsl(212, 45%, 89%);
    overflow-x: hidden;
}

.QR-code-component{
    background-color:  hsl(0, 0%, 100%);
    width:23vw;
    box-sizing: border-box;
    height:400px;
    margin-left:35vw;
    margin-top:5vh;
    border-radius:8px;
}
#QR-img{
     width:90%;
     padding:15px 5% 0 5%;
     border-radius: 8% ;
}
.QR-header{
     padding:0 3px 0 15px;
     color:hsl(218, 44%, 22%);
     font-family: sans-serif;
}
.about{
    font-size:15px;
    font-weight:400;
    text-align: center;
    padding:0 10px 0 10px;
    color:hsl(216, 15%, 48%);
}
.attribution{
     font-weight:bolder;
     font-style:italic;
     font-size: 11px; 
     text-align: center; 
     padding-top:10px;
}
.attribution a {
     color: hsl(228, 45%, 44%); 
}
@media (max-width:768px){
    body{
        width:100%;
        height:100%;
    }
    .QR-code-component{
        background-color:  hsl(0, 0%, 100%);
        width:70%;
        height:100%;
        margin-left:20vw;
       border-radius:8px;
    }
    #QR-img{
         width:90%;
         padding:15px 5% 0 5%;
    }
    .QR-header{
        padding-left:20px;
        padding-right:5px;
    }
    .about{
        padding-bottom:10px;
    }
}