@font-face {
  font-family: "Roboto Thin";
  src: url("assets/roboto-thin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/montserrat-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
* { box-sizing: border-box; }
html { background: #fff; color: #2f2e2e; }
body { margin: 0; }
main {
  width: 100%;
  max-width: 648px;
  margin-inline: auto;
  padding: 70px 24px 150px;
  text-align: center;
}
.symbol {
  display: block;
  width: 311px;
  max-width: 100%;
  height: auto;
  margin: 0 auto 22px;
}
h1 {
  margin: 0;
  font: 100 48px/1.4 "Roboto Thin", Roboto, Arial, sans-serif;
  text-shadow: 0 4px 5px rgba(0, 0, 0, .4);
}
.description {
  max-width: 476px;
  margin: 5px auto 0;
  font: 100 21px/1.4 "Roboto Thin", Roboto, Arial, sans-serif;
}
.contact {
  margin: 14px 0 0;
  font: 400 17px/1.4 "Montserrat", Arial, sans-serif;
}
a { color: inherit; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
@media (max-width: 600px) {
  main { padding-top: 42px; padding-bottom: 70px; }
  .symbol { width: min(270px, 80vw); margin-bottom: 24px; }
  h1 { font-size: clamp(28px, 7.6vw, 42px); }
  .description { margin-top: 10px; font-size: 19px; }
  .contact { margin-top: 20px; font-size: 16px; }
}