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