html{
  font-size: 80%;
}
body {
      background-color: hsl(212, 45%, 89%);
      font-family: 'Outfit', 'sans-serif';
      text-align: center;
    }

    section#for-card {
      padding: 10em 0;
      padding-top: 11em;
    }

    h1 {
      color: hsl(218, 44%, 22%);
    }

    p {
      color: hsl(216, 15%, 48%);
    }

    .the-card {
      background-color: hsl(0, 0%, 100%);
      width: 20%;
      margin: 0 auto;
      padding: 1em;
      border-radius: 10px;
    }

    .the-card img {
      width: 100%;
      border-radius: 10px;
    }

    @media (max-width: 1000px) {
      .the-card {
        width: 40%;
      }
    }

    @media (max-width: 600px) {
      .the-card {
        width: 60%;
      }
    }

    @media (max-width: 375px) {
      .the-card {
        width: 80%;
      }
    }


    .attribution {
      font-size: 11px;
      text-align: center;
    }

    .attribution a {
      color: hsl(228, 45%, 44%);
    }