body {
    background-image: url("background.gif");
    background-color: #151;
    font-family: "Comic Sans MS";
    animation: bgmove 1.5s linear infinite;
}
#main{
	max-width: 100%;
	border: 25px solid green;
	padding: 25px;
	margin: 112px;
	background-color: #1c1;
	animation: maincolor 20s ease infinite;
}
#title {
	align-content: center;
	max-width: 50%;
	padding: 75px;
	margin: auto;
	background-color: #5d5;
	animation: innercolor 20s ease infinite;
}
#inner {
	background-color: #5d5;
	padding: 10px;
	margin: auto;
	width: 90%;
	animation: innercolor 20s ease infinite;
}
ul {
	text-align: left;
}
#footer {
	width: 100%;
	border: 2px solid black;
	background-color: #fff;
	margin: auto;
}
#banner {
	font-family: "Times New Roman";
	font-size: 50px;
	align-content: center;
	width: 50%;
	padding: 10px;
	border: 5px solid green;
	margin: auto;
	margin-top: 25px;
	background-color: #7d7;
	animation: rainbowcolor 10s linear infinite;
}
p {
	text-align: center;
}
h1 {
	text-align: center;
}
h2 {
	text-align: center;
}
#titleimg {
	width: 100%;
	z-index: 1;
	animation: rotatetitleimg 2s linear infinite;
}

#noobstream {
	background-color: skyblue;
	margin: auto;
	padding: 16px;
	width: fit-content;
}

#livestream {
	background-color: #bc0;
	margin: auto;
	padding: 16px;
	width: fit-content;
}

#hardcorestream {
	background-color: darkred;
	margin: auto;
	width: fit-content;
	padding: 16px;
	color: white;
	animation: hardcorebg 2s ease infinite;
}

#hardcorestream:hover {
	animation: hardcorebg 0.25s ease infinite;
}

@keyframes rotatetitleimg {
	0% {-webkit-transform: rotate(0deg); animation-timing-function: ease-out;}
	25% {-webkit-transform: rotate(20deg); animation-timing-function: ease-in;}
	50% {-webkit-transform: rotate(0deg); animation-timing-function: ease-out;}
	75% {-webkit-transform: rotate(-20deg); animation-timing-function: ease-in;}
	100% {-webkit-transform: rotate(0deg); animation-timing-function: ease-out;}
}

@keyframes bgmove{
	0%{background-position: 128px 151px;}
	100%{background-position: 0px 0px;}
}

@keyframes maincolor {
	0%{background-color: #5d5; border-color: #070;}
	50%{background-color: #570; border-color: #460;}
	100%{background-color: #5d5; border-color: #070;}
}
@keyframes innercolor {
	0%{background-color: #5d5}
	50%{background-color: #590}
	100%{background-color: #5d5}
}

@keyframes rainbowcolor {
	0%{background-color: #f00; border-color: #f0f;}
	16.67%{background-color: #ff0; border-color: #f00;}
	33.34%{background-color: #0f0; border-color: #ff0;}
	50%{background-color: #0ff; border-color: #0f0;}
	66.67%{background-color: #00f; border-color: #0ff;}
	83.33%{background-color: #f0f; border-color: #00f;}
	100%{background-color: #f00; border-color: #f0f;}
}



@-webkit-keyframes rotatetitleimg {
	0% {-webkit-transform: rotate(0deg); animation-timing-function: ease-out;}
	25% {-webkit-transform: rotate(20deg); animation-timing-function: ease-in;}
	50% {-webkit-transform: rotate(0deg); animation-timing-function: ease-out;}
	75% {-webkit-transform: rotate(-20deg); animation-timing-function: ease-in;}
	100% {-webkit-transform: rotate(0deg); animation-timing-function: ease-out;}
}

@-webkit-keyframes bgmove{
	0%{background-position: 128px 151px;}
	100%{background-position: 0px 0px;}
}

@-webkit-keyframes maincolor {
	0%{background-color: #5d5; border-color: #070;}
	50%{background-color: #570; border-color: #460;}
	100%{background-color: #5d5; border-color: #070;}
}
@-webkit-keyframes innercolor {
	0%{background-color: #5d5}
	50%{background-color: #590}
	100%{background-color: #5d5}
}

@-webkit-keyframes rainbowcolor {
	0%{background-color: #f00; border-color: #f0f}
	16.67%{background-color: #ff0; border-color: #f00}
	33.34%{background-color: #0f0; border-color: #ff0}
	50%{background-color: #0ff; border-color: #0f0}
	66.67%{background-color: #00f; border-color: #0ff}
	83.33%{background-color: #f0f; border-color: #00f}
	100%{background-color: #f00; border-color: #f0f}
}


@-moz-keyframes rotatetitleimg {
	0% {-moz-transform: rotate(0deg); animation-timing-function: ease-out;}
	25% {-moz-transform: rotate(20deg); animation-timing-function: ease-in;}
	50% {-moz-transform: rotate(0deg); animation-timing-function: ease-out;}
	75% {-moz-transform: rotate(-20deg); animation-timing-function: ease-in;}
	100% {-moz-transform: rotate(0deg); animation-timing-function: ease-out;}
}

@-moz-keyframes bgmove{
	0%{background-position: 128px 151px;}
	100%{background-position: 0px 0px;}
}

@-moz-keyframes maincolor {
	0%{background-color: #5d5; border-color: #070;}
	50%{background-color: #570; border-color: #460;}
	100%{background-color: #5d5; border-color: #070;}
}
@-moz-keyframes innercolor {
	0%{background-color: #5d5}
	50%{background-color: #590}
	100%{background-color: #5d5}
}

@-moz-keyframes rainbowcolor {
	0%{background-color: #f00; border-color: #f0f}
	16.67%{background-color: #ff0; border-color: #f00}
	33.34%{background-color: #0f0; border-color: #ff0}
	50%{background-color: #0ff; border-color: #0f0}
	66.67%{background-color: #00f; border-color: #0ff}
	83.33%{background-color: #f0f; border-color: #00f}
	100%{background-color: #f00; border-color: #f0f}
}

@keyframes hardcorebg {
	0%{background-color: #500}
	50%{background-color: #a00}
	100%{background-color: #500}
}