html{
    font-size: 15px;
}

body {
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

/* Teletext style definitions */
@font-face {
    font-family: mullard-alphanumeric;
    src: url(../fonts/mullard-alphanumeric.woff2);
    src: url(../fonts/mullard-alphanumeric.woff);
    src: url(../fonts/mullard-alphanumeric.ttf);
}

@font-face {
    font-family: mullard-graphics;
    src: url(../fonts/mullard-graphics.woff2);
    src: url(../fonts/mullard-graphics.woff);
    src: url(../fonts/mullard-graphics.ttf)
}

@font-face {
    font-family: mullard-separated;
    src: url(../fonts/mullard-separated.woff2);
    src: url(../fonts/mullard-separated.woff);
    src: url(../fonts/mullard-separated.ttf)
}

@font-face {
    font-family: mullard-conceal;
    src: url(../fonts/mullard-conceal.woff2);
    src: url(../fonts/mullard-conceal.woff);
    src: url(../fonts/mullard-conceal.ttf)
}

.teletext-default {
    font-family: mullard-alphanumeric;
    font-size: 16pt;
    font-kerning: none;
    background-color: black;
    color: white;
    width: 520px;
    line-height: 21px;
    --bgcolour: black;
    --last-colour: white;
}

.teletext-alpha-black {
    font-family: mullard-alphanumeric;
    color: black;
    --last-colour: black;
}
.teletext-alpha-red {
    font-family: mullard-alphanumeric;
    color: red;
    --last-colour: red;
}
.teletext-alpha-green {
    font-family: mullard-alphanumeric;
    color: lime;
    --last-colour: lime;
}
.teletext-alpha-yellow {
    font-family: mullard-alphanumeric;
    color: yellow;
    --last-colour: yellow;
}
.teletext-alpha-blue {
    font-family: mullard-alphanumeric;
    color: blue;
    --last-colour: blue;
}
.teletext-alpha-magenta {
    font-family: mullard-alphanumeric;
    color: magenta;
    --last-colour: magenta;
}
.teletext-alpha-cyan {
    font-family: mullard-alphanumeric;
    color: cyan;
    --last-colour: cyan;
}
.teletext-alpha-white {
    font-family: mullard-alphanumeric;
    color: white;
    --last-colour: white;
}

.teletext-flash {
    animation: teletext-flasher 1.5s step-start infinite;
}
@keyframes teletext-flasher {
    30% {
            color: transparent;
        }
}


.teletext-mosaics-black {
    font-family: mullard-graphics;
    color: black;
    --last-colour: black;
    speak: none;
}
.teletext-mosaics-red {
    font-family: mullard-graphics;
    color: red;
    --last-colour: red;
    speak: none;
}
.teletext-mosaics-green {
    font-family: mullard-graphics;
    color: lime;
    --last-colour: lime;
    speak: none;
}
.teletext-mosaics-yellow {
    font-family: mullard-graphics;
    color: yellow;
    --last-colour: yellow;
    speak: none;
}
.teletext-mosaics-blue {
    font-family: mullard-graphics;
    color: blue;
    --last-colour: blue;
    speak: none;
}
.teletext-mosaics-magenta {
    font-family: mullard-graphics;
    color: magenta;
    --last-colour: magenta;
    speak: none;
}
.teletext-mosaics-cyan {
    font-family: mullard-graphics;
    color: cyan;
    --last-colour: cyan;
    speak: none;
}
.teletext-mosaics-white {
    font-family: mullard-graphics;
    color: white;
    --last-colour: white;
    speak: none;
}

.teletext-doubleheight {
    display: inline-block;
    transform-origin: 0 0;
    transform: scaleY(2);
    /*padding-bottom: 24px;*/
}
.teletext-normalheight {
    font-family: teletext2;
    font-size: 14pt;
}

.teletext-newbackground {
    background-color: var(--last-colour);
    --bgcolour: var(--last-colour);
}
.teletext-blackbackground {
    background-color: black;
    --bgcolour: black;
}


.teletext-colour-0 {
    color: black;
    background-color: var(--bgcolour);
    --last-colour: black;
}

.teletext-colour-1 {
    color: red;
    background-color: var(--bgcolour);
    --last-colour: red;
}

.teletext-colour-2 {
    color: lime;
    background-color: var(--bgcolour);
    --last-colour: lime;
}

.teletext-colour-3 {
    color: yellow;
    background-color: var(--bgcolour);
    --last-colour: yellow;
}

.teletext-colour-4 {
    color: blue;
    background-color: var(--bgcolour);
    --last-colour: blue;
}

.teletext-colour-5 {
    color: magenta;
    background-color: var(--bgcolour);
    --last-colour: magenta;
}

.teletext-colour-6 {
    color: cyan;
    background-color: var(--bgcolour);
    --last-colour: cyan;
}

.teletext-colour-7 {
    color: white;
    background-color: var(--bgcolour);
    --last-colour: white;
}


.teletext-alphanumerics {
    font-family: mullard-alphanumeric;
}
.teletext-mosaics {
    font-family: mullard-graphics;
}
.teletext-separated {
    font-family: mullard-separated;
}

.teletext-background {
    background-color: var(--bgcolour);
}

.teletext-conceal {
    font-family: mullard-conceal;
}

.teletext-reveal {
}

a:link {
    color : inherit;
}

a:hover {
    text-decoration : underline;
}

.carousel-control {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50px, -50px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Scanlines from ali1234 */

a {
    color: inherit;
    text-decoration: inherit;
}

.teletext-default a {
    color: inherit;
    text-decoration: none;
}

    .teletext-default a:hover {
        color: orange;
    }

    .teletext-default a:active {
        color: red;
    }


.teletext-default {
    font-size: 10px;
    width: 100%;
    line-height: 100%;
    text-shadow: 0 0 0.05em;
}

#TeletextPage {
    position: relative;
    top: 0;
    left: 0;
    width: 245px;
    filter: blur(0.025em) brightness(120%);
}

    #TeletextPage:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 10;
        pointer-events: none;
        background: none;
        /* This gradient looks worse but can be rendered at 2 (physical) pixels. */
        --gradient-small: repeating-linear-gradient( to top, rgba(0,0,0,0.8) 0px, transparent 1px, transparent 2px, rgba(0,0,0,0.8) 3px );
        /* This gradient looks better but can't be rendered at 2 (physical) pixels. */
        --gradient-big: repeating-linear-gradient( to top, rgba(0,0,0,1), transparent 25%, transparent 75%, rgba(0,0,0,1) 100% );
    }


