body {
display: flex;
flex-direction: column;
font-family: "Noto Sans", sans-serif;
}
h1 {
margin-inline: 2rem;
margin-block: 0;
}
.code-panes {
display: flex;
height: 85vh;
gap: 1rem;
align-items: stretch;
justify-content: stretch;
}
.code-panes>* {
flex: 1;
width: 50%;
}
.codeblock,
#editor {
border: 1px solid;
}
.output-pane {
display: flex;
gap: 0.5rem;
flex-direction: column;
}
#output {
flex-grow: 2;
flex-shrink: 1;
}
#errors-details {
flex-shrink: 1;
}
pre {
font-family: "JetBrains Mono", monospace;
}
.codeblock {
overflow-y: scroll;
overflow-x: auto;
padding: 1rem;
background-color: #f0f0f0;
font-size: 14px;
margin: 0;
}
pre#errors {
background-color: #151715;
color: white;
max-height: 45vh;
}
#controls {
margin-inline: 1rem;
}
#controls .inline {
display: flex;
gap: 1rem;
align-items: baseline;
justify-content: flex-end;
}
#extra .container {
display: flex;
gap: 1rem;
}
#extra fieldset {
width: fit-content;
}
details {
padding: 0.5em 0.5em 0;
}
summary {
font-weight: bold;
margin: -0.5em -0.5em 0;
padding: 0.5em;
}
details[open] {
padding: 0.5em;
}
.narrow {
margin-left: auto;
width: fit-content;
text-align: end;
}
fieldset {
text-align: start;
}
.codeblock .ingredient {
color: green;
font-weight: bold;
}
.codeblock .timer {
color: teal;
font-weight: bold;
}
.codeblock .cookware {
color: orange;
font-weight: bold;
}
.codeblock .temp {
color: crimson;
font-weight: bold;
}
.codeblock ul {
margin: 0;
padding: 0;
}
.codeblock li.metadata {
list-style: none;
}
.metadata .key {
font-weight: bold;
color: green;
}