<link href="https://fonts.googleapis.com/css?family=Archivo+Black&display=swap" rel="stylesheet">

<h1 class="playful">
  Wash your hands
</h1>

$background: #E4FFF7;
$textColor: #5362F6;

@function textShadow($precision, $size, $color){
  $value: null;
  $offset: 0;
  $length: $size * (1 / $precision) - 1;

  @for $i from 0 through $length {
    $offset: $offset + $precision;
    $shadow: $offset + px $offset + px $color;
    $value: append($value, $shadow, comma);
  }

  @return $value;
}

.playful {
  color: $textColor;
  text-shadow: textShadow(0.25, 6, #E485F8);
}

body {
  background-color: $background;
}

h1 {
  font-size: 65px;
  text-transform: uppercase;
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-weight: normal;
  display: block;
  width: 666px;
  max-width: 80vw;
  min-height: 90px;
  height: auto;
  text-align: center;
  margin: 10rem auto;
  margin: calc(50vh - 5rem) auto;
}