/* Small size: 245px x 250px, 1 x 1 scaling */
@media (max-width: 400px) {
    .teletext-default {
        font-size: 10px;
    }

    #TeletextPage {
        width: 245px;
    }

        #TeletextPage:after {
            background-image: none; /* no scanlines */
        }
}

/* Medium size: 490px x 500px, 2 x 2 scaling, scanlines possible */
@media (min-width: 400px) and (max-width: 800px) {
    .teletext-default {
        font-size: 20px;
    }

    #TeletextPage {
        width: 490px;
    }

        #TeletextPage:after {
            background-size: 2px 2px;
            background-image: var(--gradient-small);
        }
    /* Use the nicer gradient on hidpi/retina displays. */
    /* This is only necessary when 2x2 scaling. */
    @media (min-resolution: 2dppx) {
        #TeletextPage:after {
            background-image: var(--gradient-big);
        }
    }
}

/* Large size: 735 x 750px, 3 x 3 scaling, scanlines possible */
@media (min-width: 800px) {
    .teletext-default {
        font-size: 30px;
    }

    #TeletextPage {
        width: 735px;
    }

        #TeletextPage:after {
            /* At 3x3 scaling and above, the big gradient looks better. */
            background-image: var(--gradient-big);
            background-size: 3px 3px;
        }
}

/* Make any size you want by multiplying up the values from the smallest size. */