* {
  box-sizing: border-box;
}

#wrapper, #outer {
  /* for 2d (normally has fitView) */
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

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

#wrapper {
  --height-left-handle: 70%;
  --height-right-handle: 40%;
  --height-delta: calc(30% / 12);
  --height-octb: 2rem;
}

#messageWrapper {
  top: 2rem;
}

.infoText {
  margin-top: 0.4rem;
}

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

.info.tempo {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 0;
  padding-top: 1.5rem;
}

.info.infoBoard {
  margin-top: 0;
  margin-bottom: 2rem;
}

.info.volumeInfo {
  margin-top: 2rem;
}

.info.infoControls {
  margin-bottom: 0;
  margin-top: 1.5rem;
}

#tempoSlider, #volumeSlider {
  width: 100%;
  max-width: 40rem;
  height: 2rem;
  margin-bottom: 0.75rem;
  padding: 0 0.5rem 0 0.5rem;

  display: flex;
  flex-direction: row;
}

#tempoSlider {
  margin-top: 0.5rem;
}

#tempoRange, #volumeRange {
  width: 100%;
}

img.volumeIcon {
  pointer-events: none;
  width: 1.2rem;
  height: 1.2rem;
}

#linkTop {
  margin-bottom: 1.6rem; /* space for message. */
  width: 100%;
  display: flex;
}

#okButtonLink {
  margin-bottom: 0.5rem;
  margin-left: auto;
  height: 2rem;
  width: 6rem;
}

#visualW {
  --string-radius: 0.5rem;
  --width-pianokey-max: 4.6rem;
  --width-pianokey-min: 0.8rem;
  --piano-trim-half: calc(var(--string-radius) * 0.3);
  --height-box-shadow: calc(2 * var(--piano-trim-half));
  --controls-margin-top: calc(var(--height-octb) + 1rem + var(--height-box-shadow));
  --octs: 1;
  --keys: 7;

  position: relative;
  width: 100%;
  padding: 0;
  margin-top: 1rem;

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

#controls {
  position: relative;
  max-width: 40rem;
  width: 100%;
  padding: 0.5rem;

  display: grid;
  grid-template-columns: 1fr 4rem 1fr;
  grid-template-rows: 1fr;
}

#visual {
  position: relative;
  width: calc(100% - 1rem);
  margin-bottom: var(--controls-margin-top);

  display: flex;

  z-index: 2;
}

#outer.fullScreen > #wrapper > #visualW > #visual {
  max-width: 100%;
}

#visualSVG {
  max-height: 100%;
  max-width: 100%;
  height: 100%;
  width: 100%;

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

#ratioSVG {
  width: 100%;
  height: 100%;
}

#playB {
  margin-right: 0.5rem;
}

#linkButton, #handnessButton, #editButton, #fullscreenButton {
  cursor: pointer;
  margin-left: 0.5rem;
}

#linkButton, #infoButton, #handnessButton, #editButton, #fullscreenButton {
  z-index: 2;
  width: 2rem;
  height: 2rem;

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

#handnessButton {
  width: auto;
}

#fullscreenButton {
  user-select: none;
  display: flex;
}

#handnessButton.on, #editButton.on {
  border: 0.15rem solid var(--color-emphasis-border);
}

#editButton.on {
  background-color: var(--color-emphasis-fill);
}

#editButton.on.down {
  background-color: var(--color-primary-border);
}

#infoW {
  display: flex;
  justify-content: flex-start;
}

#infoW.on {
  position: static;
  width: 100%;
}

#rightW {
  grid-column: 2 / span 2;
  display: flex;
  justify-content: flex-end;
}

#infoButton {
  padding: 0;
}

#infoButton.on {
  margin: 0;
  width: auto;
  padding: 0 0.4rem 0 0;
}

#linkIcon, #infoIcon, #handnessIcon, .drumIcon, #playIcon, #stringsIcon, #editIcon, #fullscreenIcon {
  pointer-events: none;
  height: 100%;
}

#infoIcon {
  padding: 0.3rem;
}

#playIcon {
  max-height: 2rem;
}

#ttButton {
  margin-top: 0.5rem;
}

#howtoEmbed {
  margin-top: 0.5rem;
  border: 0.12rem solid var(--color-emphasis-border);
}

#links {
  width: 100%;
  max-width: 40rem;
  padding: 0 0.5rem 0 0.5rem;

  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

.linksLine {
  margin: 0.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.hugTop {
  margin-top: 0;
}

.url {
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0;
  display: flex;
  width: 100%;
}

#linkEmbedding {
  font-size: 1.1rem;
}

.copy {
  width: 1.1rem;
  margin-top: 0;
  padding: 0;
  border: none;
  display: flex;
}

#hereEmbedding {
  margin-top: 2rem;
}

svg.svgWords {
  background-color: var(--color-transparent);
  /* Broke epiphany. */
  /* height: 100%; */
}

#bpmW {
  font-size: 2rem;
  display: flex;
  align-items: baseline;
}

#bpmHackW {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: 1fr;
}

#bpmTextHack, #bpmText {
  grid-column: 1 / span 1;
  grid-row: 1 / span 1;

  font-size: 3rem;
  margin-right: 0.4rem;

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

#spbW {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  visibility: hidden;
}

#visualSVG.showSpb > #spbW {
  visibility: visible;
}

#buttonW {
  margin-top: 2.4rem;
  width: 100%;
  max-width: 20rem;
  display: flex;
}

#volumeSlider {
  max-width: 26rem;
}

#newB {
  margin-left: auto;
}

#rangeW {
  grid-column: 1 / span 3;
  grid-row: 2 / span 1;

  margin-top: 2rem;
  width: 100%;

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

#rangeH {
  margin-bottom: 0.5rem;
  font-weight: bold;
  width: 100%;
  max-width: 30rem;
  display: flex;
}

#rangeMM {
  width: 100%;
  margin-bottom: 0.3rem;
  display: flex;
  justify-content: center;
}

#bpmRange, #rangeMM {
  max-width: 40rem;
}

#bpmRange > .sliderPart {
  border-left-width: 0.24rem;
}

#gearI, #linkI {
  width: 1rem;
  height: 1rem;
}

#hide {
  white-space: nowrap;
}

#trace {
  height: 100%;
}

#rangeW.retracted,
#infoButton.retracted,
#handnessButton.retracted,
#editButton.retracted,
#fullscreenButton.retracted,
#controls.retracted,
#linkButton.retracted,
#links.retracted,
#visualW.retracted,
#tempoSlider.retracted,
#volumeSlider.retracted {
  display: none;
}
