:root {
  --header-height: 2.9rem;
}

* {
  box-sizing: border-box;
}

div.outer, div.wrapper {
  min-width: 20rem;
  min-height: 30rem;
  min-height: 100dvh;
}

div.wrapper {
  min-height: calc(30rem - var(--header-height));
}

div.outer.infoView,
div.wrapper.infoView {
  /* % instead of vh to prevent urlbar hiding */
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  width: 100vw;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: scroll;
  overflow-x: scroll;

  display: flex;
  flex-direction: column;
  align-items: center;
}

div.wrapper.infoView,
div.wrapper.fitView {
  min-height: calc(100% - var(--header-height));
  max-height: calc(100% - var(--header-height));
  height: calc(100% - var(--header-height));
  top: var(--header-height);
}

div.wrapper.infoView {
  width: 100%;
  overflow-y: visible;
  overflow-x: visible;
}

#headingWrapper {
  width: 100%;
  max-width: 100%;
}

#heading {
  grid-template-rows: minmax(2.4rem, max-content);
}

#messageWrapper {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 2rem;
  height: auto;
  z-index: 10;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#message, #result {
  background-color: var(--color-primary-light);
}

#messageWrapper > #result {
  position: static;
  width: 100%;
  max-width: 50rem;
}

.sharedCell {
  grid-row: 1 / 1;
  grid-column: 1 / 1;
}

#contentWrapper {
  max-width: none;
  display: flex;
  flex-direction: column;
}

.wrapper > div.info {
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
}

.wrapper > div.info.infoHappy {
  padding: 0.5rem 0.5rem 1.5rem 0.5rem;
}

.info {
  width: 100%;
  max-width: 50rem;
  padding: 0.5rem 1.5rem 0.5rem 1.5rem;
  margin-bottom: 0.5rem;

  background-color: var(--color-primary-fill);
  border-radius: 2rem 2rem 0.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info.retracted {
  display: none;
}

.info.volumeInfo {
  margin-bottom: 1rem;
}

.info.divisions, .info.volumeInfo {
  margin-top: 0.5rem;
}

.info.infoHappy {
  border-radius: 0;
  max-width: 100%;
  margin-bottom: 0;
}

.infoText {
  width: 100%;
  max-width: 30rem;
}

.infoTextSpace {
  margin-top: 0.5rem;
}

.info.top {
  border-radius: 0;
  margin-bottom: 0;
  padding-bottom: 1rem;
}

.happy {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

.subheading {
  font-weight: bold;
  margin-top: 1rem;
  margin-bottom: 0.5rem;

  display: flex;
  justify-content: center;
}

.subheading.main {
  font-size: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.subheading.loop, .subheading.volumeSub {
  margin-bottom: 0;
}

#hide, #midi {
  padding-left: 0.5rem;
}

#bottom {
  width: 100%;
  max-width: 50rem;

  display: flex;
}

#bottomLeft {
  font-size: 0.85rem;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}

#bottomLeft > a, #darkButton {
  padding-top: 0.7rem;
}

#bottomRight {
  margin-left: auto;

  display: flex;
  flex-direction: column;
}

#ttButton {
  padding: 1rem;
}

#android {
  border: 0.12rem solid var(--color-emphasis-border);
}