:root {
  --sans-serif-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif-font: ui-serif, Georgia, "Times New Roman", "Noto Serif CJK SC", "Songti SC", serif;
  --code-font: ui-monospace, SFMono-Regular, "Cascadia Code", Consolas, monospace;
}

.content,
body,
button,
input,
textarea {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.home-socials {
  margin-top: 1.25rem;
}

.home-socials ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-socials li {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.home-socials img {
  display: block;
  height: 1.4rem;
  width: 1.4rem;
}

#home-banner-header {
  text-wrap: balance;
}

.encoded-contact {
  display: inline-block;
}

.encoded-email {
  min-inline-size: 27ch;
}

.encoded-phone {
  min-inline-size: 16ch;
}

@media only screen and (max-width: 600px) {
  #banner-container-home {
    display: grid;
    gap: 1.25rem;
  }

  #banner-container-home #home-banner-text {
    display: contents;
  }

  #banner-container-home #home-banner-header {
    margin-block-end: 0;
  }

  #banner-container-home #image-container-home {
    justify-self: center;
    width: min(54vw, 12rem);
  }

  #banner-container-home #banner-home-subtitle {
    margin-block-start: 0;
  }

  #banner-container-home .home-socials {
    margin-top: 0;
  }
}

@media only screen and (max-width: 360px) {
  #banner-container-home #home-banner-header {
    font-size: 2rem;
    line-height: 1.18;
  }
}