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

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

}

body{
	
}

/*OBSERVACAO bug bug IMPORTANTE TIVE DE DESABILITAR NO HTML section class="jogo-quadrado-magico,
pois o formulario esta estourando na lateral para celular, parece imcompatibilidade
entre FORM E SECTION*/

section.jogo-quadrado-magico{
	width:550px;
	height:750px;
	margin:10px auto 10px auto;
	padding:20px;
	background-color:#2b7cb4;
	border-radius:5px;
	border: 0.5px solid rgba(0,0,0,0.5);
	box-shadow: 3px 3px 6px black;
	background-image:url(../imagem-13-jogos-matematicos/013-020-03-fundo-quadrado-magico-4x4-interativo.png);
}

h3.titulo-jogo-matematico{
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 28px;
	/*line-height:36px;*/
	color:yellow;
	
	/*margin:5px 0px 5px 0px;*/
	text-shadow:black 2px 2px;
	text-align:center;
}

form.quadrado-magico{
	width:500px;
	height:550px;
	/*height:auto;*/
	background-color:#999;
	margin:10px auto 10px auto;
	display:flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-around;
	box-sizing:border-box;
	border-radius:5px;
	box-shadow: 3px 3px 6px black;
	/*background:url(../imagem-13-jogos-matematicos/013-019-02-fundo-quadrado-magico-3x3-interativo.png);
	background-repeat: repeat-y;
	background-position: 50%;*/
	
}

input{
	width:50px;
	height:50px;
	margin: 5px;
	border: 1px solid black;
	font-family:Verdana, Geneva, sans-serif;
	font-weight:bolder;
	font-size:16px;
	text-align:center;
	font-heigth: 50px;
	padding:0;
	box-shadow: 2px 2px 4px black;
}

.b1, .b2, .b3, .b4, .b5, .b6{
	background-color: white;
	color:black;
}

.b7, .b8, .b9, .b10, .b11, .b12{
	background-color: white;
	color:black;
}

.b13, .b14, .b15, .b16, .b17, .b18{
	background-color:white;
	color:black;
}

.b19, .b20, .b21, .b22, .b23, .b24{
	background-color:white;
	color:black;
}

.b25, .b26, .b27, .b28, .b29, .b30{
	background-color:#white;
	color:black;
}

.b31, .b32, .b33, .b34, .b35, .b36{
	background-color:#white;
	color:black;
}

.bsoma{
	background-color:yellow;
	
}

.bajuste{
	background-color:gray;
	
}

div#janela-rolagem-numerok{
	height:auto;
	overflow:auto;
	border:2px solid yellow;
	
}