@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap");

body {
  font-family: "Courier Prime", monospace;
  font-size: 16px;
  line-height: 1.5;
  color: #3a3d41;
  background-color: #e5e5e5;
  transition: background-color 1s ease;
}

.label {
  padding: 10px 15px 10px 15px;
  background-color: #37b7d3;
  margin-bottom: 60px;
  display: inline-block;
}

h3 {
  font-weight: 900;
}

header > div {
  padding: 30px 120px 60px 0;
}

section header img {
  margin: 0;
}

.intro {
  padding: 0 120px 60px 0;
}

section {
  padding: 20px;
}

header > div,
section > div {
  max-width: 1700px;
  margin: 0 auto;
}

.portfolio {
  background-color: #ffffff;
  padding: 0 120px 120px 120px;
  border-radius: 15px;
}

.footer {
  background-color: #3a3d41;
  padding: 60px 60px 60px 120px;
  border-radius: 15px;
  color: #fff;
}

.hero {
  background-color: #fff;
  padding: 0 120px 60px 120px;
  max-width: 1700px;
  margin: 0 auto;
  border-radius: 15px;
}

section img {
  margin: 0 auto;
  display: block;
  padding-top: 60px;
}

h1 {
  font-size: 45px;
  font-weight: 400;
  padding-bottom: 10px;
}

h2 {
  font-size: 21px;
  font-weight: 500;
}

section.intro {
  margin-top: 0;
}

.intro p {
  padding: 20px 0 0;
}

.intro a {
  display: inline-block;
  color: #3a3d41;
  font-weight: 700;
}

.intro a:hover {
  color: #37b7d3;
}

section.intro p {
  max-width: 600px;
}

.hats-16 {
  max-width: 75%;
  padding: 120px 0 40px 0;
}

.hats-18 {
  max-width: 80%;
  padding: 120px 0 40px 0;
}

.overflow img {
  max-width: 60%;
}

/* .wb-16 img {
  max-width: 90%;
} */

.footer strong {
  font-weight: 700;
  font-size: 21px;
}

@media (max-width: 1020px) {
  body {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
  }

  h1,
  h2 {
    max-width: 60%;
    padding-bottom: 10px;
    line-height: 1;
  }

  .label {
    margin-bottom: 30px;
  }

  .intro {
    padding: 0 80px 40px 0;
  }

  .hero {
    padding: 20px 60px 40px 60px;
  }

  .portfolio {
    padding: 0 60px 60px 60px;
  }

  section {
    padding: 20px 40px 20px 40px;
    margin: 0;
  }

  section img {
    padding-top: 20px;
  }

  .hats-16 {
    max-width: 75%;
    padding: 60px 0 20px 0;
  }

  .hats-18 {
    max-width: 80%;
    padding: 60px 0 20px 0;
  }

  .overflow img {
    max-width: 80%;
  }

  .footer {
    padding: 40px 60px 40px 60px;
  }
}

@media (max-width: 500px) {
  section {
    padding: 20px 15px;
  }
  .intro {
    padding: 0;
  }
  .hero {
    padding: 20px 40px 40px 40px;
  }
  .portfolio {
    padding: 0 40px 40px 40px;
  }
}
