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

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

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

h1{
	display:none;
}

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

p{
	font-size:2em;
	font-weight:bolder;
	/*line-height:4em;*/
	color:black;
	
}

/*ÁREA DO FUNDO*/

section.batalha-naval{
	width: 100vw;
	height: 100vh;
	margin: auto;
	position:relative;
	background-image:url(../imagem-13-jogos-matematicos/013-025-01-fundo-batalha-naval-tela-cheia.jpg);
	background-repeat:no-repeat;
	border:	black 2px solid;
}

/*ÁREA DO JOGO*/

section.jogo{
	width: 100%;
	height: 100%;
	position: absolute;
	margin:auto;
	/*background-color:white;*/
	
}

/*BOTOES*/

div.botoes {
	width: 50px;
	height: 50px;
	padding: 2px 0 0 0;
	background-color: white;
	position: absolute;
	border: yellow solid 2px;
	text-align: center;
	vertical-align: middle;	
	animation-name: animacao;		
}

@keyframes animacao {
0%  {background-color:yellow; }
15%  {background-color:red; }
30%  {background-color:blue;}
45%  {background-color:green;}
50% {opacity:0;}
60% {background-color:orange;}
75% {background-color:cyan;}	 
90% {background-color:red;} 
100% {background-color:magenta;}	
}

#b3{
	top:300px;
	left:800px;
	animation-duration:2s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b5{
	top:498px;
	left:500px;
	animation-duration:3s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b7{
	top:155px;
	left:700px;
	animation-duration:4s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b11{
	top:252px;
	left:550px;
	animation-duration:5s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b17{
	top:548px;
	left:750px;
	animation-duration:4s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b19{
	top:450px;
	left:600px;
	animation-duration:3s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b23{
	top:350px;
	left:650px;
	animation-duration:4s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}


#b41{
	top:498px;
	left:898px;
	animation-duration:5s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b47{
	top:204px;
	left:450px;
	animation-duration:3s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b53{
	top:203px;
	left:850px;
	animation-duration:4s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

#b97{
	top:105px;
	left:550px;
	animation-duration:3s;
	animation-iteration-count:25;
	animation-timing-function:infinite;
}

/*AREA DOS INPUTS*/


section.coordenadas{
	width: 250px;
	height: auto;
	position: absolute;
	top:50px;
	left:100px;
	background-color:rgba(255, 255, 255, 0.4);
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*justify-content: space-around;*/
	border-radius:5px;
	box-shadow: 4px 4px 10px black;
}

input.meu-checkbox{
	width: 15px;
	height: 15px;
	margin:15px;
}

section.coordenadas p{
	font-size:1em;
	font-weight:bolder;
	/*line-height:4em;*/
	color:black;
}

/*CONTADOR*/

section.coordenadas{
	counter-reset: pontos; 
	/*CONTER RESET NÃO FUNCIONOU AQUI*/
}

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

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

/*CONTADOR*/


/*TELA INCIAR	*/

section.iniciar{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color:#2b7cb4;
	/*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: #06F;
	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:#06F;
    background-color: white;
	text-shadow: 2px 2px 2px black;
}

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

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

/*ESTE SELETOR DIV ROLAGEM É SEMELHANTE A PAG O12-25
O JOGO ESTAVA ESTOURANDO AS LATERAIS
ENTAO SURGIU A IDEIA DE POR JANELA OVERFLOW
EM VEZ DE IFRAME */
div#janela-rolagem-batalha-naval{
	/*height:450px;*/
	height: 100vh;
	overflow:auto;
	border:2px solid yellow;
	
}


/*TELA INCIAR	*/