#heading {
  grid-column: 1 / span 7;
}

#messageWrapper {
  height: 3rem;

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

#message {
  font-size: 1.2rem;
}

div.playWrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

#playButton {
  height: 4rem;
  width: 6rem;

  margin: 0.5rem;
}

#playButton.down {
  background-color: var(--color-emphasis-border);
}

#bpmSig {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

#beatsWrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

#timeSig {
  margin-right: 0.5rem;
}

.beat {
  font-size: 1.8rem;
  display: flex;
  padding: 0.5rem;
}

.beat.on {
  font-weight: bold;
}

#setupWrapper {
  width: 100%;
  max-width: 40rem;

  display: flex;
  align-items: start;
  justify-content: start;
  flex-wrap: wrap;
}

.typeButton {
  width: 3rem;
  height: 3rem;
}

img.typeImg {
  width: 100%;
  height: 100%;
}

#volumeWrapper {
  margin-left: auto;
  margin-bottom: 1rem;

  width: 100%;

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

#infoWrapper {
  width: 100%;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

#songTitle,
#artistName {
  display: flex;
  align-items: center;
  justify-content: center;
}

#buttonWrapper {
  margin-bottom: 1rem;

  width: 100%;

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

#nextButton,
#previousButton {
  height: 3rem;
  width: 5rem;
}

#nextButton {
  margin-left: auto;
}

img.volumeIcon {
  width: 1.6rem;
  height: 1.6rem;

  margin-left: 0.4rem;
  opacity: 0.6;
}

img.volumeIcon.soft {
  width: 1.1rem;
  height: 1.1rem;
}

#volumeLoudest.muted {
  opacity: 0.2;
}

img.volumeIcon.soft.muted {
  opacity: 1;
}