html {
    --fg: #dcfdfd;
    --bg: #021111;
    --accent-hue: 180;
    --accent-sat: 100%;
    --accent-lig: 10%;
    --accent: hsl(var(--accent-hue), var(--accent-sat), var(--accent-lig));
    color: var(--fg);
    background-color: var(--bg);
}

#root {
    display: flex;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.program {
    height: 100%;
    width: 50%;
    color: var(--fg);
    background-color: var(--bg);
    resize: none;
    border: 1px solid var(--fg);
}

.program:focus-within {
    filter: brightness(1.2);
    outline: none;
}

.info {
    z-index: -413;
    display: grid;
    width: 50%;
    grid-template-areas: "ops stack" "states states";
    grid-template-rows: max-content;
}

/* .ops,
.states {
    width: 50vw;
} */

.ops {
    /* position: fixed; */
    /* top: 0;
    left: 50%; */
    min-height: 25vh;
    margin-bottom: 0;
    background-color: var(--bg);
    border: 1px solid var(--fg);
    border-left: none;
    grid-area: ops;
    padding: 5px;
}

.states {
    overflow: scroll;
    grid-area: states;
}

.state {
    border-right: 1px solid var(--fg);
    border-bottom: 1px solid var(--fg);
    /* margin: 5px; */
    padding-left: 5px;
}

/* .state > * {
    margin-left: 5px;
} */

.stack {
    border: 1px solid var(--fg);
    border-left: none;
    grid-area: stack;
    padding: 5px;
}

.stack::before {
    content: "Stack: ";
}

/* later i can do .op.active and .state.active if necessary */
.active {
    /* outline: 1px solid var(--accent);
    border: none;
    border-left: 1px solid var(--accent); */
    /* border-left: 1px solid var(--fg); */
    background-color: var(--accent);
}

.op {
    display: flex;
    white-space: pre;
}

.output {
    display: flex;
}

/* https://www.joshwcomeau.com/css/custom-css-reset/ */
/*
  1. Use a more-intuitive box-sizing model.
*/
*,
*::before,
*::after {
    box-sizing: border-box;
}
/*
  2. Remove default margin
*/
* {
    margin: 0;
    font-family: "Courier New", Courier, monospace;
    font-weight: bold;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 14px;
}
/*
  3. Allow percentage-based heights in the application
*/
html,
body {
    height: 100%;
}
/*
  Typographic tweaks!
  4. Add accessible line-height
  5. Improve text rendering
*/
body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
/*
  6. Improve media defaults
*/
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
/*
  7. Remove built-in form typography styles
*/
input,
button,
textarea,
select {
    font: inherit;
}
/*
  8. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
/*
  9. Create a root stacking context
*/
#root,
#__next {
    isolation: isolate;
}