body{
	background:rgba(167,255,238, 0.8);
	color:#000000;
	font-family: 'Saira Extra Condensed', sans-serif; 
padding-right: 20rem;
padding-left:20rem;
padding-bottom: 5rem;
padding-top: 5rem;

}
h2,h3,h4,h5,h6{
	font-family: 'Shadows Into Light', cursive;
	font-weight: 700;
	color: rgba(255,148,224);
	font-size: 2rem
}

/* un comentario en CSS se escribe de esta manera */

a{color:hsl(0, 60%, 40%);}

:hover{transition:  ease all 1s;}

a:hover{color:hsl(0, 100%, 50%);}

div.container{
	margin:0.5rem;
	position: relative;
}

h2{
	transform: translate(0, -10px) rotate(180deg);
	position:absolute;
	right:0;
	top:0;
}

@media screen and (max-width: 1024px){
	h2{display:none;}
}

@keyframes espaciado {
	from {letter-spacing: 0.01rem;color: rgb(255,148,224);}
	to {letter-spacing: 0.1rem;color:black}
}
/* TENGO UNA ANIMACIÓN*/

h4:hover {
	animation-name: espaciado;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
} /* QUE QUIERO QUE HAGA LA ANIMACIÓN */

figure{
	background:rgba(255,167,210,.9);
	padding:0.5rem;
	margin:1rem 0 2rem 0;
	box-shadow: 0 0 3px rgba(0,0,0,.1);
	/* FONDO DE LA FIGURA; + COLOR DESPUES*/
}

figure img{
	width: 100%;
	height:auto;
    filter: opacity(30%);;
	/* LE DIGO ANCHO QUE QUIERO QU TENGA, 100%, Y PONGO ALTURO AUTOMÁTICA PARA QUE NO CAGUE
	Y LA PONGO EN GEY SCALE*/
}

figure img:hover{
	width: 100%;
	height:auto;
	filter: opacity(100%);
	/* */
}

figcaption{
	padding:0.5rem;
	font-size: 90%;
	letter-spacing: 0.01rem;
	filter: opacity(30%);
}

hr{
	border:3px solid #ddd;

}
/* LINEA HORIZONTAL QUE DEFINÍ TAMAÑO MANERA Y COLOR*/

svg{
	border:5px solid #fff;
	/* DEFINÍ UN BORDE - DONDE ESTA LA CARITA- */
}

s, del{
	background:rgba(0,0,0,.8); 
	color:rgba(0,0,0,1);
	text-decoration: none;
	/* APLICO COLOR DE FONDO Y COLOR*/
}

ins{
	font-weight: bold;
	text-decoration: none;
}