<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;
  }
}