@charset "utf-8";

/* CSS Document */

/*DIFERENTE DOS OUTROS JOGOS,
OS INPUTs FORAM COLOCADOS
NA DIV AREA DO BARALHO, DESTA FORMA
FOI POSSIVEL MARCAR PONTOS
OS INPUTS NA TAG P DO BUTTON NÃO DERAM CERTO
OS INPUTS  NA AREA DE FUNDO NÃO DERAM CERTO*/

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

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

h1{
	display:none;
}

h2{
	color: black;
	font-size:2em;
	line-height:2em;
	text-shadow: 1px 1px white;
}

p{
	font-size:1.5em;
	font-weight:bolder;
	line-height:4em;
	color:black;
	text-shadow:1px 1px white;
}

img{
	max-width:100%;
	height:auto;
}

/*ÁREA DO FUNDO*/

section.frente-verso-numeros-primos{
	width: 100vw;
	height: 100vh;
	padding:5vw 12vh;
	position:relative;
	border:	yellow 1px solid; /*observacao: BUG??? se aumentar a borda, desconfigura o display flex*/
	/*background-color:#FFC;*/
	background-image: url(../imagem-13-jogos-matematicos/013-032-03-fundo-carteado.jpg);
	/*background:no-repeat;*/
	background-size: 100% 100%;
	box-sizing:border-box;
	overflow:hidden;
	/*cursor:	url(../imagem-13-jogos-matematicos/013-029-004-carrinhos-00-cursor.png), pointer;*/
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-around;
	
}

/*ÁREA 2 CARTAS BARALHO - area animacao e perspectiva*/

div#area-baralho{
	width: 100px;
	height: 150px;
	perspective: 100; /*obervacao - nao esta funionando*/
	-webkit-perspective:100;
	/*background-color:#FCC;*/
	/*border:black solid 1px;*/
	/*position:absolute;*/
	position:relative;		
}

/*BARALHO GIRANDO - quando mouse passa em cima*/

div#area-baralho:hover div.baralho-girando, div#area-baralho:hover div.baralho-girando{
	transform:rotateY(180deg);

}

/*BARALHO GIRANDO - velocidade transicao*/

div.baralho-girando{
	width: 100%;
	height: 100%;
	transition: 0.6s;  	
  	transform-style: preserve-3d;    	
  	position: absolute;

}

button.baralho-frente{
	width: 100%;
	height: 100%;
	display:block;
	backface-visibility: hidden;    	
  	position: absolute;
  	top: 0;  	
 	left: 0;
	z-index:2;
	background-image:url(../imagem-13-jogos-matematicos/013-037-02-carta-frente.jpg);
}

button.baralho-verso{
	width: 100%;
	height: 100%;
	display:block;
	backface-visibility: hidden;    	
	position: absolute;
  	top: 0;  	
 	left: 0;
	transform:rotateY(180deg);
	background-image:url(../imagem-13-jogos-matematicos/013-037-01-carta-verso.jpg);
}

button{
	font-size:2.5em;
	color:yellow;
	font-weight:bolder;
	text-shadow:black 3px 3px;
}

/*MOEDAS*/

input.moeda{
	width:100px;
	height:150px;
	/*top:-320vw;*/
	/*padding: 5px;*/
	/*margin: 0 auto 0 auto;*/
	/*position: absolute;*/
	/*appearance:none;*/
	/*visibility:hidden;*/ /*não funcionou-esconde tudo*/
	/*left:-9999px;*/
	/*position:relative;*/
	/*display:none;*/ /*não funcionou - esconde tudo*/
	opacity: 0;
	
}

/*MOEDAS*/


/*CONTADOR*/

section.frente-verso-numeros-primos{
	counter-reset: pontos; 
	
}

section.frente-verso-numeros-primos::after{
	content:"Total: " counter(pontos) " /11";
	width:200px;
	height:30px;
	top:0;
	right:12vh;
	font-size:24px;
	font-weight:bolder;	
	text-align:center;
	text-shadow: white 1px 1px;
	background-color:#FC0;
	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: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
   /* background-color: #39C;*/
	/*background-image: linear-gradient(to right, #390, #390, rgba(255,255,255,1), #390, #390);*/
    z-index:20;
    text-align: center;
    /*color: orange;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
	background-image: url(../imagem-13-jogos-matematicos/013-037-04-fundo-iniciar.jpg);
	background-repeat: no-repeat;
	/*background-position: 2% 2%;*/
	text-shadow:black 1px 1px;
	
	/*observação: BUG??? fundo degrade não está aceitando imagem de fundo*/
	
}

label[for="iniciar"]{
	width:30%;
	height:auto;
	display:block;
	background:green;
	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: green;
    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	*/