body.light .does_not_compile,
body.light .panics,
body.light .not_desired_behavior,
body.rust .does_not_compile,
body.rust .panics,
body.rust .not_desired_behavior {
  background: #fff1f1;
}

body.coal .does_not_compile,
body.coal .panics,
body.coal .not_desired_behavior,
body.navy .does_not_compile,
body.navy .panics,
body.navy .not_desired_behavior,
body.ayu .does_not_compile,
body.ayu .panics,
body.ayu .not_desired_behavior {
  background: #501f21;
}

.ferris-container {
  position: absolute;
  z-index: 99;
  right: 5px;
  top: 30px;
}

.ferris {
  vertical-align: top;
  margin-left: 0.2em;
  height: auto;
}

.ferris-large {
  width: 4.5em;
}

.ferris-small {
  width: 2.3em;
}

.ferris-explain {
  width: 100px;
}

/*
  A bit of a hack to make small Ferris use the existing buttons container but
  only show/hide the buttons on hover over the `pre`. Targeting `.listing`
  increases the specificity of this rule.
*/
pre > .buttons {
  visibility: visible;
  opacity: 1;
  transition: none;
}

pre > .buttons button {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.1s linear, opacity 0.1s linear;
}

pre:hover > .buttons button {
  visibility: visible;
  opacity: 1;
}