html, body {
margin: 0px;
padding: 0px;
overflow: hidden;
}
body {
background-color: var(--onedark-bg);
padding: 2em;
span.line {
display: block;
color: var(--onedark-white);
span.line.stderr-debug { color: var(--onedark-green); }
span.line.stderr-info { color: var(--onedark-blue); }
span.line.stderr-warning { color: var(--onedark-orange); }
span.line.stderr-error { color: var(--onedark-red); }
span.line.stderr-javascript { color: var(--onedark-purple); }
div.collection {
display: flex;
flex-wrap: wrap;
gap: 2rem;
div.collection div.item {
flex-basis: 50%;
flex: 20rem;
height: calc(100vh - 4em);
max-width: 100%;
position: relative;
flex-flow: column nowrap;
margin: 0rem;
padding: 0rem;
@media only screen and (max-width: 1200px) {
overflow-y: visible;
flex-basis: 100%;
height: auto;
min-height: 8rem;
#console {
.button {
align-items: center;
padding: 1rem 1.5rem;
width: fit-content;
background-color: var(--onedark-bg-light);
.button:not(.one-line) {
display: inline-flex;
margin: 1rem 1rem 0rem 0rem;
.button.one-line {
margin: 0rem 0rem 1rem 0rem;
.button:hover {
cursor: pointer;
background-color: var(--onedark-gray-dark-dark);
.button .text {
flex-flow: column;
margin-left: 1rem;
.button img.icon {
height: 1.5rem;
.button .extra {
color: var(--onedark-gray);
div.collection div.item.editor > div.prism-live {
height: 100%;
div.collection div.item.console div.controls {
padding-bottom: 1rem;
padding: 1rem;
overflow: auto;
font-size: 1rem;