body {
  background-color: #accdff;
}

#wrapper {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  cursor: grab;

  &.dragging {
    cursor: grabbing;
  }
}

#world {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

.text-container {
  position: absolute;
  width: 33%;
  height: 20rem;
  resize: both;
  overflow: auto;
  background: url("bumpy.gif") repeat;
  border: 1px solid #000;
  z-index: 999;
}

.text-inner {
  position: absolute;
  background: white;
  border-top: 1px solid #000;
  inset: 15px 0 0;
}

.form {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  z-index: 2;
}

.text-display {
  background: white;
  position: absolute;
  white-space: pre-wrap;
  overflow: auto;
  inset: 0 0 1.5rem;
  z-index: 1;
  margin: 0.5rem;
  font-size: 1.2rem;

  &:focus {
    outline: 0 solid transparent;
  }
}

#quote {
  position: absolute;
  bottom: 20px;
  right: 20px;
  font-family: monospace;
  text-align: right;
  z-index: -1;
}

.old-1 {
  background-color: #fd9;
}

.old-2 {
  background-color: #da5;
}

.old-3 {
  background-color: #c93;
}