/* Comentario */

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

*{ margin: 0;
	padding: 0;

}

/* TIPOGRAFIA */




.titulo-a{
   color: #ffffff;
   font-size: 40px;	
   margin-bottom: 10px;
}


.titulo-b{
     font-size: 30px;
    margin-bottom: 10px;
}


.titulo-c{
     font-size: 20px;
	 margin-bottom: 10px;
}


.texto{
color: #000000;
font-size: 16px;
line-height: 26px;
margin-bottom: 10px;
}

/* CORES */


.cor-a{
	color: red;
}



.cor-b{
	color: pink;
}

.cor-fundo-a{
background-color: #ff0000;
}

.cor-fundo-b{
background-color: #ca0e0e;
}

/* ESTRUTURA */


header{
    width: 100%;
    height: 100px; 
    background-color: yellow;
}


section{
    width: 100%;
}


footer{
    width: 100%;
    height: 100px; 
    background-color: blue; 
}


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


.grid-12-col{
display: grid;
grid-template-columns: repeat(12,1fr);
gap: 20px;
}


.item-12-col{
grid-column: span 12;
}

.item-6-col{
grid-column: span 6;
}

.item-4-col{
grid-column: span 4;
}

.item-3-col{
grid-column: span 3;
}


/* MARGENS E PADDING*/


.pad-t-b-grande{
padding-top: 80px;
padding-bottom: 80px;
}

.pad-t-b-meio{
padding-top: 50px;
padding-bottom: 50px;
}

.pad-t-b-pequeno{
padding-top: 30px;
padding-bottom: 30px;
}