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


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

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

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

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

section.numeros-quadrados{
	width: 90%;
	height: 400px;
	/*width: 40vw;*/
	/*height: 40vw;*/
	margin: auto;
	position:relative;
	background-color: #2b7cb4;
	/*z-index:10;*/
	border: #000 thin	solid;
	border-radius:5px;
	background-image:url(../imagem-13-jogos-matematicos/013-008-01-fundo-logotipo-jogos-matematicos.png);
	background-repeat: repeat-y;
	background-position: 50% ;
	cursor:	url(../imagem-13-jogos-matematicos/013-008-01-cursor-jogo.jpg), pointer;
}

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

/*AREA DO JOGO*/

div.jogo{
	position:absolute;
	width:100%;
	height:100%;
	margin: 0px 0px 0px 0px;
	/*display:flex;*/
	/*flex-direction: row;*/
	/*justify-content: space-around;*/
	/*justify-content: space-between;*/
}

/*BOTOES */

button.botao{
	width:25px;
	height:25px;
	background-color:rgb(0, 0, 255, 1);
	/*position:relative;*/
	position:absolute;
	z-index: -1;
	color: white;
	font-size:16px;
	
	/*border-radius: 50%;*/
	/*left:5%;*/
	/*top:268px;*/
	animation-name: anima;
	/*animation-duration: 4s;*/
	
}

@keyframes anima {
0% {
	top:0; 
  	z-index:-1;
}

1%{
	top:0; 
	z-index:2;
}
	  
  100% {
	  top: calc(100% - 30px) ;
	  z-index:2;
}
}

/*PRIMEIRO ESTÁGIO*/

#b1, #m1{	
	left:0%;
	animation-duration:4s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}
	
#b2 {	
	left:10%;
	animation-duration:5s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b3{	
	left:20%;
	animation-duration:6s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}
	
#b4, #m4{	
	left:30%;
	animation-duration:4s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}
	
#b5 {	
	left:40%;
	animation-duration:5s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}
	
#b6 {	
	left:50%;
	animation-duration:6s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}
	
#b7{	
	left:60%;
	animation-duration:7s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b9, #m9{	
	left:70%;
	animation-duration:4s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b10{	
	left:80%;
	animation-duration:5s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}

#b11{	
	left:90%;
	animation-duration:6s;
	animation-iteration-count:2;
	animation-timing-function:infinite;
}
	

/*SEGUNDO ESTÁGIO*/

/*#b8, #b9, #b10, #b11, #b12, #b13, #b14{
	animation-delay:10s;
	animation-timing-function:infinite;
	background-color:rgb(255, 0, 0, 1);
	
}*/

/*TERCEIRO ESTÁGIO*/

/*#b15, #b16, #b17, #b18, #b19, #b20, #b21{
	animation-delay:15s;
	animation-timing-function:infinite;
	background-color:rgb(0, 255, 0, 1);
	
}*/



/*MOEDAS */

input.moeda{
	/*color: white;*/
 	/*background-color:rgba(255, 255, 0, 0.1);*/
/*	box-shadow: 0px 0px 10px 4px darkgoldenrod;*/
	/*position:relative;*/
	position:absolute;
	/*z-index: -1;*/
	font-size:16px;
	width:25px;
	height:25px;
	/*border-radius: 50%;*/
	/*left:5%;*/
	/*top:268px;*/
	animation-name: anima;
	/*animation-duration: 4s;*/
	-webkit-appearance:none;
	appearance:none;
	
}

/*CONTADOR*/

div.jogo{
	counter-reset: pontos;
}

div.jogo::after{
	content:"Total:" counter(pontos) "/3";
	/*z-index: 5;*/  /*não funciona - bolinha fica em cima*/
	width:100px;
	height:20px;
	top:0px;
	right:50px;
	float:right;
	font-size:16px;
	/*font-height:20px;*/ /*não funciona*/
	font-weight:bolder;	
	text-align:center;
	vertical-align:	middle;
	background-color:#FC0;
	border-radius:4px;
	box-shadow: 2px 2px 8px black;
}

input.moeda:checked{
	counter-increment:pontos;
	visibility:hidden;
}


/*GAME OVER*/

/*GAME OVER*/

div.opa{
	width:100%;
	height:100%;
	display:none;
	position:absolute;
	top:0;
	left:0;
	background-color:red;
	z-index:10;
	font-size:24px;
	font-weight:bolder;	
	text-align:center;
	vertical-align:	middle;
	/*line-height:100%;*/
}

button.botao:hover ~ div.opa{
	display:block;
}

div.opa:hover{
	display:block;
}

}