:root {
    --background: rgb(30, 30, 30);
    --white: rgb(255, 255, 255);
    --less-white: rgb(215, 215, 215);
    --blue: rgb(80, 80, 250);
    --green: rgb(50, 180, 50);
    --magenta: rgb(180, 50, 180);
    --red: rgb(230, 30, 30);
    --yellow: rgb(230, 230, 30);
    --text-normal: var(--less-white);
    --text-highlight: var(--white);
    --text-header: var(--text-highlight);
    --text-highlight-object: var(--blue);
    --text-highlight-action: var(--magenta);
    --text-highlight-region: var(--red);
    --text-highlight-item: var(--yellow);
    --text-yell: var(--red);
}

body {
    background-color: var(--background);
    color: var(--text-normal);
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
}

#terminal {
    height: 100vh;
    display: flex;
    gap: 8px;
    flex-direction: column;
    padding: 8px;
    box-sizing: border-box;
}

#output {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    gap: 8px;
    flex-flow: column;
    /*justify-content: flex-end;*/
}

#output::before {
    content: "";
    flex: 1 0 auto;
    visibility: hidden;
}

#output div {
    /*margin-bottom: 8px;*/
}

#input {
    display: flex;
    flex-direction: row;
}

#input input {
    font-family: 'Courier New', Courier, monospace;
    width: 100%;
    background-color: var(--background);
    border: none;
    color: var(--text-normal);
}

.userInput {
    color: var(--text-highlight);
}

.outputHeader {
    color: var(--text-header);
}

.outputText {
    color: var(--text-normal);
}

a {
    color: var(--text-normal);
}

.highlightObject {
    color: var(--text-highlight-object);
}

.highlightAction {
    color: var(--text-highlight-action);
}

.highlightDirection {
    color: var(--text-highlight-direction);
}

.highlightRegion {
    color: var(--text-highlight-region);
}

.highlight {
    color: var(--text-highlight);
}

.underline {
    text-decoration: underline;
}

.yell {
    color: var(--text-yell);
}