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

/*DIFERENTE DOS OUTROS JOGOS
FORAM FEITAS DUAS DIVS COM 
AS MESMAS MEDIDAS: DIV.JOGO E 
DIV.INPUT TRANSPARENTE (EM CIMA DA DIV.JOGO
PARA QUE OS INPUTS PUDESSEM SER POSICIONADOS
EM CIMA DE CADA BOTAO*/
 
*{
	margin:0;
	padding:0;
	box-sizing:border-box;

}

body{
	font-family:	"Arial Black", Gadget, sans-serif;
	font-size:16px;
	font-size:100%;
	/*counter-reset: pontos;*/
}

h1{
	visibility:hidden;
	/*display:none;*/
	/*este h1 tem ficar escondido*/
}

h2{
	font-size:2em;
	line-height:2em;
	color: #FFF;
	text-shadow: 2px 2px 2px  #333333;
	
}

p{
	font-size:1em;
	line-height:2em;
	color:#000;
	
}

section.pula-primos{
	width:100vw;
	height:100vh;
	margin:0;
	/*background-color:rgba(255, 0, 0, 0.2);*/
	border: #0F0 solid 6px;
	position:relative;
	overflow:hidden;
	background: url(../imagem-13-jogos-matematicos/013-018-02-fundo-logotipo-jogos-matematicos.png) repeat-y;
	/*background-repeat: repeat-y;*/
	/*background-position: 5%;*/
	/*background-color:#2b7cb4;*/
	background-image: linear-gradient(to right, rgba(43,124,180,1), rgba(43,124,180,1), rgba(255,255,255,1), rgba(43,124,180,1), rgba(43,124,180,1));
	
	/*observação: BUG??? fundo degrade não está aceitando imagem de fundo*/
}

div.jogo{
	width:50vw;
	height:320vh;
	margin:-320vh 25vw 0 25vw;
	position:absolute;
	/*background-color:#2b7cb4;*/
	/*background-color:rgba(43,124,180,1);*/
	/*background-image: linear-gradient(to right, rgba(43,124,180,1), rgba(43,124,180,1), rgba(255,255,255,1), rgba(43,124,180,1), rgba(43,124,180,1));*/
	border: #FF0 solid	 2px;
	box-shadow: 5px 5px 90px yellow;
	background: url(../imagem-13-jogos-matematicos/013-018-02-fundo-logotipo-jogos-matematicos.png);
	background-repeat: repeat-y;
	background-position: 50% ;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	/*justify-content: space-between;*/
	animation-name: jogo;
	animation-duration:20s;
	animation-iteration-count:1;
	animation-timing-function:linear;
	/*animation-fill-mode: backwards;*/
	animation-fill-mode: forwards;
	/*overflow:auto;*/
}

@keyframes jogo {
from {top:0vh;}
to {top:320vh;}

}

div.input-transparente{
	width:50vw;
	height:320vh;
	margin:-320vh 25vw 0 25vw;
	position:absolute;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	animation-name: inputes;
	animation-duration:20s;
	animation-iteration-count:1;
	animation-timing-function:linear;
	/*animation-fill-mode: backwards;*/
	animation-fill-mode: forwards;
	/*overflow:auto;*/
}

@keyframes inputes {
from {top:0vh;}
to {top:320vh;}

}

/*BOTOES*/

button.primo{
	width:10vw;
	height:20vh;
	margin: 1vw 1vw 1vw 1vw; 
	background-color: #00B000;/*rgba(0, 255, 0, 1)*/;
	font-size:2em;
	font-weight:bolder;
	color:black;
	text-shadow: white 1px 1px;
	box-shadow: 2px 2px 4px black;
		
}
	
button.composto{
	width:10vw;
	height:20vh;
	margin: 1vw 1vw 1vw 1vw; 
	background-color: #00D900;/*rgba(0, 255, 0, 0.7)*/;
	font-size:2em;
	font-weight:bolder;
	color:black;
	text-shadow: white 1px 1px;
	box-shadow: 2px 2px 4px black;
	/*counter-increment:pontos;*/	
}

/*Observação: BUG???
as input.moedas sobrepuseram 
os estados dos botões

/*button.composto:a{
	width:10vw;
	height:20vh;
  	color: black;
 	background-color:rgba(0, 255, 0, 0.2);
 	text-decoration:none;
	counter-increment:pontos;
}*/

/*button.composto:hover{
	width:10vw;
	height:20vh;
  	color: black;
 	background-color:rgba(0, 255, 0, 0.2);
 	text-decoration:none;
}*/

/*BOTOES*/

/*MOEDAS*/

input.moeda{
	width:10vw;
	height:20vh;
	/*top:-320vw;*/
	margin: 1vw 1vw 1vw 1vw;
	/*position: absolute;*/
	/*appearance:none;*/
	/*visibility:hidden;*/ /*não funcionou-esconde tudo*/
	/*left:-9999px;*/
	/*position:relative;*/
	/*display:none;*/ /*não funcionou - esconde tudo*/
	opacity: 0.1;
	
	/*observação: as input.moedas dos primos estão 
	com visibility:hidden no html 
	para não haver pontuação*/
}

/*MOEDAS*/

/*CONTADOR*/

div.input-transparente{
	counter-reset: pontos; 
	/*CONTER RESET NÃO FUNCIONOU AQUI*/
}

div.input-transparente::after{
	content:"Total: " counter(pontos) " /37";
	/*z-index: 5; */ /*não funcionou - bolinha fica em cima*/
	width:/*15vw;*/200px;
	height:/*5vh*/ 40px;
	top:0/*-140vw*/;
	right:0/*50vh*/;
	/*float:right;*/
	font-size:24px;
	font-weight:bolder;	
	text-align:center;
	text-shadow: white 1px 1px;
	/*vertical-align:	middle;*/
	background-color:#FC0;
	/*z-index:2;*/
	/*position:relative;*/
	position:absolute;
	border-radius:5px;
	box-shadow: 2px 2px 6px black;
}

input.moeda:checked{
	counter-increment:pontos;
	visibility:hidden; /*esconde a marca checked*/
}

/*CONTADOR*/	
	
	
	
/*TELA INCIAR	*/

section.iniciar{
	/*width: 100%;*/
    /*height: 100%;*/
	width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-color:#390;
	/*background-image: linear-gradient(to right, #390, #390, rgba(255,255,255,1), #390, #390);*/
    z-index:20;
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
	background-image:url(../imagem-13-jogos-matematicos/013-018-000-fundo-abertura-logotipo-jogos-matematicos.png);
	background-repeat: no-repeat;
	background-position: 2% 2%;
	
	/*observação: BUG??? fundo degrade não está aceitando imagem de fundo*/
	
}

label[for="iniciar"]{
	width:30%;
	height:auto;
	display:block;
	background:#063;
	margin:5% auto 5%  auto;
	border-radius: 10px 10px 0px 0px;
	box-shadow: 5px 5px 10px black;
	color:white;
	font-size:2em;
	text-align:center;
	line-height:2em;
	font-weight:900;
}

label[for="iniciar"]:hover {
    color:#063;
    background-color: white;
	text-shadow: 2px 2px 2px black;
}

input#iniciar:checked~.iniciar{
	display:none;
	
}

input#iniciar{
	display:none;
	width:0px;
	height:0px;
}

/*TELA INCIAR	*/