body {
    background: url(/assets/bg-e71a71b6b54883e062e0b5960a95d2b6bfaa91c2.gif) top fixed;
    background-repeat: no-repeat;
    background-size: 80% 100%;
    background-color: #000;
    color: white;
}

#pageHeader {
    /* a bit of a hack. since webtv doesn't (seem to) know what the fuck
    min-width and max-width are, it just doesn't do jack shit
    and it just looks as it should, meanwhile more modern web browsers
    will take this into account. i fucking hate webtv.*/
    max-width: 50%;
    margin: 0 auto;
}

hr {
    color: white;
}

#pageHeader a img {
    color: black;
    text-decoration: none;
    border: 0;
}

#pageLogo {
    max-width: 200px;
}

#pageContent {
    /* same shit as above */
    min-width: 350px;
    max-width: 50%;
    margin:0 auto;
    font-family: 'SpecialElite-Regular';
}

#pageContent img {
    max-width: 50%;
}

#pageContent a {
    color: #f27474;
}

#pageContent a img {
    border: 0;
}

#headerButtons {
    image-rendering: pixelated;
    min-width: 250px;
}

@font-face {
    font-family: 'SpecialElite-Regular';
    src: url(/assets/SpecialElite-Regular-dba5375769650ccf8308f24b73c5a1563d8a4731.ttf);
}

/*
    webtv (and probably other old browsers) doesn't know what @font-face is,
    so it just kind of stops there. now is a good time to set stuff up for
    modern browsers
*/
body {
    background: url(/assets/additionalbgelements-d8cea70cf1fada68be9ae6192ddae020f0b00eef.png) right fixed, 
                url(/assets/bg-e71a71b6b54883e062e0b5960a95d2b6bfaa91c2.gif) top fixed;
    background-repeat: no-repeat;
    background-size: 80% 100%;
    background-color: #000;
    color: white;
}

#app {
    top: 270px;
    left: 160px;
    position:absolute;
}

.marqueeWrapper {
    max-width: 100%;
    bottom: 0;
    position: fixed;
}
.marquee {
    white-space: nowrap;
    animation: marquee 3s linear infinite;
}

@keyframes marquee {
    0% {
        transform: translate(-50vh, 0);
    }

    100% {
        transform: translate(200vh, 0);
    }
}