html,
body {
  height: 100%;
}
#root {
  margin: 0;
  padding: 0;
}
body {
  font-size: calc(0.5em + 1.5vmin);
  line-height: 1.5em;
}
@media (max-width: 50em) and (max-height: 50em) {
  body { font-size: 1em; }
}
.app {
  padding: 1em 1em 3em 1em;
  height: 100%;
}
.top.sb-bar:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  background: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  height: 1em;
  width: 100%;
}
.dark-mode .top.sb-bar:after {
  background: linear-gradient(rgba(35, 35, 35, 1), rgba(35, 35, 35, 0));
}
.top.sb-bar + * {
  margin-top: 1em;
}
.flex-row.flex-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding-left: 0em;
}
.flex-row > * {
  margin-left: 1em;
}
dt { font-weight: 700; }
pre {
  color: #ccc;
  background: #111;
  font-size: 0.85em;
  padding: 0.5em 1em;
  border: var(--hair-line) solid var(--border-color);
  border-radius: var(--border-radius);
  position: relative;
  overflow: auto;
}
pre[data-title]:before {
  content: attr(data-title);
  float: right;
  font-size: 0.75em;
}
.example {
  border: var(--hair-line) solid var(--border-color);
  border-radius: var(--border-radius);
  padding: 0.5em 1em;
  margin-bottom: 1em;
  position: relative;
}
.example:before {
  background: var(--background);
  content: "Example";
  display: block;
  font-size: 0.6em;
  height: 1.1em;
  line-height: 100%;
  padding: 0em 0.5em;
  position: absolute;
  text-align: left;
  top: -0.5em;
}
.to-top-wrapper {
  position: fixed;
  right: 2.5em;
  bottom: 2em;
  z-index: var(--stack-skip-link);
}
.to-top[href="#top"][role="button"] {
  display: inline-block;
  text-decoration: none;
  text-align: center;
  background: var(--text);
  color: var(--negative-text);
  font-weight: 700;
}
h2, li { word-wrap: wrap-word; }
.color-example {
  border: var(--hair-line) solid var(--border-color);
  display: inline-block;
  height: 1em;
  vertical-align: -0.15em;
  width: 1em;
}