Flyknife Comics

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

<div>
	<h1 class="miami-vice" data-text="Flyknife">Flyknife</h1>
	<h1 class="metal" data-text="COMICS">COMICS</h1>
</div>

@import url(https://fonts.googleapis.com/css?family=Yellowtail);
@import url(https://fonts.googleapis.com/css?family=Archivo+Black);

html,
body {
	height: 100%;
}
body {
	background-color: black;
	position: relative;
	overflow: hidden;
}

div {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	text-align: center;
}

h1 {
	width: auto;
	font-size: 15em;
	font-size: 25vw;
	margin: 0 0 -0.1em;
	line-height: 1em;
	overflow-wrap: nowrap;
}

.miami-vice {
	color: #86DEFF;
	font-family: "Yellowtail", cursive;
	font-weight: 300;
	text-shadow: 0 0 .5em rgba(#86DEFF, .5);
	position: relative;
	transform: rotate3d(1, -1, 0, 35deg);
	z-index: 2;
	&:after {
		content: attr(data-text);
		color: #FA74FB;
		position: absolute;
		top: 0;
		left: 0;
		text-shadow: 0 0 .5em rgba(#FA74FB, .5);
		transform: translateX(-0.05em);
		z-index: -1;
	}
}

.metal {
	background-image: linear-gradient(#7795B0 0, #7795B0 3px, #6581B0 4px, #6380AE 30%, #DDC4C3 50%, #B9957F 50%, #B9957F 53%, #D18B2D 53%, #DDC4C3 80%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: white;
	width: 100%;
	font-family: 'Archivo Black', sans-serif;
	font-size: 15vw;
	line-height: 1em;
	transform: rotate3d(1, -1, 0, 30deg);
	&:before,
	&:after {
		content: attr(data-text);
		background: none;
		color: white;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		text-shadow: 0 0 1em rgba(white, .3);
	}
	&:after {
		z-index: -1;
	}
}