<div class="wrapper">
	<h1><span>S</span>trange<span>r</span> Things</h1>
</div>

@font-face {
	font-family: 'indira_kregular';
	src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/indira_k-webfont.woff2') format('woff2'), url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/209981/indira_k-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
	background: #0c0201;
	padding: 1rem;
}

$outline: #e2333b;
$shadow: #a32128;
$shadow2: #3f0716;

h1 {
	color: rgba(#160402, .9);
	font-family: 'indira_kregular';
	font-size: 15vw;
	text-transform: uppercase;
	font-weight: normal;
	text-align: center;
	letter-spacing: -5px;
	text-shadow: -1px -1px 0 $outline, 1px -1px 0 $outline, -1px 1px 0 $outline, 1px 1px 0 $outline, 0 0 2px #f9c2af, 0 0 14px $shadow, 0 0 10px $shadow, 0 0 13px $shadow, 0 0 20px $shadow2;
	position: relative;
	line-height: 0.9;
	transform: scale(.9, 1);
	margin: 0 auto;
	
	&:after {
		content: '';
		position: absolute;
		border-radius: 3px;
		top: 60%;
		width: 12vw;
		height: .5vw;
		transform: translate(2vw, 0);
		border: 1px solid $outline;
		box-shadow: 0 0 10px $shadow, 0 0 20px $shadow2;
	}
	
	&:before {
		content: '';
		position: absolute;
		border-radius: 3px;
		top: 60%;
		width: 12vw;
		height: .5vw;
		transform: translate(-1.5vw, 0);
		border: 1px solid $outline;
		box-shadow: 0 0 10px $shadow, 0 0 20px $shadow2;
	}
	span:first-child {
		transform: scale(1.4) translate(-1.5vw, 1vw);
		display: inline-block;
	}
	span:last-child {
		transform: scale(1.4) translate(1.5vw, 1vw);
		display: inline-block;
	}
}

.wrapper {
	position: absolute;
	top: 50%;
	transform: translate(0, -50%);
	
	&:before {
		content: "";
		border-radius: 3px;
		top: 0;
		width: 85%;
		margin: 0 auto;
		margin-bottom: 2vw;
		height: .5vw;
		border: 1px solid $outline;
		box-shadow: 0 0 10px $shadow, 0 0 20px $shadow2;
		display: block;
	}
}