:root {
    --screen-bg: #080808;
    --terminal-color: #33cc33;
}

body {
    background: var(--screen-bg);
    color: var(--terminal-color);
    font-family: "Courier New", monospace;
    font-size: 22px;
    margin: 20px;
    line-height: 1.2;
}

#title {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
}

#title:hover {
    text-decoration: underline;
}

.line {
    margin: 0;
}


/* ENTRY SCREEN */

.entry-line {
    cursor: text;
}

.entry-field {
    display: inline;
    outline: none;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: inherit;
    line-height: inherit;
    caret-color: var(--terminal-color);
    width: auto;
    min-width: 1ch;
}

.entry-complete {
    display: inline;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}


/* MESSAGE INPUT */

.message {
    display: inline;
    outline: none;
    caret-color: var(--terminal-color);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 80vw;
}


/* CONVERSATION */

.sent {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    max-width: 80vw;
}

.received {
    display: inline-block;
    background: var(--terminal-color);
    color: var(--screen-bg);
    padding: 0 4px;
    max-width: 80vw;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

.prompt-line {
    margin-top: 8px;
}


/* TIMER / DESTROY */

#timer {
    display: inline-block;
    cursor: pointer;
}

#timer:hover {
    text-decoration: underline;
}

.destroy-line {
    margin-top: 8px;
    cursor: text;
}


/* UNAVAILABLE */

.unavailable {
    display: inline-block;
    background: var(--terminal-color);
    color: var(--screen-bg);
    padding: 0 4px;
    animation: unavailable-blink 4s steps(1, end) 1;
}

@keyframes unavailable-blink {

    0%, 24.9% {
        background: var(--terminal-color);
        color: var(--screen-bg);
    }

    25%, 49.9% {
        background: var(--screen-bg);
        color: var(--terminal-color);
    }

    50%, 74.9% {
        background: var(--terminal-color);
        color: var(--screen-bg);
    }

    75%, 100% {
        background: var(--screen-bg);
        color: var(--terminal-color);
    }
}
#inquiries:hover {
    text-decoration: underline;
}

#sponsor-list span[style*="cursor: pointer"]:hover {
    text-decoration: underline;
}

#sponsor-back:hover {
    text-decoration: underline;
}

#keep-sponsors:hover {
    text-decoration: underline;
}