/*cambia la tipografia de todos los elementos de la pagina
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 unico no puedo igual en la pagina y equivale en html
al atributo id="" */
div#boton-musica{
	background-color:#999;
margin:25px;
border:1px solid black;
padding:25px;	
}
div h3{
color:#000;
}
/*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 
}

/*se aplica al fondo al div que se llama container */
div.container{ 
background-color:#ffffbf;
}

/* el estilo de margen se aplican en los div que van dentro del div container*/
.container div{
	margin:25px;
}


/*PRACTICA 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 reticula original
  background-color: steelblue;
  */
  margin: 5px;
}