* { box-sizing:border-box; }
body {
	margin:0; padding:0;
	background:#222;
	color:white;
	font-family:sans-serif;
	font-weight:bold;
	letter-spacing:-0.05em;
	text-align:center;
	transition:background 0.5s;
}
a { color:inherit; }
#controls {
	position:fixed;
	bottom:0;
	width:100vw;
	background:#333;
	box-shadow:0 -0.4em 0.5em rgba(0,0,0,0.5);
	padding:0.5em;
	z-index:666;
}
#channels { float:left; }
#channel-selector {
	-webkit-appearance:none;
	-moz-appearance:none;
	background:linear-gradient(transparent 50%,rgba(0,0,0,0.1) 51%);
	padding:0.4em;
	border-radius:0.1em;
	font:26px 'Orbitron',monospace;
	color:rgba(240,220,255,1);
	text-shadow:0 0 0.5em mediumpurple;
}
#channel-name { display:none; opacity:0.6; }
#messages { float:right; }
#shapex-container {	animation:hidey 10s 5s infinite; }
#shapex {
	position:fixed;
	top:50%; left:50%;
	transform:translate(-50%,-50%);
	width:1000px;
	max-width:99vw;
	filter:drop-shadow(0 0 1vw rebeccapurple);
	animation:flicker 0.2s 0s infinite;
}
@keyframes flicker {
	0%,10%,14%,60%,70%,90% { filter:drop-shadow(0 0 1vw rebeccapurple) }
	1%,9%,26%,69%,72%,89%,99% { filter:drop-shadow(0 0 3vw rgba(200,150,200)) }
}
#grained-container {
	position:fixed;
	top:0; left:0;
	height:100vh; width:100vw;
	animation:hidey 10s 0s infinite;
}
@keyframes hidey {
	0%, 49%  { opacity:0; }
	50%,100% { opacity:1; }
}
@keyframes glow {
	from { filter:drop-shadow(0 0 3px white) }
	to   { filter:drop-shadow(0 0 12px white) }
}
input, button, select {
	-webkit-appearance:none;
	-moz-appearance:none;
	border:none;
	border-radius:0.2em;
	background:transparent;
	box-shadow:inset 0 3px 4px rgba(0,0,0,0.5);
	font:inherit;
	color:white;
	padding:0.5em;
	transition:opacity 1s;
}
section { display:none; }
#ShapeTV { display:block; }
section iframe {
	position:fixed;
	width:100vw; height:100vh;
	top:0; left:0;
	z-index:1;
}
@media screen and (min-width:600px) {
	#channel-name { display:inline-block; }
}