body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 48px;
  background: #f8f5f0b2;
}

* {
  color: #1a1612;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
}

h1 {
  font-family: Prodigy Sans;
  font-weight: 500;
  font-style: Medium;
  font-size: 48px;
  line-height: normal;

  letter-spacing: -1.5px;
  text-align: center;
  text-box: trim-both cap alphabetic;
  margin-bottom: 32px;

  @media screen and (min-width: 840px) {
    font-size: 80px;
    line-height: 80px;
  }
}

p {
  font-weight: 400;
  font-size: 24px;
  line-height: 32px;
  letter-spacing: 0px;
  text-align: center;
  max-width: 858px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;

  .flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 48px;
  }

  a:not(.btn) {
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0px;
    text-align: center;
    text-decoration: underline;
    text-decoration-style: solid;
  }

  .btn {
    text-decoration: none;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    border-radius: 100px;
    padding-top: 14px;
    padding-right: 20px;
    padding-bottom: 14px;
    padding-left: 20px;
    background-color: #b07f46;

    span {
      color: white;
      text-box: trim-both cap alphabetic;
    }
  }
}

.socials {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.social-container {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.social-icon {
  display: inline-block;
  width: 36px;
  height: 36px;

  background-color: #3e3e3c;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;

  transition:
    background-color 0.2s ease,
    scale 0.2s ease;
}

.social-icon:hover {
  scale: 1.1;
  background-color: #b07f46;
}

.icon-youtube {
  -webkit-mask-image: url("/svg/youtube.svg");
  mask-image: url("/svg/youtube.svg");
}

.icon-facebook {
  -webkit-mask-image: url("/svg/facebook.svg");
  mask-image: url("/svg/facebook.svg");
}

.icon-instagram {
  -webkit-mask-image: url("/svg/instagram.svg");
  mask-image: url("/svg/instagram.svg");
}

.icon-linkedin {
  -webkit-mask-image: url("/svg/linkedin.svg");
  mask-image: url("/svg/linkedin.svg");
}

.icon-tiktok {
  -webkit-mask-image: url("/svg/tiktok.svg");
  mask-image: url("/svg/tiktok.svg");
}