@import url('https://fonts.googleapis.com/css2?family=Carter+One&display=swap');
body {
  margin: 0;
  padding: 0;
  background-color: #36454F;
  overflow: hidden;
  font-family: monospace;
}
#treasure-quest {
  font-size: 2em;
  color: white;
  padding: .5em;
  text-align: center;
  display: block;
  height: 100%;
  margin: 0;
}
#treasure-quest h1 {
  -webkit-text-stroke: .2px black;
}
#treasure-quest a {
  color: gold;
}
#treasure-quest h1,
#treasure-quest #conquered,
#treasure-quest a {
  font-family: "Carter One";
  text-align: center;
  margin: 0;
}
#treasure-quest #instructions {
  font-size: .6em;
  font-family: monospace;
  color: white;
  position: absolute;
  bottom: 1em;
  width: 100%;
  text-align: center;
  margin: 0 auto;
}
#treasure-quest h1 {
  font-size: 1.4em;
}
#treasure-quest #level,
#treasure-quest #desc {
  position: absolute;
  font-size: .8em;
  top: .5em;
  margin: 0;
}
#treasure-quest #level {
  right: .5em;
}
#treasure-quest #desc {
  left: .5em;
}
#treasure-quest #room {
  position: relative;
  height: 9.9em;
  width: 9.9em;
  margin: 0 auto;
  opacity: 1;
  transition: opacity .25s ease-in;
}
#treasure-quest #room span {
  position: absolute;
  height: 1.1em;
  width: 1.1em;
  margin: 0;
  text-align: center;
  line-height: 1.2em;
  transition: left .25s ease-in, top .25s ease-in;
}
#treasure-quest #room.hidden,
#treasure-quest #room span.removed {
  opacity: 0;
}
#treasure-quest #conquered,
#treasure-quest #next-level {
  margin: .5em;
  transition: opacity 1s ease-in, font-size 1s ease-in;
  opacity: 0;
  display: none;
}
#treasure-quest.conquered #conquered,
#treasure-quest.solved #next-level {
  opacity: 1;
  display: block;
  font-size: .8em;
}
#treasure-quest.solved span[data-piece="e"] {
  opacity: 0;
  transition: opacity .25s ease-in;
}
#treasure-quest.conquered #next-level {
  display: none;
}
#treasure-quest.leaving #room,
#treasure-quest.leaving #next-level {
  transition: opacity .25s ease-in;
  opacity: 0;
}
#treasure-quest #room span[data-x="-1"] {
  left: -1.1em;
}
#treasure-quest #room span[data-x="0"] {
  left: 0;
}
#treasure-quest #room span[data-x="1"] {
  left: 1.1em;
}
#treasure-quest #room span[data-x="2"] {
  left: 2.2em;
}
#treasure-quest #room span[data-x="3"] {
  left: 3.3em;
}
#treasure-quest #room span[data-x="4"] {
  left: 4.4em;
}
#treasure-quest #room span[data-x="5"] {
  left: 5.5em;
}
#treasure-quest #room span[data-x="6"] {
  left: 6.6em;
}
#treasure-quest #room span[data-x="7"] {
  left: 7.7em;
}
#treasure-quest #room span[data-x="8"] {
  left: 8.8em;
}
#treasure-quest #room span[data-y="-1"] {
  top: -1.1em;
}
#treasure-quest #room span[data-y="0"] {
  top: 0;
}
#treasure-quest #room span[data-y="1"] {
  top: 1.1em;
}
#treasure-quest #room span[data-y="2"] {
  top: 2.2em;
}
#treasure-quest #room span[data-y="3"] {
  top: 3.3em;
}
#treasure-quest #room span[data-y="4"] {
  top: 4.4em;
}
#treasure-quest #room span[data-y="5"] {
  top: 5.5em;
}
#treasure-quest #room span[data-y="6"] {
  top: 6.6em;
}
#treasure-quest #room span[data-y="7"] {
  top: 7.7em;
}
#treasure-quest #room span[data-y="8"] {
  top: 8.8em;
}


#treasure-quest #room span[data-piece="h"],
#treasure-quest #room span[data-piece="v"] {
  height: .97em;
  width: .97em;
  margin: 2px;
  line-height: 22px;
  background-color: slategray;
  vertical-align: top;
  outline: solid 1px black;
  overflow: hidden;
  border-radius: 3px;
}
#treasure-quest #room span[data-piece="h"] {
  background-color: tan;
}