html, 
body
{
	padding : 0px;
	margin : 0px;
	width:100%;
	height:100%;
	text-align:center;
	background: black;
	color:white;
	display : flex;
	font-family:arial;
}

/*
	position:absolute;
	top:0px;
	left:0px;	
*/

canvas
{
	display : flex;
	width : 720px;
	height : 720px;
	border : 1px solid red;
	background : black;
	align-self: center;
	margin: auto;
	box-shadow: rgb(0, 0, 0) 0px 20px 30px -10px;
}

.color
{
	width:35px;
}

.header		
{
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	z-index : 1000;
	text-align:center;
	color:white;	
}

#controllers
{	
	display:flex;
	align-self: center;
	position:fixed;
	top:25px;
	right:25px;
	flex-direction:column;	
	color:#222222;
	font-weight:bold;
	border:1px solid yellow;
	background:#FFFFFFFF;
	row-gap: 10px;
	padding: 10px;
	width:50px;
	height:50px;
	overflow:hidden;
	background-image:url("../images/parameters.png");
	background-size:cover;	
	transition: width 0.3s, height 0.3s;
}

#controllers:hover
{
	background:#FFFFFF88;
	width:250px;
	height:550px;
}

#controllers *
{
	opacity : 0;
}

#controllers:hover *
{
	opacity : 1;
}

#colors
{
	text-align : center;
}

#fps
{
	position:fixed;
	bottom:0px;
	right:0px;
	padding:10px;
	z-index : 1000;
	color: white;
	background : black;
}
#uLifeMin,
#uLifeMax
{
	width:60px;
}