body {
  padding: 0;
  font-family: 'Droid Sans Mono', monospace;
  color: #eee;
  font-size: 0.9rem;
  height: 100vh;
  margin: 0;
  background: linear-gradient(
    to bottom,
    #0a0a0a 0%,
    #1e1e1e 30%,
    #1b1b2c 60%,
    #2e1e1e 100%
  );
  background-blend-mode: normal;
}

#map, #lexicon, #location {
  width: 100vw;
  height: 100vh;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
}

#map {
  background-image: url('world_map.png');
}

#lexicon, #location {
  background-color: rgba(1, 1, 1, 0.9);
  opacity: 0;
  background-position: 2vw;
  z-index: 2;
  height: 100vh;
  background-size: 98vw 98vh;
  transition: all 3s ease-in-out;
}

#location {
  background-image: url('locations.png');
}

#lexicon {
  background-image: url('lexicon.png');
  filter: saturate(2);
}

#lexicon.on, #location.on {
  opacity: 1;
  transition: all 3s ease-in-out;
}