*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: black;
  overflow: hidden;
}
canvas {
  top: 50vh !important;
  transform: translate(-50%, -50%) !important;
}
#awake {
  visibility: hidden;
  z-index: -999;
}
#ui {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
}
#left-key,
#center-key,
#right-key {
  position: absolute;
  top: 0;
  bottom: 0;
}
#left-key {
  left: 0;
  right: 66.666666vw;
}
#center-key {
  left: 33.333333vw;
  right: 33.333333vw;
}
#right-key {
  left: 66.666666vw;
  right: 0;
}
button {
  display: block;
  padding: 7px 12px;
  border: 2px solid black;
  font-size: 19px;
  font-family: monospace;
}
.guide {
  position: absolute;
  top: 5vh;
  left: 5vh;
  width: 39.777777vh;
  height: 90vh;
  background: white;
}
.close-button {
  position: absolute;
  top: 5%;
  right: 48.5%;
  transform: translateX(71vh);
}
.menu {
  padding: 15px;
  position: absolute;
  top: 0;
  right: calc(50vw - 89vh);
  width: 128vh;
  height: 100vh;
  background: white;
  border-left: 1px solid black;
}
.menu textarea {
  margin-left: 62px;
  width: calc(128vh - 92px);
  height: calc(100vh - 100px);
  white-space: nowrap;
  resize: none;
}
.start-button {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 4px;
}
.range-label,
.age-label {
  vertical-align: top;
  font-size: 19px;
  margin: 0 5px;
  position: relative;
  top: 8px;
}
.range-list,
.age-list {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  margin: 0;
  list-style: none;
}
.range-list li,
.age-list li {
  float: left;
}
.range-list button,
.age-list button {
  padding-left: 8px;
  padding-right: 8px;
}
.range-list .active,
.age-list .active {
  background: dimgray;
  color: white;
}
.range-list button {
  font-size: 17px;
  padding-left: 8px;
  padding-right: 8px;
}
.age-list button {
  width: 84px;
}
.listen-button {
  display: inline-block;
  margin-left: 18px;
  width: 90px;
}
.music-row {
  position: relative;
  margin-top: 12px;
}
.music-list {
  position: absolute;
  left: 0;
  top: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}
.music-list-button {
  width: 50px;
  padding: 4px;
}
.music-list .active {
  background: dimgray;
  color: white;
}
.signature-input {
  margin-right: 10px;
  width: 100px;
}
.bonus-description {
  height: calc(100vh - 80px);
  overflow-y: auto;
}
.description {
  margin-left: 62px;
  padding-bottom: 50px;
  width: calc(128vh - 92px);
  height: calc(100vh - 100px);
  overflow-y: auto;
}
.description-heading {
  margin: 0 0 7px;
}
* + .description-heading {
  margin-top: 14px;
}
.description-paragraph {
  margin: 5px 0 0;
}
.description-subheading {
  display: inline-block;
  margin: 7px 4px 0 0;
}
canvas {
  width: 177.778%;
  height: 100%;
}