@media screen and (max-height: 35rem) {
  :root {
    --header-height: 0.5rem;
  }

  #heading {
    display: none;
  }

  #tinyLogoWrapper {
    display: block;
  }
}

div.outer,
div.wrapper {
  min-width: auto;
}

#contentWrapper {
  margin-top: 2rem;
  padding-top: 0;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 40rem;
}

#splashW {
  width: 100%;
  display: flex;
  justify-content: center;
}

#splash {
  width: 100%;
  max-width: 30rem;
  display: var(--dark-none-or-block);
}

#splashDark {
  width: 100%;
  max-width: 30rem;
  display: var(--dark-block-or-none);
}

#topButtons,
#bottomW {
  display: none;
}

#joinUnder {
  margin-top: 4rem;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

#bottomButtons {
  width: 100%;
  margin-top: 3rem;
  padding-right: 1rem;
  max-height: 4rem;

  display: flex;
  justify-content: flex-end;
}

#addButton {
  min-height: 3rem;
  max-width: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

#joinW {
  margin-top: 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#joinH {
  font-size: 1.2rem;
  font-weight: bold;
  margin-bottom: 1rem;
}

#joinWBottom {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#game {
  max-width: min(100%, 14rem);
  width: 100%;
  height: 4rem;
  font-size: 2rem;
  text-align: center;
}

#joinButton {
  margin-top: 1rem;
  font-size: 1.2rem;
}

#space {
  height: 100%;
  padding: 0;
}

#footerWrapper {
  width: 100%;
}

#splashText {
  fill: var(--color-emphasis-fill);
}

.splashHole {
  fill: var(--color-primary-light);
}

@media screen and (max-height: 35rem) and (min-width: 30rem) {
  #messageWrapper {
    padding-top: 0;
  }

  #contentWrapper {
    flex-direction: row;
  }

  #topButtons {
    width: auto;
  }

  #joinWBottom {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
  }

  #joinButton {
    margin-top: 0;
    margin-left: 0.5rem;
  }
}

@media screen and (max-height: 35rem) {
  #topButtons, #joinW, #joinUnder, #contentWrapper {
    margin-top: 1rem;
  }
}

@media screen and (max-height: 25rem) {
  #topButtons, #joinW, #joinUnder, #contentWrapper {
    margin-top: 0;
  }
}

@media screen and (max-height: 35rem) and (min-width: 30rem) {
  #joinUnder {
    margin-top: 4rem;
  }
}

@media screen and (max-height: 15rem) and (min-width: 30rem) {
  #joinUnder {
    margin-top: 2rem;
  }
}

#splashDark.retracted,
#splash.retracted {
  display: none;
}