body {
  margin: 0;
}

#controls {
  position: fixed;
  width: 100%;
  background-color: white;
  display: flex;
}

#controls > div {
  flex-grow: 1;
}

.waveform-container {
  position: relative;
  height: 60px;
}

#waveform,
#waveform-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
}

.scrubber {
  display: grid;
  grid-template-rows: 10px 20px;
  background: lightgrey;
}

.bar {
  grid-row: 1 / 2;
}

.bar-overlay {
  background: red;
  height: 100%;
}

li.highlight {
  background-color: yellow;
}

.markers {
  grid-row: 2 / 3;
  position: relative;
}

.marker {
  position: absolute;
  box-sizing: border-box;
  border-left: solid 2px black;
  border-bottom: solid 5px black;
  height: 100%;
  width: 5px;
}

.text-areas {
  padding-top: 160px;
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: 20px auto;
  grid-gap: 2px;
}

#url {
  width: 300px;
}

#intervals-label,
#kana-label,
#kanji-label {
  grid-row: 1 / 2;
}

#intervals,
#kana,
#kanji {
  grid-row: 2 / 3;
}

#intervals,
#intervals-label {
  min-width: 250px;
  grid-column: 1 / 2;
}

#kana,
#kana-label {
  grid-column: 2 / 3;
}

#kanji,
#kanji-label {
  grid-column: 3 / 4;
}

#intervals input {
  width: 100px;
}

#kanji,
#kana {
  border: solid 1px lightgrey;
  min-height: 200px;
  white-space: pre;
  overflow-x: auto;
  font-size: 16px;
}

#json {
  width: 100%;
  height: 200px;
}

div#youtube {
  flex-grow: 0;
}

iframe#youtube {
  width: 240px;
  height: 135px;
}