:root {
    font-family: "Suisse Int'l", Helvetica, 'Helvetica Neue', Arial, sans-serif;
    color: black;
    background-color: white;
    --ui-gray: #555;
    --helpful-green: hsl(150 100% 80%);
    --small-space: 0.3rem;
    --negative-small-space: -0.3rem;
    --medium-space: 0.6rem;
    --big-space: 1rem;
    --large-space: 2rem;
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--medium-space);
    align-items: center;
}

select, input, button, textarea {
    font-family: inherit;
    font-size: inherit;
    padding-top: var(--small-space); /* font baseline adjust */
    border: 1px solid var(--ui-gray);
    border-radius: 2px;
}

h1 {
    font-size: 2em;
    text-align: center;
    margin-bottom: var(--large-space);
}

h2 {
    font-size: 1.3em;
    margin-top: 1.5rem;
    margin-bottom: var(--big-space);
}

p, ul {
    margin: var(--medium-space) 0;
}

.control-boxes-container {
    display: flex;
    gap: var(--medium-space);
    width: 100%;
    max-width: 1600px;
}

.control-box {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--small-space);
    flex: 3;
}

#layout-control-box {
    flex: 2;
}

.control-boxes-container label {
    display: none;
}
.control-boxes-container label:first-child {
    display: unset;
    text-align: center;
}

.control-box textarea {
    min-height: 15em;
}

.control-box textarea, code {
    font-family: 'Overpass Mono', Iosevka, 'Fira Code', Menlo, Consolas, monospace;
}

#output {
    width: 1000px;
    height: 300px;
    resize: both;
    overflow: hidden;
    border: 1px solid var(--ui-gray);
    border-radius: 2px;
    margin-bottom: 8em;
}

#output-canvas {
    width: 100%;
    height: 100%;
}

.help {
    border: 2px solid red;
    border-radius: 12px;
}

#help-button {
    position: absolute;
    top: var(--medium-space);
    right: var(--medium-space);

    font-size: 2em;
    color: red;
    background: var(--helpful-green);
    padding: 0.3em 0.3em 0 0.3em;

    cursor: help;
}

dialog::backdrop {
    background-color: var(--helpful-green);
    opacity: 0.4;
}

dialog {
    width: 90%;
    max-width: 50em;
}