@font-face {
    font-family: "Mode 7";
    src: url("assets/MODE7GX3.TTF");
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

.black {
    color: #000;
}

.red {
    color: #f00;
}

.green {
    color: #0f0;
}

.yellow {
    color: #ff0;
}

.blue {
    color: #00f;
}

.magenta {
    color: #f0f;
}

.cyan {
    color: #0ff;
}

.white {
    color: #fff; 
}

.black-bg {
    background-color: #000;
}

.red-bg {
    background-color: #f00;
}

.green-bg {
    background-color: #0f0;
}

.yellow-bg {
    background-color: #ff0;
}

.blue-bg {
    background-color: #00f;
}

.magenta-bg {
    background-color: #f0f;
}

.cyan-bg {
    background-color: #0ff;
}

.white-bg {
    background-color: #fff; 
}

#frame {
    background-color: #000;
    color: #fff;
    width: 40ch;
    height: 25em;
    font-size: 1em;
    line-height: 1em;
    font-family: "Mode 7", monospace;
    white-space: pre;
}