/* Cambias la tipografia 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 sivve 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 puede haber dos iguales en la pagina y equivale en html
al atributo id="" */
div#boton-musica{
background-color:#999;
margin:25px;
border:3px solid red;
padding:25px;
}
/* Con las comas puedes añadir estilos a varias etiquetas */
h1,h2,h3,h4,h5,h6,p{
	text-align:center;
	letter-spacing:4px;
	line-height:50px;
	background-color:#FFFFBF;
	padding:25px;
}

div h3{
	color:orange;
}
.container{
	background-color:#FFFFBF;
}
/* El estilo de margen 25px se aplica en los div que van dentro del div con clase container */
 .container div{
	margin:25px;
}
h1{
	padding: 4px !important; /* Cuando tengo dos estilos semejantes le da la relevancia el que lleva el !important */
}



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;
}