.title {
  left: 60%;
}
.content {
  height: 32.2vw;
  top: 27.1%;
}

.sleepMode {
  bottom: 7vh;
  right: 45%;
  transition: opacity 2s ease-in-out;
}

.messages {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.message {
  width: 10.2vw;
  height: 7.2vw;
  position: absolute;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}
.message.large {
  height: 10vw;
}
.message svg,
.message polygon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.message polygon {
  stroke-width: 0.4vw;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
}
.message img {
  position: absolute;
  height: 99%;
  top: 0.5%;
  width: auto;
  display: block;
  left: 9.4vw;
}
.message .text {
  padding: 0.75vw 0.6vw 0;
  position: relative;
}
.message h3 {
  font-size: 1.2vh;
  margin: 0;
  letter-spacing: 0.1vh;
}
.message p {
  font-size: 1vh;
  line-height: 1.8;
  margin-top: 0.2vw;
}
.message.active {
  opacity: 1;
}

.key {
  color: var(--gray-light-color);
  vertical-align: middle;
  padding: 31vw 0 0 10vw;
  font-size: 0.75vw;
  line-height: 1.5;
  transition: opacity 2s ease-in-out;
  opacity: 0;
}
.key > div {
  display: inline-block;
  vertical-align: middle;
  margin-right: 1vw;
}
.key .line {
  width: 5vw;
  height: 0.2vw;
  background: var(--highlight-color);
  margin-top: 1vh;
  position: relative;
  opacity: 0.3;
  transition: opacity 2s ease-in-out;
}
.key .line:nth-child(even) {
  width: 3vw;
}
.key .line.active {
  opacity: 1;
}
.key .line .circle {
  display: block;
  position: absolute;
  width: 0.8vw;
  height: 0.8vw;
  border-radius: 50%;
  background: var(--highlight-color);
  top: 50%;
  margin-top: -0.4vw;
  right: 0;
}
.key .bracket svg {
  height: 3vw;
  width: 0.676vw;
  display: block;
}
.key .bracket polyline {
  stroke: var(--gray-light-color);
  stroke-width: 0.3vw;
  fill: none;
  stroke-miterlimit: 10;
}
.sleeping .key {
  opacity: 0;
}

#instruction.active,
#key.active {
  opacity: 1;
}

.ui {
  width: 27.25vw;
  padding-bottom: 0;
}
.ui button {
  margin-bottom: 1.5rem;
}