html, body {
  background: #F5FCEE;
  margin: 0;
  padding: 0;
}

#sprite {
  position: fixed;
  left: calc(50vw - 15px);
  top: calc(50vh - 15px);
  width: 30px;
  height: 30px;
  border: 1px solid black;
  transition-property: left;
  transition-duration: 1.3s;
  transition-timing-function: ease-in-out;
  background: white;
}

#spritedetail {
  background: #fff;
  display: block;
  height: 30px;
  width: 30px;
  outline: 1px solid black;
  outline-offset: 1px;
  position: absolute;
  left: calc(50vw - 260px);
  top: calc(50vh - 240px);
  transition-property: top left width height;
  transition-duration: 1.3s;
  transition-timing-function: ease-in-out;
}

.hidden {
  visibility: hidden;
}

ul#log {
  list-style: none;
  display: block;
  position: fixed;
  right: 0px;
  bottom: 50px;
  height: 100px;
  overflow-y: auto;
  margin: 0;
}

ul#log li {
  font-family: "acherus_grotesque_light";
  transition-delay: 0.4s;
  transition-property: color;
  transition-timing-function: ease;
  transition-duration: 2s;
  color: black;
  margin-bottom: 120px;
}

.footer {
  position: fixed;
  bottom: 15px;
  left: 15px;
  max-width: 90vw;
}