/* Comentario */

/* 
nome de uma tag{...}
#nome de uma tag com id{...}
.nome de uma tag com uma classe{...}
 */

*{
	margin:0px;
	padding:0px;
	
	}

	img{
		display: block;
		width: 100%;
		
	}

 /*TEXTO*/

	.titulo-A{ 
		font-family: "Roboto Serif", serif;
		font-weight: 500;
		color:#44FF4B;
		font-size: 50px;
		margin-top: 30px;
		margin-bottom:40px;
		

	}
	.titulo-B{
		font-family: "Roboto Serif", serif;
		color: #071539;
		font-size: 30px;
        margin-bottom: 30px;
	}

	.titulo-C{
		font-family: "Roboto Serif", serif;
		font-weight: 400;
		color: #FFF7AB;
		font-size: 30px;
        margin-bottom: 10px;
	}

	.titulo-D{
		font-family: "Roboto Serif", serif;
		font-weight: 600;
		color: #196232;
		font-size: 30px;
        margin-bottom: 30px;
		text-align: center;
	}

	.titulo-E{
		font-family: "Roboto Serif", serif;
		font-weight: 600;
		color: #FFF7AB;
		font-size: 26px;
		line-height:26px;		
		max-width: 100%;
        margin-bottom: 30px;
		
	
	}
    
	.titulo-norman{
		font-family: "Roboto Serif", serif;
		color: #30251A;
		font-size: 30px;
        margin-bottom: 10px;
		text-align: center;
	}


	.titulo-personagens{
		font-family: "Roboto Serif", serif;
		color: #30251A;
		font-size: 16px;
        margin-bottom: 10px;
		
	}



	.texto{
		font-family: "Roboto Serif", serif;
		font-weight: 400;
		color: #FFF7AB;
		font-size: 16px;
        margin-bottom: 30px;
		line-height:26px;
		
		
	}
	.texto-2{
		font-family: "Roboto Serif", serif;
		font-weight: 400;
		color: #071539;
		font-size: 26px;
        margin-bottom: 10px;
		line-height:26px;
		
	}
	.texto-3{
		font-family: "Roboto Serif", serif;
		font-weight: 400;
		color: black;
		font-size: small;
		margin-bottom: 30px;
		text-align: center;
	}
	.texto-P{
		font-family: "Roboto Serif", serif;
		font-weight: 400;
		color: black;
		font-size: small;
		margin-bottom: 30px;
	}


	.texto-4{
		font-family: "Roboto Serif", serif;
		font-weight: 600;
		color: #ffffff;
		font-size: 26px;
        margin-bottom: 10px;
		line-height:26px;
	    align-self: center;
	   
		
	}

 /*ESTRUTURA*/




	.header{
        width: 100%;



	}


    .header{
		width: 100%;



		
		
		
			}


	.section{
		width: 100%;
				
				
				
					
			
			}


    .section{
        width: 100%;
						
						
						
			}	

.header-container{
        width: 100%;
	    max-width: 900px;
        margin-left: auto;
		margin-right: auto;
		justify-content: space-between;
		display: flex;
		align-items: center;
}

.logo{
	color: #44FF4B;
	font-family: "Roboto Serif", serif;
    font-weight: 600;
    font-size: 30px;
	text-align: center;
	
}


nav li{
       list-style-type: none;
	   padding-left:  30px; ;


}

nav ul{
	display: flex;
}

nav a{

	color: #44FF4B;
	text-decoration: none;
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	

}

nav a:hover{color: #ffffff;
	text-decoration: underline;

}


.container{
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.footer-container{
	width: 100%;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;

}

footer p{
         color: white;
		 text-align: center;  
		 margin-bottom: 10px;    
		 font-family: "Roboto Serif", serif;   
		 font-size:18px;
		 font-weight: 400;                                                                         

}


.container-topo{
	width: 100%;
	height: 500px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-image: url(imagens/Frame1.jpg);
	background-repeat: no-repeat;
	background-size:cover;
}

.container-2{
	width: 100%;
	height: 500px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	background-image: url(imagens/frame16.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	
}

.caixa-topo{
            text-align: center;
			max-width: 100%;
			margin-left: auto;
			margin-right: auto;
			display: flex;
			
			
}



/*CORES DE FUNDO*/

.bc-escuro{
	background-color:#0D1731;
	
}
.bc-meio{
	background-color: #0c551c;

}.bc-claro{
	background-color: #B4D134;

}
	.caixa-post{
		width: 262px;
		height: 328px;
		background-color: rgb(21, 216, 206);
	} 

	.teste{
		width: 750px;
		height: 360px;
		background-color: rgb(21, 216, 206);
	
	
	} 
.caixa-p{
	background-color: #FFF7AB;
       display: flex;
}
.caixa-t{background-color: #FFF7AB;
	height: auto;
	width: auto;
	max-width: min-content;
	justify-content: center;
	display: flex;
	margin-left: auto;
	margin-right: auto;

	
}

/*MARGENS E PADDINGS*/

.pad-tb-grande{
              padding-top:100px; 
			  padding-bottom:100px;

}
.pad-tb-medio{
	padding-top:60px; 
	padding-bottom:60px;

}
.pad-tb-pequeno{
	padding-top:10px; 
	padding-bottom:10px;

}

/*COLUNAS*/

.col-1{
	width: 50%;
	margin-bottom: 10px;
}
.col-3{
	width: 33.3%;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-top:  40px;;

}
.col-4{
	width: 25%;
	margin-bottom: 10px;
}

/*FLEX*/

.flex{
	display: flex;
	justify-content: center;
	gap: 20px;
}



.gap-peq{
	gap: 20px;
}

.gap-med{
	gap: 20px;
}

.gap-grand{
	gap: 40px;
}


    /*
  Colunas Responsivo
   */
@media only screen and (max-width: 750px){


.flex{
	flex-wrap: wrap;

}
.col-3{
        width: 100%;
}

.col-4{
	width: 48%;
}
}