<h1>
  STROKE OF GENIUS
</h1>

<h1 class="bonus">
  STROKE OF GENIUS
</h1>

@import url('https://fonts.googleapis.com/css?family=Notable&display=swap');

body {
  font: 40px/1 'Notable', sans-serif;
  margin: 1rem;
}

h1 {
  margin: 0;
/*   animation: colorchange 2s infinite; */
}
h1.bonus {
  text-shadow:
     3px  3px 0 #000,
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000;
}

@supports (-webkit-text-stroke: 1px black) {
  h1 {
    -webkit-text-stroke: 1px black;
    -webkit-text-fill-color: white;
  }
}

/* @keyframes colorchange {
  0% {
    -webkit-text-stroke: 10px red;
  }
  100% {
    -webkit-text-stroke: 20px green;
  }
} */