#loggerWrap {
  height: 100vh;
  display: flex;
  width: calc(200% / 3);
  text-align: right;
  text-overflow: ellipsis;
  display: flex;
  flex-direction: column;
  justify-content: end;
  margin-right: 16px;
  margin-left: auto;
}
#logger {
  height: 12px;
  overflow: hidden;
  transition: height 0.5s cubic-bezier(0, 1, 1, 1);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}
#logger > div::before {
  content: "› ";
}
#logger > div::after {
  content: "⬡ ";
}
#logger > div {
  line-height: 1;
  font-family: monospace;
  opacity: 0;
  animation: fadeIn 1s cubic-bezier(0, 1, 1, 1) forwards 0.5s;
  padding: 4px 0;
  white-space: nowrap;
  word-break: break-all;
  /* max-width: 100%; */
  color: #808080;
  transition: all 1.5s cubic-bezier(0, 1, 1, 1);
  /* height: 24px; */
  font-size: 12px;
}

#logger > div:last-child {
  color: #00ffff;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}