#vn-textbox {
  position: absolute;
  bottom: 2vh;
  left: 0;
  right: 0;
  min-height: 5.2em;
  margin: 0.5em 2em;
  padding: 0.5em;

  background-color: var(--bg-color);
  border: 2px solid var(--framing);
}
@media only screen and (orientation: portrait){
  #vn-textbox {
    margin-left: 1em;
    margin-right: 1em;
  }
}

/* A possibility for animating text */
/* #vn-textbox>* {
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  animation: type 1s steps(60, end); 
}
@keyframes type{ 
  from { width: 0; } 
}  */

.main-content {
  overflow: hidden;
}

#main-header {
  border-top: none;
}

#vn-temp-display {
  position: absolute;
  width: 100%;
  height: 70vh;
  /* TODO: idk man, how do i arrange all this stuff? */
  /* z-index: 1; */
}

.character-container {
  position: absolute;
  z-index: -1;
}


.character-container.pos-center {
  display: grid;
  place-items: center;
  width: 100%;
}
.character-container.pos-right {
  right: 10%;
}
.character-container.pos-right-2 {
  right: 30%;
  z-index: -2;
}
.character-container.pos-left {
  left: 10%;
}
.character-container.pos-left-2 {
  left: 30%;
  z-index: -2;
}

.character-container.pos-out-of-the-way-right {
  left: 65%;
  z-index: -3;
}


.vn-show-off {
  max-width: 100%;
}
*:not(.scene)>.vn-show-off { /* In the VN viewer */
  /* TODO: pretty specific. How should I go about this in general? */
  position: absolute;
  margin: 3em;
  top: 0;
  left: 0;
  max-height: 70vh; /* FIXME: only works because the image is large as-is */
}
.scene>.vn-show-off { /* Regular HTML layout */
  display: block;
  margin: 1em auto;
}

#vn-content {
  display: none;
}