/*Constants*/
*{
	-webkit-user-select:none;
	color:#9f9f9f;
	font-family:Ubuntu;
	margin:0;
	overflow:hidden;
	user-select:none;
}
body{
	animation:highlightOff .5s;
	background-color:#000;
}
canvas{
	animation:blurOff 1s;
	left:0;
	position:absolute;
	top:0;
	width:100%;
}
label{
	-webkit-animation:highlightOff .5s;
	animation:highlightOff .5s;
}
label:hover{
	animation:highlightOn .5s forwards;
	cursor:pointer;
}
.filter{
	left:20px;
	position:absolute;
}
.blocked,
.blocked label{
	animation:none;
	color:#333;
	pointer-events:none;
}
.dark,
.dark:hover{
	animation:none;
	color:#333;
}
.hidden{
	display:none;
}
/*Interactables*/
#loadFiles{
	left:50%;
	position:absolute;
	top:10px;
	transform:translate(-50%,0);
}
#omnisArena{
	top:20px;
}
#omnisArenaFiltered{
	top:40px;
}
#omnisArenaShips{
	top:60px;
}
#copy{
	bottom:20px;
	left:20px;
	position:absolute;
}
#output{
	height:calc(100% - 60px);
	left:200px;
	overflow:scroll;
	position:absolute;
	text-align:left;
	top:40px;
	white-space:pre-wrap;
	width:calc(100% - 200px);
}
/*Blur*/
@keyframes blurOff{
	0%{filter:blur(3px);}
	100%{filter:blur(0px);}
}
/*Highlight*/
@keyframes highlightOff{
	0%{color:#eee;}
	100%{color:#9f9f9f;}
}
@keyframes highlightOn{
	100%{color:#eee;}
}