web/main.css
body {
    margin: 0;
    padding: 0;

    height: calc(492px + 7em);

    user-select: none;
}

body,
input {
    font-size: 10pt;
}

a {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

.status-header,
.screen,
.command-input {
    padding: 0.5em;
    width: 640px;
}

.status-header {
    font-weight: bold;

    margin: 2em 2em 0;
    border: 2px solid #000;
}
.stats {
    float: right;
}
.mp {
    margin-left: 20px;
}

.screen,
.command-input {
    display: block;

    font-family: "Courier", monospace;
    color: #c0c0c0;
    white-space: pre-wrap;

    outline: 0;
    border: 2px inset #777;
    background: #000;

    user-select: text;
}

.screen {
    margin: 0 2em;
    height: 480px;
    overflow: auto;
}
.screen a {
    color: inherit;
    text-decoration: none;
}

.command-input {
    margin: 0 2em 2em;
    border-radius: 0;
}

@media screen and (max-width: 660px) {
    body {
        height: calc(322px + 3.2em);
    }

    body,
    input {
        font-size: 9pt;
    }

    .status-header,
    .screen,
    .command-input {
        padding: 0.1em;
        width: 100%;
        width: calc(100% - 0.2em);
    }

    .status-header {
        margin: 0;
        border: 0;
    }

    .screen,
    .command-input {
        border: 0;
    }

    .screen {
        margin: 0;
        height: 320px;
        border-bottom: 1px solid #777;
    }

    .command-input {
        margin: 0;
        border-top: 1px solid #777;
    }
}
