body {
    font-family: "Segoe UI Semilight", "Ubuntu", "Sans";
    color: #fff;
	background: rgb(233,136,238);
	background: radial-gradient(circle, rgba(233,136,238,1) 0%, rgba(255,125,146,1) 100%);
	background-attachment: fixed;
	text-transform: capitalize;
}

a {
    color: #fdf;
    text-shadow: 0 0 0.3em #b0b;
    text-decoration: none;
	transition: 0.2s;
}
a:hover {
    text-shadow: 0 0 0.3em #f0f;
}
h2, p {
    font-weight: normal;
    text-shadow: 0 0 0.2em #a0f;
	transition: 0.2s;
	
}
p {
	text-transform: initial;
}
table {
    width: 100%;
	display: flex;
	overflow-x: auto;
}
th {
    text-align: left;
    font-weight: normal;
    background: #5034;
    padding: 5px;
    color: #fff;
    text-shadow: 0 0 0.3em #b0b;
}
td {
    background: #2042;
    padding: 2px;
	text-transform: initial;
}

.banner {
    margin: auto;
	display: flex;
	justify-content: center;
	margin-top: 2em;
	margin-bottom: 2em;
}

.banner #leftbanner {
	float: left;
	transition: 0.2s;
}

.banner #leftbanner img {
	width: 50%;
}

.banner #rightbanner {
	float: right;
	display: flex;
	align-items: center;
	margin-left: 1em;
	justify-content: center;
	height: 19em;
	transition: 0.2s;
}


.banner #rightbanner img {
	width: 22em;
}

.mainpage {
    background: #9495;
    padding: 4em;
    margin: 100px;
	border: solid 0.15em #80f5;
	transition: 0.2s;
}

.pages {
    background: #7076;
    padding: 1em;
    margin: 10px;
	transition: 0.2s;
	border: solid 0.15em #80f0;
    color: white;
}
.pages:hover {
    background: #00f6;
    padding: 1em;
    margin: 10px;
	border: solid 0.15em #80ff;
    color: white;
}
.navbar {
	display: flex;
	justify-content: center;
    margin: auto;
	transition: 0.2s;
}

.play {
	padding: auto;
	padding-top: 1em;
	padding-bottom: 1em;
	text-align: center;
	background: #a0f4;
	color: #8f87;
	transition: 0.2s;
}

.live {
	color: #f887;
	font-size: 150%;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
}

.play:hover {
	background: #a0fa;
	color: #8f8f;
}
.live:hover {
	color: #f88f;
}

@media (min-width: 1700px) {
	div.mainpage {
		margin: 20em;
		margin-top: 6em;
		margin-bottom: 6em;
	}
}
@media (max-width: 1140px) {
	div.mainpage {
		margin: 3em;
	}
}
@media (max-width: 1024px) {
	div.mainpage {
		margin: 0.5em;
	}
}

@media (max-width: 624px) {

	.banner #leftbanner {
		float: none;
	}

	.banner #leftbanner img {
		width: 12em;
	}

	.banner #rightbanner {
		float: none;
		display: flex;
		justify-content: center;
		height: 5em;
	}

	.banner #rightbanner img {
		width: 22em;
	}
	
	div.mainpage {
		margin: 1em;
	}
	.play {
		color: #8f8f;
	}
	
	.live {
		color: #f88f;
	}

}

@media (max-width: 600px) {
	.pages {
		display: inline-block;
		width: 88%;
	}
	.navbar {
		display: inline;
	}
}

@media (max-width: 398px) {
	.pages {
		width: 85%;
	}
	.banner #rightbanner img {
		width: 16em;
	}
}

@media (max-width: 320px) {
	.pages {
		width: 81%;
	}
	
	.banner #rightbanner img {
		width: 15em;
	}
	
	div.mainpage {
		padding: 0.25em;
		margin: 0.5em;
	}
}

@media (max-width: 230px) {
	.pages {
		width: 70%;
	}
	.banner #rightbanner {
		display: none;
	}
}

@media (max-width: 140px) {
	h2, p {
		font-size: 70%;
	}
	
	.pages {
		width: 50%;
		font-size: 70%;
	}
	
	.banner #leftbanner img {
		width: 5em;
	}
}