/* Themes are set below with js/C++ */
:root {
    --font: "Cascadia code";
    --color-black: #000000;
    --color-red: #d00e18;
    --color-green: #138034;
    --color-yellow: #ffcb3e;
    --color-blue: #006bb3;
    --color-purple: #6b2775;
    --color-cyan: #384564;
    --color-white: #ededed;
    --color-brightBlack: #5d504a;
    --color-brightRed: #5d504a;
    --color-brightGreen: #b1d130;
    --color-brightYellow: #fff120;
    --color-brightBlue: #4fc2fd;
    --color-brightPurple: #de0071;
    --color-brightCyan: #5d504a;
    --color-brightWhite: #ffffff;
    --color-background: #222225;
    --color-foreground: #ededed;
}

a {
    color: var(--color-cyan);
}

body {
    padding: 0;
    margin: 0;
    background-color: var(--color-background);
    color: var(--color-foreground);
}

#term {

    font-family: var(--font), monospace;
    margin: 0;
    padding: 0;
    /* display: flex; */
    /* flex-direction: column; */
    height: 100vh;
    transition: color, background-color 750ms;
}

#console {
    overflow-y: auto;
    padding: 5px 5px 0 5px;
    font-size: medium;
}

#input-area {
    display: flex;
    align-items: center;
    padding: 0 5px 5px 5px;
}

#input {
    flex-grow: 1;
    background-color: var(--color-background);
    color: var(--color-foreground);
    border: none;
    outline: none;
    font-family: var(--font), monospace;
    padding: 0;
    font-size: medium;
}

.commandLink {
    cursor: pointer;
    text-decoration: underline;
}