html,
body {
   margin: 0;
   height: 100%;
}
h1 {
   font-family: "Outfit";
   font-size: 15px;
   font-weight: 700;
   color: hsl(218, 44%, 22%);
}
p {
   font-family: "Outfit";
   font-size: 11px;
   font-weight: 400;
   color: hsl(218, 8%, 48%);
}
.background-main {
   background-color: hsl(212, 45%, 89%);
   display: flex;
   align-items: center;
   justify-content: center;
}
.mainframe {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   border: solid;
   border-color: transparent;
   background-color: hsl(0, 0%, 100%);

   width: 200px;
   height: 340px;
   border-radius: 10px;
   box-shadow: 10px 10px 10px rgba(187, 187, 187, 0.521);
   padding: 5px;
}
.upperframe {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
}
.imgframe {
   width: 100%;
   height: 100%;
   overflow: hidden;
   border: solid;
   border-radius: 10px;
   border-color: transparent;
}
.QR-img {
   width: 100%;
   height: 100%;
}
.bottomframe {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 10px;
}
@media only screen and (max-width: 600px) {
   .mainframe {
      width: 270px;
      height: 390px;
   }
}