:root {
    --background: #0b0f0c;
    --foreground: #d5e8d5;
    --green: #62d26f;
    --green-bright: #8cff98;
    --muted: #7e947f;
    --error: #ff6b6b;
    --link: #7edfff;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
}

body {
    background: var(--background);
    color: var(--foreground);

    font-family:
        "Courier New",
        Courier,
        monospace;

    font-size: 16px;
    line-height: 1.45;
}

.terminal {
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    overflow-wrap: anywhere;
}

.output {
    white-space: pre-wrap;
}

.line {
    min-height: 1 em;
}

.banner {
    font-size: 10px;
}

.prompt {
    color: var(--green);
    font-weight: bold;
    white-space: nowrap;
}

.input-line {
    display: flex;
    align-items: baseline;
    gap: 10px;
    width: 100%;
}

#commandInput {
    flex: 1;

    min-width: 20px;

    background: transparent;
    border: none;
    outline: none;

    padding: 0;
    margin: 0;

    color: var(--green-bright);

    font: inherit;
    caret-color: var(--green-bright);
}

.command {
    color: var(--green-bright);
}

.muted {
    color: var(--muted);
}

.error {
    color: var(--error);
}

.link {
    color: var(--link);
}

.section-title {
    color: var(--green-bright);
    font-weight: bold;
}

@media (max-width: 700px) {
    body {
        font-size: 14px;
    }

    .terminal {
        padding: 12px;
    }

    .input-line {
        align-items: flex-start;
    }

    .prompt {
        white-space: normal;
    }
}