<h1 class="headline headline--background-clip headline--radial-gradient">Radial Gradient Text Stroke</h1>
<h1 class="headline headline--background-clip headline--linear-gradient">Linear Gradient Text Stroke</h1>
<h1 class="headline headline--background-clip">Background Clip Text Stroke</h1>
<h1 class="headline headline--text-stroke">Text Stroke</h1>
<h1 class="headline headline--text-shadow">Text Shadow</h1>

<a class="link" href="https://youtu.be/mPZ64m9QpQY" target="_blank">Watch the tutorial on YouTube &raquo;</a>

.headline {
  margin: 0;
  padding: 1rem;
  font-size: 5rem;
  line-height: 1.1;
  font-family: Raleway, sans-serif;
  //font-family: Montserrat, sans-serif;
  color: hsl(260 70% 40%);
}

.headline--text-stroke {
  -webkit-text-stroke-color: hsl(260 70% 40%);
  -webkit-text-stroke-width: 3px;
  -webkit-text-fill-color: hsl(33, 100%, 96%);
}

.headline--background-clip {
  -webkit-text-stroke-color: transparent;
  -webkit-text-stroke-width: 6px;
  -webkit-text-fill-color: hsl(33, 100%, 96%);
  
  background-color: hsl(260 70% 40%);
  background-clip: text;
}

.headline--linear-gradient {
  background-image: linear-gradient(
    120deg,
    hsl(260 70% 40%),
    hsl(0, 100%, 70%)
  );
}

.headline--radial-gradient {
  background-image: radial-gradient(
    hsl(260 70% 40%),
    hsl(0, 100%, 70%)
  );
}

.headline--text-shadow {
  text-shadow: 0 0 1px hsl(260 70% 40%),
    1px 1px 1px hsl(260 70% 40%),
    -1px -1px 1px hsl(260 70% 40%),
    1px -1px 1px hsl(260 70% 40%),
    -1px 1px 1px hsl(260 70% 40%),
    2px 2px 1px hsl(260 70% 40%),
    -2px -2px 1px hsl(260 70% 40%),
    2px -2px 1px hsl(260 70% 40%),
    -2px 2px 1px hsl(260 70% 40%);
  color: hsl(33, 100%, 96%);
}

body {
  margin: 0;
  padding: 5rem;
  min-height: 100vh;
  background-image: linear-gradient(
    45deg,
    hsl(28, 29%, 82%),
    hsl(33, 100%, 96%)
  );
  background-size: cover;
}

.link {
  margin: 1.5rem 1rem;
  padding: 2rem 3rem 1.9rem;
  display: inline-block;
  font-size: 2rem;
  background-image: linear-gradient(
    120deg,
    hsl(260 70% 40%),
    hsl(0, 70%, 50%)
  );
  color: hsl(0, 0%, 100%);
  border-radius: 1rem;
  transition: filter ease-in-out 0.2s;
  text-decoration: none;
  
  &:hover {
    filter: brightness(130%) contrast(1.3);
  }
}