.sprite {
  display: inline-block;
  flex-shrink: 0;
  background-image: url("/avatars.png");
  background-repeat: no-repeat;
  background-size: 600% 100%;
  width: 75px;
  height: 145px;
  vertical-align: middle;
}
.sprite-0 {
  background-position: 0% 50%;
}
.sprite-1 {
  background-position: 20% 50%;
}
.sprite-2 {
  background-position: 40% 50%;
}
.sprite-3 {
  background-position: 60% 50%;
}
.sprite-4 {
  background-position: 80% 50%;
}
.sprite-5 {
  background-position: 100% 50%;
}
.avatarbtn .sprite {
  width: 62px;
  height: 123px;
}
.scoreline .sprite {
  width: 34px;
  height: 62px;
}
.guesscards .sprite {
  width: 94px;
  height: 184px;
}
.logo {
  -webkit-text-stroke: 0;
  text-shadow:
    3px 0 #080e16,
    -3px 0 #080e16,
    0 3px #080e16,
    0 -3px #080e16,
    5px 5px #f46922,
    7px 7px #101a23;
  font-weight: 900;
}
.tabs a {
  padding-top: 5px;
  padding-bottom: 5px;
}
.hero h1 {
  font-size: 68px;
}
.intro {
  margin-top: 40px;
}
.inroom #side {
  display: block;
}
.inroom aside footer {
  display: block;
}
@media (max-width: 1350px) {
  .hero h1 {
    font-size: 58px;
  }
}
@media (max-width: 1100px) {
  .hero h1 {
    font-size: 49px;
  }
}
@media (max-width: 720px) {
  .hero h1 {
    font-size: 43px;
  }
  .avatarbtn .sprite {
    width: 60px;
    height: 120px;
  }
  .guesscards .sprite {
    width: 65px;
    height: 130px;
  }
  .inroom #side {
    display: none;
  }
}