body {
	margin-top: 10em;
	display: grid;
	justify-content: center;
	align-items: center;
	background-color: #afafaf;
}

#container {
	/* Contenedor donde situar el texto */
	position: absolute;
	margin: auto;
	width: 90vw;
	height: 100pt;
	top: 0;
	bottom: 0;
	border: 1px solid #ffffff;
	padding: 2%;
	transform: perspective(500px) translateZ(-100px);
	/* Este filtro es gran parte de la magia. Si se comenta el texto solo se desvanece */
	filter: url(#threshold) blur(0.8px);
}

/* Estilo de los textos */
#text1, #text2 {
	position: absolute;
	width: 100%;
	display: inline-block;
	text-align: center;
	color:#fff;
	font-family: 'Arial', sans-serif;
	font-size: 100pt;
	font-weight: bold;
	transform: perspective(500px) translateZ(-80px);
	user-select: none;
}

/*Título*/
.titulo {
	box-sizing: border-box;
	padding: 10px;
	border: none;
	font: normal 38px / normal "Warnes", Helvetica, sans-serif;
	color: rgba(255, 255, 255, 1);
	text-align: center;
	white-space: pre;
	text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
	  0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
	  0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
	-webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	-o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
  }
  .titulo:hover {
	text-shadow: 0 0 10px rgb(73, 73, 73), 0 0 20px rgb(56, 56, 56),
	  0 0 30px rgb(48, 48, 48), 0 0 40px #5c5c5c, 0 0 70px #000000,
	  0 0 80px #000000, 0 0 100px #000000;
  }
  /* Texto a mostrar encima del morphing del texto */
  .titulo::after {
	content: "Morphing De Texto";
  }