body, html {
  margin: 0;
  padding: 0;

  background-color: #000;

  font-family: serif;
}

.vnt-fullscreen-wrapper {
  width: 100vw;
  height: 100vh;
}

.vnt-aspect-ratio-wrapper {
  width: 100vw;
  height: 75vw;
  max-height: 100vh;
  max-width: 133.33vh;

  margin: auto;
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  background-color: #000;
}

.vnt-dialogue-box {
  width: 94%;
  height: 0;

  margin: auto;
  position: absolute;

  z-index: 1;

  left: 0;
  right: 0;
  bottom: 0;

  overflow-x: auto;

  background-color: #000000aa;

  transition-duration: 250ms;
  transition-property: height;

  font-size: 24px;
}

.vnt-dialogue-box-show {
  height: 30%;
}

.vnt-dialogue-box-hide {
  height: 0;
}

.vnt-dialogue-box-hide-show {
  animation-name: dialogue-box-hide-show;
  animation-fill-mode: forwards;
  animation-duration: 250ms;
}

@keyframes dialogue-box-hide-show {
  0% {
    font-size: 0px;
    height: 30%;
  }
  49% {
    font-size: 0px;
    height: 0;
  }
  51% {
    font-size: 24px;
    height: 0;
  }
  100% {
    font-size: 24px;
    height: 30%;
  }
}

.vnt-dialogue-text-box {
  margin: 3%;

  overflow: hidden;
}

.vnt-dialogue-speaker {
  margin: 0px;
  margin-left: 12px;
  margin-bottom: 12px;

  float: right;

  color: #fff;
}

.vnt-dialogue-text {
  margin: 0;
  margin-bottom: 12px;

  color: #fff;
}

.vnt-dialogue-text:last-child {
  margin-bottom: 0;
}

.vnt-dialogue-option {
  margin: 0;
  margin-bottom: 12px;
  padding: 0;

  display: block;

  color: #fff;
  font-size: 24px;
  font-family: serif;

  border: unset;
  background-color: unset;
}

.vnt-dialogue-option:hover {
  text-decoration: underline;
}

.vnt-dialogue-option:last-child {
  margin-bottom: 0;
}

.vnt-sprite-box {
  width: 100%;
  height: 100%;

  text-align: center;

  margin: auto;
  position: absolute;

  left: 0;
  right: 0;
  bottom: 0;

  overflow: hidden;
}

.vnt-sprite {
  height: 100%;

  position: absolute;

  display: none;

  transition-duration: 250ms;
  transition-property: left, translate;
}

.vnt-sprite-position-off-left {
  display: block;

  left: 0;
  translate: -100%;
}

.vnt-sprite-position-left {
  display: block;

  left: 0;
  translate: -20%;
}

.vnt-sprite-position-centre-left {
  display: block;

  left: 50%;
  translate: -80%;
}

.vnt-sprite-position-centre {
  display: block;

  left: 50%;
  translate: -50%;
}

.vnt-sprite-position-centre-right {
  display: block;

  left: 50%;
  translate: -20%;
}

.vnt-sprite-position-right {
  display: block;

  left: 100%;
  translate: -80%;
}

.vnt-sprite-position-off-right {
  display: block;

  left: 100%;
  translate: 0;
}

.vnt-sprite-fade {
  opacity: 0.8;

  bottom: -3%;
}

.vnt-sprite-flip {
  scale: -1 1;
}

.vnt-sprite-hide {
  display: none;
}

.vnt-background-image {
  width: 100%;
  height: 100%;

  margin: auto;
  position: absolute;

  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  opacity: 0;

  display: none;

  transition-duration: 250ms;
  transition-property: opacity;
}

.vnt-background-image-first-show {
  opacity: 1;

  display: block;
}

.vnt-background-image-show {
  opacity: 1;

  display: block;

  transition-delay: 250ms;
}

.vnt-background-image-hide {
  opacity: 0;

  display: block;
}