html, body {
    margin: 0;
    min-height: 100%;
    background: #000;
    color: #b8ffb8;
    font: 16px/1.45 "Lucida Console", "Courier New", monospace;
}

a { color: #79ffff; }
.screen {
    width: 980px;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px;
}
.frame {
    border: 2px solid #38ff38;
    padding: 12px;
    box-shadow: inset 0 0 0 1px #0b6f0b;
}
.bar {
    border-bottom: 1px solid #38ff38;
    padding-bottom: 8px;
    margin-bottom: 14px;
    overflow: hidden;
}
.bar span:first-child { float: left; }
.bar span:last-child { float: right; }
h1, h2 {
    margin: 0 0 10px;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
}
.prompt { color: #ffff80; }
.grid { margin-top: 12px; }
.post {
    border-top: 1px dashed #38ff38;
    padding-top: 10px;
}
.post img {
    display: block;
    max-width: 60%;
    max-height: 260px;
    margin: 8px 0;
    filter: grayscale(1) contrast(1.2);
}
.retro-messages {
    border: 1px dashed #38ff38;
    padding: 8px;
    margin: 10px 0;
}
.retro-page {
    width: 980px;
    max-width: 100%;
    margin: 0 auto;
    padding: 18px;
}
.retro-nav {
    border: 1px solid #38ff38;
    padding: 8px;
    margin-bottom: 12px;
}
.retro-post-full,
.retro-profile {
    border: 2px solid #38ff38;
    padding: 12px;
}
.retro-full-image,
.retro-avatar {
    max-width: 70%;
    max-height: 420px;
    filter: grayscale(1) contrast(1.2);
}
.pill {
    color: #ffff80;
    font-weight: bold;
}
.blink {
    animation: blink 1s steps(2, start) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 700px) { .post img { max-width: 100%; } }