/* CSS Variables */
:root {
    --smoky-black: #0b0a07ff;
    --celadon: #bbcea8ff;
    --flax: #e3d87eff;
    --icterine: #f0ec57ff;
    --reseda-green: #748067ff;
}

* {
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: monospace;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--smoky-black);
    color: var(--celadon);
}

#container {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 1em;
}

#terminal-panel {
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
    margin-right: 1em;
    background: var(--smoky-black);
    border: 1px solid var(--flax);
}

#terminal-stdout, #terminal-stdin {
    padding: 1em;
    background: #323232;
    color: var(--icterine);
    border: none;
    outline: none;
}

#terminal-stdout {
    flex: 1;
    overflow-y: auto;
}

#terminal-stdin {
    height: 40px;
    border-top: 1px solid var(--icterine);
}

#viewport-panel {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--smoky-black);
    border: 1px solid var(--flax);
}