.box-wrapper {
        color: #fff;
      bottom: 2%;
      image-rendering: pixelated;
      position: fixed;
      z-index: 99;
      width: 100%;
      display: none;
      transform-origin: bottom center;
    }
    #drbox {
      font-size: 21px;
      text-align: left;
      display: block;
      margin: 16px auto 0;
      padding: 5px 5.5px 5.5px 29px;
      position: relative;
      border: 15px solid #fff;
      border-image: url('/textbox.gif') 27.6% fill / 20px repeat;
      width: 380px;
      min-height: 110px;
      line-height: 1.15;
      
      transform-origin: bottom center;
    }
    
    .box p {
      position: relative;
      text-shadow: 1px 1px 0 #0f0f71;
    }
    .box.aqua-talk p {
      position: relative;
      background-image: linear-gradient(to bottom, #ffffff 25%, #97FAFF 75%);
      margin-left: 20px;
      background-size: 100% 26px;
      background-clip: text;
      color: transparent;
      text-shadow: none;
      box-decoration-break: clone;
      filter: drop-shadow(1.5px 1.5px 0 #2D4443);
    }
    
    .box p:before {
      content: '*';
      position: absolute;
      inset: 0 auto auto -19px;
      line-height: 1.05;
    }
    .box.aqua-talk p:before {
      content: '';
      position: absolute;
      inset: 0 auto auto -42px;
      width: 1.1rem;
      height: 1.1rem;
      image-rendering: pixelated;
      background-size: contain;
      background-position: center;
      background-image: url('/spr_miniface_aqua.png');
      line-height: 1.05;
    }
    .optionsdiv {
      top: 50%;
      display: block;
      position:absolute;
      left: 50%;
      z-index: 100;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
    }

.dialogue-option {
    position: absolute;
    border: none;
    font-size: 21px;
    text-shadow: 1px 1px 0 #0f0f71;
}
.dialogue-option:hover, .dialogue-option.selected {
  color: #F9FF10;
}
#option-1 {
    left:15%;
    bottom: 50%;
    transform: translateY(50%);
}

#option-2 {
    right: 15%;
    top: 50%;
    transform: translateY(-50%);
}

#option-3 {
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
}

#option-4 {
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
}
.has-portrait p {
  margin-left: 100px;
}
.dialogue-portrait {
  position: absolute;
  left: 15px;
  top: 6px;
  height: 60px;
}
.tenna-text {
    height: 1em;
    width: auto;
    vertical-align: middle;
    transform: scale(1.2);
    animation: pulse .75s forwards ease-out;
}
.tenna-text.no-animation {
    animation: none !important;
}
@keyframes pulse {
  0% {
    transform: scale(.1);
    
  }
  25% {
    transform: scale(1.7);
  }
  100% {
    transform: scale(1.2);
    
  }
}