/* This is the stylesheet for the Teletext50 Web pages. */

/* Make Teletext50 usable through font-* properties. */
@import url(Teletext50-faces.css);

/* Use Teletext50 with proportional spacing for everything. */
body {
    font-family: Teletext50;
    font-size: 18px;
    font-synthesis: none;
}

.text-sample {
    font-size: 50px;
    font-feature-settings: normal;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Except where it's conventional to use a monospaced version. */
kbd, code, tt, pre, .{
    font-family: Teletext50, monospace;
    font-feature-settings: normal;
}

/* Don't use any leading in <pre> so that mosaic graphics work. */
pre {
    line-height: 1em;
}

h1 {
    font-size: 5em;
    font-weight: inherit;
    margin-top: 0;
    margin-bottom: -0.2em;
}

h2 {
    font-size: 2em;
    font-weight: inherit;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

ul {
    list-style-type: "\2022  ";
}

img {
    max-width: 100%;
}

.separated {
    font-feature-settings: 'ss16';
}

body {
    background-color: #000;
    color: #FFF;
}

a:link {
  color: #ff0;
  text-decoration: none;
}

a:visited {
  color: #0ff;
}

a:active {
  color: #f00;
}

a:active {
  color: #f0f;
}

/* 
    Teletext palette 
    000000 0 black
    ff0000 1 red
    00ff00 2 green
    ffff00 3 yellow
    0000ff 4 blue
    ff00ff 5 magenta
    00ffff 6 cyan
    ffffff 7 white
*/


a {
    text-decoration: none;
}

    /* unvisited link */
    a:link {
        color: #00ffff;
    }

    /* visited link */
    a:visited {
        color: #00ff00;
    }

    /* mouse over link */
    a:hover {
        color: #ffff00;
    }

    a.yellow:hover, .yellow a:hover {
        color: #00ff00;
    }

    /* selected link */
    a:active {
        color: #ff0000;
    }

    a.yellow:active, .yellow a:active {
        color: #ff0000;
    }

    a.red:active, .red a:active {
        color: #ffff00;
    }

/* flashing class, it's like the 'blink' tag is back */
.flashing {
    animation: flashing 1.3s steps(5, start) infinite;
    -webkit-animation: flashing 1.3s steps(5, start) infinite;
}

@keyframes flashing {
    to {
        visibility: hidden;
    }
}

@-webkit-keyframes flashing {
    to {
        visibility: hidden;
    }
}

/* concealed text is initially hidden, reveal by modifying class */
.conceal {
    opacity: 0;
}

.colour0, .black, a.black, .black a {
    color: #000000;
}

.colour1, .red, a.red, .red a {
    color: #ff0000;
}

.colour2, .green, a.green, .green a {
    color: #00ff00;
}

.colour3, .yellow, a.yellow, .yellow a {
    color: #ffff00;
}

.colour4, .blue, a.blue, .blue a {
    color: #0000ff;
}

.colour5, .magenta, a.magenta, .magenta a {
    color: #ff00ff;
}

.colour6, .cyan, a.cyan, .cyan a {
    color: #00ffff;
}

.colour7, .white, a.white, .white a {
    color: #ffffff;
}

.colour0bg, .blackbg {
    background-color: #000000;
}

.colour1bg, .redbg {
    background-color: #ff0000;
}

.colour2bg, .greenbg {
    background-color: #00ff00;
}

.colour3bg, .yellowbg {
    background-color: #ffff00;
}

.colour4bg, .bluebg {
    background-color: #0000ff;
}

.colour5bg, .magentabg {
    background-color: #ff00ff;
}

.colour6bg, .cyanbg {
    background-color: #00ffff;
}

.colour7bg, .whitebg {
    background-color: #ffffff;
}
.teletext {
    text-align: left;
    white-space: pre;
    display: block;
    font-size: 22px;
    font-smooth: never;
    -webkit-font-smoothing: none;
}