html:after {
  display: block;
  height: 2em;
  width: 100%;
  content: '';
}

.new-comments {
  position: fixed;
  background: #222;
  color: #fff;
  bottom: 0;
  left: 0;
  width: 100%;
  max-height: 2em;
  transition: .3s ease-in-out max-height, .5s opacity;
  opacity: .7;
  line-height: 2em;
  overflow-y: hidden;
  z-index: 999999;
  backdrop-filter: blur(20px);
}

.new-comments:before {
  display: block;
  content: "Hover to view comments on this layout";
  background: #a00;
  text-align: center;
  overflow-y: hidden;
  height: 2em;
}

.new-comments:hover {
  max-height: 80%;
  opacity: 1;
  transition: .3s ease-in-out max-height, .5s opacity;
  overflow-y: scroll;
}

.new-comments:hover > div {
  max-height: 999em;
}

.new-comments * {
  margin: initial;
  padding: initial;
  color: inherit;
}

.new-comments code {
  font-size: 1em;
}

.new-comments p {
  padding: .5em 1em;
}

.new-comments ul, .new-comments ol {
  margin-left: 2em;
  padding: .25em 1em;
}