.title {
  left: 62%;
}
.content {
  width: 50%;
  margin-left: -27%;
  top: 27.5%;
}

.sleepMode {
  right: 45%;
}

.graphics {
  position: relative;
  height: 29.4vw;
}

.messages {
  position: absolute;
  width: 12vw;
  right: -11vw;
  top: 6.5vh;
  height: 50vh;
}
.messages,
.message-status {
  letter-spacing: 0.05rem;
  opacity: 1;
  transition: opacity 2s ease-in-out;
  -webkit-transform: translateZ(0);
}
.sleeping .messages,
.sleeping .message-status {
  opacity: 0;
}
.message-status > div {
  width: 80%;
  margin-left: 18%;
}
.message-status h2 {
  font-size: 1vw;
  margin: 0.5vw 0 0.667vw;
  color: var(--gray-light-color);
  line-height: 1.5;
}
.message-status h2 strong {
  color: var(--highlight-color);
}
.message-status .bracket {
  display: block;
  width: 97%;
  height: auto;
  margin-top: 1vh;
}
.message-status .bracket polygon {
  fill: var(--gray-light-color);
}

.message {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}
.message.active {
  opacity: 1;
}
.message p {
  margin: 0;
  line-height: 1.8;
  font-size: 0.8vw;
}

.sidebar {
  opacity: 0;
  height: 5vw;
  display: none;
}
.sidebar.active {
  opacity: 1;
}
.sidebar h3 {
  letter-spacing: 0.1vh;
  font-size: 1.3vh;
}
.sidebar p {
  font-size: 1vh;
  line-height: 1.8;
  font-weight: normal;
  letter-spacing: 0.1vh;
}
.sidebar > div {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
.sidebar > div:nth-child(1) {
  animation: fadeInOut 40s 0s infinite linear;
}

.sidebar > div:nth-child(2) {
  animation: fadeInOut 40s 20s infinite linear;
}


@keyframes fadeInOut {
 0% {
   opacity: 0;
 }
 4% {
   opacity: 1;
 }
 46% {
   opacity: 1;
 }
 50% {
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}