body {
    background-image: url('/media/gifs/checkertileyao.gif');
    cursor: url("/media/misc/cursor.cur"), auto;
}
/* test comment */
h1{
    color:white;
}

p{
    color:white;
}

iframe{
    border:none;
}

.tab {
    background-color: #708090;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

li{
    display: inline;
    padding: 8px;
}

/* 
i got this idea for the scrollable updates from seafare.neocities.org
very cute site ^w^
*/
.updates {
    height: 175px;
    overflow: auto;
    background-color: #323940;
}

.updates a:link {
    color:white;
}

.updates a:visited {
    color: #ff2ff5;
}

.mini {
    max-width: 265px;
}

#listening {
    background-image: url("/media/gifs/nowlistening.gif");
    width: 315px;
    height: 31px;
    margin-top: 0%;
    margin-bottom: 2px;
    
}

.listentext{
    color: #000000;
    font-size: 14px;
    text-shadow: 1px 1px #773030, 3px 3px #306ba7;
    font-family: 'Courier New', Courier, monospace;
    line-height: 2px;
}

/* Marquee Code gracefully stolem from https://bennadel.com/4536 */
.marquee {
			display: flex ;
			overflow: hidden ;
			white-space: nowrap ;
			width: 315px ;
            padding-left: 5;
		}
		
.marquee__item {
	animation-duration: 4s ;
	animation-iteration-count: infinite ;
	animation-name: marquee-content ;
	animation-timing-function: linear ;
	padding: 0px 0px 0px 0px ;
    padding-left: 43px;
}
		
.marquee:hover .marquee__item {
	animation-play-state: paused ;
}

/**
* BOTH of the marquee items are going to be translating left at the same time.
* And, once each of them has translated to -100%, they will both snap back into
* place, making it seem as if they are continuously scrolling. -Bennadel (not me)
*/
@keyframes marquee-content {
	from {
		transform: translateX( 0% );
	}
	to {
		transform: translateX( -100% );
	}
}

.marquee2 {
			display: flex ;
			overflow: hidden ;
			white-space: nowrap ;
			width: 400px ;
            height: 75px;
            padding-bottom: 0;
            background-image: url(/media/gifs/portalboth.gif);
            background-size: 255px;
            background-repeat: no-repeat;
		}

.marquee__item2 {
	animation-duration: 3s ;
	animation-iteration-count: infinite ;
	animation-name: marquee-content2 ;
	animation-timing-function: linear ;
	padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

@keyframes marquee-content2 {
	from {
		transform: translateX( 125% );
	}
	to {
		transform: translateX( -35% );
	}
}