/* # Front-end Style Guide

## Layout

The designs were created to the following widths:

- Mobile: 375px
- Desktop: 1440px

## Colors

- White: hsl(0, 0%, 100%)
- Light gray: hsl(212, 45%, 89%)
- Grayish blue: hsl(220, 15%, 55%)
- Dark blue: hsl(218, 44%, 22%)

## Typography

### Body Copy

- Font size (paragraph): 15px

### Font

- Family: [Outfit](https://fonts.google.com/specimen/Outfit)
- Weights: 400, 700 */

body {
  background-color: hsl(212, 45%, 89%);
}
.box {
  background-color: hsl(0, 0%, 100%);
  height: 390px;
  width: 255px;
  border-radius: 20px;

  margin-top: 8%;
}
.qrcode {
  width: 232px;
  height: 232px;
  margin-top: 11px;
  margin-left: 12px;
  border-radius: 12px;
}
.text {
    color:  hsl(218, 44%, 22%);
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    margin-left: 21px;
    margin-right: -5px;
    margin-top: 8px;
    font-weight: 640;
    font-size: 22px;
}
.line2 {    color:  hsl(218, 44%, 22%);

font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
margin-left: 14px;
margin-right: -5px;
margin-top: -42px;
font-weight: 640;
font-size: 22px;
}
.paragraph1 {color: hsl(220, 15%, 55%);
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-left: 29px;
  margin-right: -5px;
  margin-top: -27px;
  font-weight: 400;
  font-size: 14px;
}
.paragraph2 {
    color: hsl(220, 15%, 55%);
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-left: 19px;
  margin-right: 14px;
  margin-top: -14px;
  font-weight: 400;
  font-size: 14px;
}
.paragraph3 {color: hsl(220, 15%, 55%);
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  margin-left: 83px;
  margin-right: 0px;
  margin-top: -13px;
  /* font-weight: 640; */
  font-size: 14px;
}
@media screen and (min-width:375px) {
    .box{
        margin-left: 20%;
        margin-top: 15%;
    }
}
/* @media screen and (min-width:1440px) {
    .box{
        margin-left: 20%;
        margin-top: 15%;
    }
} */
@media screen and (min-width:600px) {
    .box{
        margin-left: 40%;
        margin-top: 10%;
    }
}