@charset "utf-8";
/* CSS Document */

/*AQUI COMEÇA COMANDO RESPONSIVO PARA 480PX*/

@media screen and (max-width:480px)
{

*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

body{
	font-family:Verdana, Geneva, sans-serif;
}

section.quadrado-magico{
	width: 400px;
	height:450px;
	margin: 20px 0 0 5px;
	position:absolute;
	background-image: url(../imagem-13-jogos-matematicos/013-028-02-quadrado-magico-3x3-on-line.jpg);
	border-box: black 3px solid;
	box-shadow:black 2px 2px 8px;
}

section.quadrado-magico img{
	display:block;
	max-width:100%;
	height:auto;
	margin: 0px 0px 0px -10px;
}

/*AREA DO JOGO*/

div.area-jogo{
	width:450px;
	height:450px;
	margin: 0px 0px 0px 0px;
	position:relative;
	/*display:flex;*/
	/*flex-direction: row;*/
	/*justify-content: space-around;*/
	/*justify-content: space-between;*/
	/*background-color:red;*/
}

div.celula{
	width:50px;
	height:50px;
	/*background-color:yellow;*/	
}

div#div1{
	top:150px;
	left:100px;
	position:relative;
	/*background-color:blue;*/
}

div#div2{
	top:100px;
	left:150px;
	position:relative;
	/*background-color:green;*/
}

div#div3{
	top:50px;
	left:200px;
	position:relative;
	/*background-color:yellow;*/
}

div#div4{
	top:50px;
	left:100px;
	position:relative;
	/*background-color:red;*/
}

div#div5{
	top:0px;
	left:150px;
	position:relative;
	/*background-color:white;*/
}

div#div6{
	top:-50px;
	left:200px;
	position:relative;
	/*background-color:red;*/
}

div#div7{
	top:-50px;
	left:100px;
	position:relative;
	/*background-color:yellow;*/
}

div#div8{
	top:-100px;
	left:150px;
	position:relative;
	/*background-color:green;*/
}

div#div9{
	top:-150px;
	left:200px;
	position:relative;
	/*background-color:blue;*/
}


/*AREA DOS BOTOES*/

div.area-botoes{
	width:380px;
	height:100px;
	/*top:-100px;*/
	margin: 0px 0px 0px 0px;
	position:relative;
}


/*BOTOES */

	button.b1{
	color: white;
 	background-color:rgb(0, 0, 255, 1);
	/*position:relative;*/
	font-size:20px;
	width:50px;
	height:50px;

}
	
	button.b2{
	color:black;
	background-color:rgb(0, 255, 0, 1);
	/*position:relative;*/
	font-size:20px;
	width:50px;
	height:50px;
}

	button.b3{
	color:black;
	background-color:rgb(255, 255, 0, 1);
	position:relative;
	font-size:20px;
	width:50px;
	height:50px;
}

	button.b4{
	color:black;
	background-color:rgb(255, 0, 0, 1);
	position:relative;
	font-size:20px;
	width:50px;
	height:50px;
}

	button.b5{
	color:black;
	background-color:rgb(255, 255, 255, 1);
	/*display:block;*/
	position:relative;
	font-size:20px;
	width:50px;
	height:50px;
}

	button.b6{
	color:black;
	background-color:rgb(255, 0, 0, 1);
	/*display:block;*/
	position:relative;
	font-size:20px;
	width:50px;
	height:50px;
	
}
	
	button.b7{
	color:black;
	background-color:rgb(255, 255, 0, 1);
	position:relative;
	font-size:20px;
	width:50px;
	height:50px;
	
}

	button.b8{
	color:black;
	background-color:rgb(0, 255, 0, 1);
	position:relative;
	font-size:20px;
	width:50px;
	height:50px;
	
}

	button.b9{
	color:white;
	background-color:rgb(0, 0, 255, 1);
	position:relative;
	font-size:20px;
	width:50px;
	height:50px;
	
}


}