retro.css

/* @import url('https://fonts.googleapis.com/css2?family=VT323&display=swap'); */
@font-face {
    font-family: VT323;
    src: url(VT323/fonts/ttf/VT323-Regular.ttf);
}

:root {
    font-variant-ligatures: none;
    --glkote-mono-family: "VT323", monospace;
    --glkote-grid-mono-family: "VT323", monospace;
    --glkote-prop-family: "VT323", monospace;
    --glkote-grid-prop-family: "VT323", monospace;
    --glkote-buffer-size: 2vmax;
    --glkote-buffer-line-height: 1em;
    --glkote-grid-size: 2vmax;
    --glkote-grid-line-height: 1.1em;

    /* Colours cribbed from https://superuser.com/questions/361297/what-colour-is-the-dark-green-on-old-fashioned-green-screen-computer-displays/1206781#1206781 */
    --amber: rgb(255,176,0);
    --dark-amber: rgb(255,151,0);
    --crt-gradient: rgba(255,176,0, 0.20);
    --green-524nm: rgb(51,255,0);
    --green-apple-2: rgb(51,255,51); /* The P1 phosphor, which was the standard "green screen" */
    --green-506nm: rgb(0,255,51);
    --green-apple-2c: rgb(102,255,102); /* slightly turquoise P24 phosphor. */
    --green-502nm: rgb(0,255,102);

    --glkote-input-fg: var(--dark-amber);
    --glkote-buffer-fg: var(--dark-amber);
    --glkote-buffer-bg: black;
    --glkote-buffer-reverse-fg: var(--glkote-buffer-bg);
    --glkote-buffer-reverse-bg: var(--glkote-buffer-fg);
    --glkote-grid-fg: var(--amber);
    --glkote-grid-bg: black;
    --glkote-grid-reverse-fg: var(--glkote-grid-bg);
    --glkote-grid-reverse-bg: var(--glkote-grid-fg);
}

div.GridLine > span.reverse {
    width: 100%;
}

div.BufferWindow {
    text-shadow: 0 0 2px var(--dark-amber);
    scrollbar-color: var(--amber) black !important;
    background: radial-gradient(circle at center, var(--crt-gradient), black 100%) !important;
}


div#gameport {
    max-width: 100%;
    border: 60px solid;
    border-image-source: url("vt220.webp");
    border-image-slice: 100 160 fill;
    border-radius: 5em;
}

.Style_subheader {
    font-weight: bold;
    color: var(--amber);
    text-shadow: 0 0 4px var(--amber);
}

.Input, .Style_input, .Style_emphasized, .Style_user2 {
    text-decoration: underline;
    font-style: normal !important;
    font-variant-ligatures: none !important; /* This was sometimes reverting due to the above. */
    color: var(--amber);
    text-shadow: 0 0 2px var(--amber);
}

.reverse {
    font-weight: bold;
}