:root {
  --badlands: #d16b28;
  --wasteland: #f2a360;
  --dunes: #ffd684;
  --plains: #d9bf3f;
  --oasis: #afaa33;
  --forest: #2c8b57;
}

#timeline {
  position: relative;
  max-width: 80%;
  z-index: 10;
  height: 0.5em;
  border-radius: 0.5em;
  border: 0.5px solid black;
  background-color: #ffeecc;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  transition: height 0.2s;
  cursor: pointer;
}

#timeline.expand {
  height: 16px;
}

.location {
  /* width: 100%; */
  flex-grow: 1;
  font-family: trilby;
  background-color: white;
  /* writing-mode: vertical-lr; */
  border-right: 0.5px solid rgba(0,0,0,0.25)
}

.location p {
  font-size: 0.75em;
  margin: 0 4px;
  padding: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

.expand .location p {
  opacity: 1;
}

.location-none {
  background-color: none;
}

.location-Wasteland {
  background-color: var(--wasteland);
}

.location-Badlands {
  background-color: var(--badlands);
}

.location-Plains {
  background-color: var(--plains);
}

.location-Woods {
  background-color: var(--forest);
}

.location-Dunes {
  background-color: var(--dunes);
}

.location-Oasis {
  background-color: var(--oasis);
}