body {
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 0px;
	margin : 0px;
	border:0px;
    background-color: blue;
}

.divControles{
    position: absolute;
    top: 0px;
	height: 100%;
	width: 100%;
}

.justific{
	display: flex;
    justify-content: space-between;
	width: 100%;
}
.controles{
	font-size: 20px;
	height: 80%;
	bottom: 0
}
.dados{
	color: #9090FF;
	font-size: 20px;
	background-color: #0000FF;
	padding:2px;
	height: 20%;
}

.spanDebug{
	color: #FF0000;
	font-size: 15px;
}

.spanDados{
	color: #FFFFFF;
	font-size: 50px;
}
.bordas{
	border: 8px #3030FF;
	border-style: outset;
}
.divControEsq{
	margin-top : 5%;
	width: 40%;
}
.divControCentro{
	width: 20%;
	margin-top : 10%;
}
.divControDire{
	margin-top : 5%;
	width: 40%;
}
.divDadosP{
	width: 10%;
}
.divDadosM{
	width: 15%;
}
.divDadosG{
	width: 20%;
}

.joystickConteiner{
	width: 200px;
		height: 200px;
		align-items: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		border:solid 3px;
		border-radius:50%;
		border-color:#fff;
		background-color: #000;
		opacity: 0.2;
}              

.joystickClass{
	position: absolute;
		background-color: #fff;
		width: 100px;
		height: 100px;
		border:solid 3px;
		border-color:#000;
		border-radius:50%;
		opacity: 0.3;
		box-shadow: 1px 2px 10px black;
}

#DivIntro{
	padding-top: 100px;
	color:aquamarine;
	text-align: center;
	background-color:darkslategray;
	background-size: 100% 100%; /* estica a imagem para ocupar toda a div */
	background-repeat: no-repeat;
}