/* Cambia la tipografía de todos los elementos de la página
porque trabaja con la etiqueta body que contiene a 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 de los enlaces, cambia el diseño cuando 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 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;	
}
/* 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;
	padding:20px;
	background-color:#ffffbf;
}
h1{
    padding: 4px !important; /* Cuando tengo dos estilos semejantes le da relevancia 
el que lleva !important	*/
}
div h3{
	color:white;
}
/* Se aplica el fondo al div que se llama container */
div.container{	
background-color:#ffffbf;
}

/* Es estilo de margen 25px se aplica en los div que van dentro del div con clase container */
.container div{
	margin:25px;
}
footer{
	text-transform:uppercase;
}
/* 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.*/
  /*es para la retícula original*/height: /*100px; background-color: steelblue;*/
 
  margin: 5px;
}