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;
}
html.rust, html.light{
  --sidebar-image: url(../img/RustLangES-light.svg);
}
html.navy, html.ayu, html.coal{
  --sidebar-image: url(../img/RustLangES-dark.svg);
}
body{
  container-name: body;
}

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;
}
.sidebar-image {
  width: var(--sidebar-width);
  height: 100px;
  background-image: var(--sidebar-image);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  background-position: center;
  top: 0;
}
.sidebar .sidebar-scrollbox{
  margin-top: 100px;
}

.logo-separator{
  height: 100px;
  width: var(--sidebar-width);
  position: fixed;
  z-index: 1;
  background: var(--quote-bg);
  padding: 10px 0;
}