html {
  background-color: #dceafa;
}

div#breadcrumbs {
  position: fixed;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  display: block;
  background: #fff;
  color: #333;
  font-weight: 300;
  font-size: 1em;
  width: 100%;
  max-width: 100%;
  /* overscroll-behavior: none; */
  overflow: hidden;
  z-index: 1337;
}

div#breadcrumbs ul {
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  background: none;
  font-size: inherit;
  /* overscroll-behavior: none; */
  scrollbar-width: none;
  /* For Internet Explorer and Edge */
  -ms-overflow-style: none;
  /* For Chrome, Safari, and Opera */
  &::-webkit-scrollbar {
    display: none;
  }
  white-space: nowrap;
  overflow-x: hidden;
  overflow-x: auto;
}

div#breadcrumbs ul li {
  list-style-type: none;
  display: inline-flex;
  margin: 0;
  padding: 0;
}

div#breadcrumbs ul li + li {
  padding: 0;
  margin: 0;
  margin-left: -10pt;
}

div#breadcrumbs ul li + li a {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10pt 50%);
}

div#breadcrumbs ul li:last-of-type {
  z-index: 1337;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10pt 50%) !important;
}

div#breadcrumbs ul li#title {
  background-color: #fff;
  padding: 10pt 20pt;
}

div#breadcrumbs ul li:first-of-type a {
  padding-left: 10vmin;
}

div#breadcrumbs ul li a {
  display: inline-block;
  padding: 10pt 20pt;
  color: #fff;
  text-decoration: none;
}

div#breadcrumbs li a:hover {
  background-color: #ccc !important;
  color: #333;
}

div#breadcrumbs li.black a {
  background-color: #555;
}

div#breadcrumbs li.blue a {
  background-color: #2e88ff;
}

div#breadcrumbs li.red a {
  background-color: #dc5bb4;
}

div#breadcrumbs li.green a {
  background-color: #72b13a;
}

body {
  color: #314d6c;
  /* background-color: #e7e6f7; */
  font-size: calc(1em + 0.9vmin);
  font-family: "Roboto", sans-serif;
  margin: 0;
  padding: 0;
}
div {
  margin: 15vmin 10vmin 10vmin;
}
h1 {
  color: #112a46;
  font-weight: 900;
  font-size: 1.5em;
}
h3 {
  font-weight: 500;
  font-size: 1.15em;
  line-height: 1.3em;
}
p {
  font-weight: 300;
  font-size: 1em;
  line-height: 1.3em;
}
code {
  font-weight: 400;
  font-family: "Source Code Pro", monospace;
  color: #657f9b;
}
/* a {
  color: #064791;
}

a:hover {
  color: #415fb3;
} */

a {
  box-shadow: inset 0 -2.75px 0 #61a2f9;
  -moz-box-shadow: inset 0 -2.75px 0 #61a2f9;
  -opera-box-shadow: inset 0 -2.75px 0 #61a2f9;
  -webkit-box-shadow: inset 0 -2.75px 0 #61a2f9;
}

a:hover {
  background-color: #a9cbff;
}

a:active {
  background-color: #df81c3 !important;
}

a,
a:hover,
a:visited,
a:active {
  outline: 0;
  color: inherit;
  text-decoration: none;
}

a:hover,
a:active {
  box-shadow: none;
  -moz-box-shadow: none;
  -opera-box-shadow: none;
  -webkit-box-shadow: none;
}

div#breadcrumbs a,
div#breadcrumbs a:hover,
div#breadcrumbs a:visited,
div#breadcrumbs a:active {
  box-shadow: none;
  -moz-box-shadow: none;
  -opera-box-shadow: none;
  -webkit-box-shadow: none;
}

@media only screen and (min-device-width: 800px) {
  div {
    max-width: 800px;
  }
  img {
    max-width: 100%;
  }
}

ul {
  font-size: 1.1rem;
  padding: 10pt 20pt 10pt 20pt;
  width: auto;
  box-shadow: 0 0 5em #cbcbce, 0 0 0.75em #b2b8e6;
  background-color: #eee;
  border-radius: 15pt;
  text-align: left;
  display: block;
}

li {
  padding: 0 6pt 5pt 6pt;

  list-style-type: "\203A";
  position: relative;
}

li::marker {
  font-size: 1.4em;
}

li.in::marker {
  color: #c3c3c3;
}

li.tx::marker {
  color: #8398dc;
}

li.out {
  list-style: none;
  text-align: right;
  border-radius: 12pt;
  box-shadow: inset 0 0 12pt #efefef;
  padding: 5pt 6pt 5pt 6pt;
}

li.err {
  list-style: none;
  text-align: right;
  border-radius: 12pt;
  box-shadow: inset 0 0 20pt #ef203152;
  padding: 5pt 6pt 5pt 6pt;
}

li.left {
  text-align: left;
}

.highlights {
  color: transparent;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 1rem;
  line-height: 1.5rem;
  z-index: 1;
  position: absolute;
  padding: 0;
  margin: 0 6pt 0 0;
}

pre {
  padding: 0;
  margin: 0 0 -2pt 0;
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  line-height: 1.5rem;
  white-space: pre-wrap;
}

.output {
  color: transparent;
  display: flex;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 1rem;
  line-height: 1.3rem;
  overflow: hidden;
}

span.child {
  background-color: #ddd;
  border-radius: 5pt;
  color: #000;
  display: inline-block;
  width: 100%;
  align-self: flex-end;
  text-align: right;
}

mark {
  color: inherit;
  border-radius: 3pt;
  background-color: transparent;
  padding: 0 2pt;
  margin: 0 -2pt;
  text-shadow: 0 0 0.5em #073642cc;
}

.comment {
  /* text-shadow: 0 0 0.5em #073642cc; */
  text-shadow: 0 0 0.5em #acafb0cc;
  color: #7b8b8f;
}

.identifier {
  text-shadow: 0 0 0.5em #268ad2cc;
}

.string {
  text-shadow: 0 0 0.5em #6ba503de; /*#859900cc;*/
}

.number {
  text-shadow: 0 0 0.5em #2aa198cc;
}

.delimiter {
  text-shadow: 0 0 0.5em #b58800d6;
}

.symbol {
  text-shadow: 0 0 0.5em #6c71c4cc;
}

.operator {
  text-shadow: 0 0 0.5em #d33682cc;
}