/* 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%;
}

/* Tipografia */

 
.titulo-topo{
	color:rgb(255, 255, 255);
	font-size: 50px;
	margin-bottom: 10px;
	font-family: "Roboto Serif", serif;
	font-weight: 00;
	
}


.titulo-a{
	color:rgb(255, 0, 0);
	font-size: 50px;
	margin-bottom: 10px;
	font-family: "Roboto Serif", serif;
	font-weight: 00;

}

.titulo-b{
	color:rgb(255, 0, 0);
	font-size: 30px;
	margin-bottom: 4px;
}

.texto{
	font-family: "Roboto Serif", serif;
	font-weight: 400;
	color:#F4D58D;
	font-size: 16px;
	line-height: 26px;
    margin-bottom: 10px;

}




/* ESTRUTURA */

header{
	width: 100%;
	height: 80px;
	
}

section{
	width: 100%;
}

footer{
	width: 100%;
	height: 80px;
	
}
.container-col{

margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;



}



/* DISCOGRAFIA */

.intro{

	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 500px;
	margin-bottom: 20px;

	font-family: "Roboto Serif", serif;
	font-weight: 500;
	color:#ff0000;
	font-size: 30px;
	line-height: 26px;
    text-align: center;
	

}

.intro2{

	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 500px;
	margin-bottom: 40px;

	font-family: "Roboto Serif", serif;
	font-weight: 300;
	color:#F4D58D;
	font-size: 30px;
	line-height: 26px;
    text-align: center;
	

}



/* COLUNAS */

.col-2{


margin-bottom: 10px;
width: 50%;
}

.col-3{
	
	
	margin-bottom: 10px;
	width: 33,3%;
}

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

/* FLEX */

.flex-sb{
     display: flex;
    justify-content: space-between;

}

.flex-c{
	display: flex;
   justify-content: center;

}

.flex-sa{
	display: flex;
   justify-content: space-around;

}

.flex-gap-peq{
	display: flex;
   gap: 20px;

}




/* CORES DE FUNDO */

.bc-escuro{
	background-color: #001427;
}

.bc-meio{
	background-color: #001427;
}

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

/*PADDINGS E MARGINS*/

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

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

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


.teste{
	width: 200px;
	height: 200px;
	background-color: aqua;
	margin-left: auto;
	margin-right: auto;
}

/* BORDA IMAGEM */

.borda{

	border: 5px solid blue;
    }



/* TOPO */

.container-topo{
width: 100%;
max-width: 900px;	
margin-left: auto;
margin-right: auto;
height: 500px;
background-color: aqua;
background-image: url(imagens/eminem_n1.jpg );
background-repeat: no-repeat;
background-size: cover;
display: flex;
text-align: center;
}	

.box-topo{
max-width: 700px;

}