/* Cambia el estilo tipografía de todos los elementos de la pág
porque trabaja con la etiqueta body que es un contenedor de todos los elementos */

body{
font-family: Arial, Helvetica, sans-serif;
}



/*Equivale en html al atributo class=""
y sirve para marcar una apariencia o un diseño especial */
.borde-inicial{
	border-left:4px solid orange;
	padding-left:10px;
}
/* Evento en los enlaces, cambia el diseño cuendo pongo el
cursor sobre el enlace y ojo lo cambia en la etiqueta final que es img*/
a:hover img{
	opacity:0.5;
}

/*Identificador único no puedo tener otro igual en la página y equivale en html
al atributo id="" */
div#boton-musica{
background-color:#999;	
margin:25px;
border:1px solid black;
padding:25px;	
}


h1{
	padding:4px !important; /* Cuando tengo dos estilos semejantes le da relevancia a el que lleva ! important */
}
/* Con las comas puedes añadir estilos a varias etiquetas*/
h1,h2,h3,h4,h5,h6,p{
	text-align:center;
	letter-spacing:2px;
	line-height:25px;
	background-color: #ffffbf;
	padding:20px;
}


div h3{
	color:#000;
	
}


/*Se aplica el fondo al div que se llama container */
.container	{
	background-color:#ffffbf
}
	
/* El estilo de margen se aplican en los div que van dentro del div con clase container */ 
.container div{
		margin:25px;
}

/* PRÁCTICA 2*/

div.galeria {
  display: flex; /* distribución dinámica y adaptable */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  background-color: lightgray;
}

div.galeria div.item {
  flex: 1; /* hace que cada div.item se expanda por igual, proporcional dentro del contenedor.*/
  /*height: 100px; Es para la retícula original 
  background-color: steelblue;
  */
  margin: 5px;
}