@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto Condensed";
  src: url("../fonts/RobotoCondensed-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Qlassik Bold";
  src: url("../fonts/QlassikBold_TB.ttf") format("truetype");
  font-display: swap;
}

.logo__wordmark {
  display: block;
  width: min(400px, 90%);
  height: auto;
  overflow: visible;
}

.logo__wordmark text {
  font-family: "Qlassik Bold", sans-serif;
  font-size: 177px;
  font-weight: 400;
  letter-spacing: -6.25px;
}

@media (prefers-reduced-motion: reduce) {
  .logo__wordmark animate { display: none; }
}