<div class="wrapper">
	<h1 data-heading="It Blends">It Blends</h1>
</div>

$red: #f3576c;
$purple: #3e2e6a;
$blue: #130b52;
$bg: #fbe6d3;

html, body {
	height: 100%;
}

body {
	background: $bg;
	font-family: 'Oswald', sans-serif;
}

h1 {
	font-size: 20vw;
	top: 50%;
	left: 50%;
	margin: 0;
	transform: translate(-50%, -50%);
	position: absolute;
	font-weight: 900;
}

.wrapper {
	width: 100%;
	margin: 0 auto;
	height: 100%;
	
	h1 {
		color: $bg;
		text-transform: uppercase;
		width: 100%;
		text-align: center;
		text-shadow: -1px -1px 0 $purple, 1px -1px 0 $purple, -1px 1px 0 $purple, 1px 1px 0 $purple;
		
		&:after {
			content: attr(data-heading);
			position: absolute;
			left: 0;
			top: 0;
			z-index: 2;
			overflow: hidden;
			color: $red;
			transform: translate(0.4vw, 0.3vh);
			mix-blend-mode: darken;
			text-align: center;
			width: 100%;
			text-shadow: 1px 0px 0px $purple, 0px 1px 0px $blue, 2px 1px 0px $purple, 1px 2px 0px $blue, 3px 2px 0px $purple, 2px 3px 0px $blue, 4px 3px 0px $purple, 3px 4px 0px $blue, 5px 4px 0px $purple, 4px 5px 0px $blue, 6px 5px 0px $purple, 5px 6px 0px $blue, 7px 6px 0px $purple;
		}
	}
}