/* Hero logo, season tag, and navbar branding used on the home page and in the admin/game nav bars. */

.logo-hero {
  position: relative;
  display: inline-block;
}

.logo-hero h1 {
  font-size: 96px;
}

.season-tag {
  font-family: "BBH Bartle", "Baskervville", Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", Times, serif;
  color: #FF7474;
  position: absolute;
  top: 10pt;
  right: -75pt;
  transform: rotate(15deg);
}

.invite-only {
  font-family: "BBH Bartle";
}

.navbar-logo-hero {
  position: relative;
  display: inline-block;
}

.navbar-logo-hero .season-tag {
  font-size: 0.4em;
  top: 5pt;
  right: -24pt;
}

@keyframes almond-saying-hide {
  from {
    opacity: 1;
    max-height: 3rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  to {
    opacity: 0;
    max-height: 0;
    margin-top: 0;
    padding-top: 0;
    padding-bottom: 0;
  }
}

@media (max-width: 576px) {
  .logo-hero h1 {
    font-size: 40px;
  }

  .season-tag {
    font-size: 0.5em;
    top: 2pt;
    right: -30pt;
  }

  .invite-only {
    font-size: 14px;
  }
}

/*
 * Below Bootstrap's `sm` breakpoint the saying wraps onto its own full-width row
 * (Bootstrap has no responsive `w-*` utility, so the width is set here rather
 * than in the markup), then auto-hides to reclaim vertical space on small screens.
 */
@media (max-width: 575.98px) {
  .almond-saying {
    width: 100%;
    overflow: hidden;
    animation: almond-saying-hide 0.5s ease-in forwards;
    animation-delay: 4s;
  }
}