@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200&family=Indie+Flower&family=Major+Mono+Display&family=Outfit&family=Raleway:wght@300&family=Titillium+Web&display=swap');

:root {
    --white: hsl(0, 0%, 100%);
    --light-gray: hsl(212, 45%, 89%);
    --grayish-blue: hsl(220, 15%, 55%);
    --dark-blue: hsl(218, 44%, 22%);
    --attr-color: hsl(228, 45%, 44%);
    --main-font: 15px;
  }

  body,
  html {
      background-color: var(--light-gray);
      font-family: 'Major Mono Display', monospace;
      font-family: 'Outfit', sans-serif;
      font-weight: 400;
      height: 100;
      margin: 0;
      padding: 0;
      width: 100%;
  }

@media screen and (min-width: 375px) {
    .container {
        width: 80%;
        padding: 5%;
        border: 1px solid none;
        border-radius: 3%;
        margin: 30% auto;
        display: flex;
        flex-direction: column;
        align-content: space-between;
        background-color: var(--white);
    }

    img {
        width: 100%;
        height: auto;
        border-radius: 3%;
    }

    .qr-image {
        margin-bottom: 10%;
    }

    .qr-text-heading {
        font-weight: bolder;
        text-align: center;
        color: var(--dark-blue);
        font-size: calc(var(--main-font) * 1.6);
        width: 90%;
        margin: auto;
        margin-bottom: 5%;
    }

    .qr-text {
        color: var(--grayish-blue);
        font-size: var(--main-font);
        text-align: center;
        width: 85%;
        margin: auto;
        margin-bottom: 5%;
    }

    .attribution {
        font-size: calc(var(--main-font) - 4px);
        text-align: center;
        width: 100%;
        margin: 0 0 2% 0;
    }

    .attribution a {
        color: var(--attr-color);
    }
}

@media screen and (min-width: 600px) {

    .container {
        width: 40%;
        padding: 2%;
        border-radius: 5%;
    }

    .qr-text-heading {
        font-size: calc(var(--main-font) * 1.3);
    }

    .qr-text {
        font-size: calc(var(--main-font) - 2px);
    }

}

@media screen and (min-width: 860px) {
    .container {
        width: 35%;
        margin-top: 20%;
    }

    .qr-text-heading {
        font-size: calc(var(--main-font) * 1.5);

    }

    .qr-text {
        font-size: calc(var(--main-font) + 2.7px);
    }
}

@media screen and (min-width: 1020px) {
    .container {
        width: 30%;
    }

    .qr-text-heading {
        font-size: calc(var(--main-font) * 1.6);
    }

    .qr-text {
        font-size: calc(var(--main-font) + 2.8px);
    }
}

@media screen and (min-width: 1150px) {
    .container {
        width: 25%;
        margin-top: 15%;
    }

    .qr-text-heading {
        font-size: calc(var(--main-font) * 1.5);
    }

    .qr-text {
        font-size: calc(var(--main-font) + 3px);
    }
}

@media screen and (min-width: 1440px) {
    .container {
        padding: 1%;
        width: 15%;
        margin-top: 10%;
    }

    .qr-text-heading {
        font-size: calc(var(--main-font) * 1.5);
    }

    .qr-text {
        font-size: calc(var(--main-font) + 2.5px);
    }
}