Text Fill on Code

Site URL: https://dolphin-blue-3z7a.squarespace.com/

Hello,

I am trying to insert the CSS code shown here; https://codepen.io/saranshbarua/pen/BaQrmKm to achieve a "Text fill on Scroll" but upon inserting the code underneath the "Custom CSS" section, I am receiving an error code.

How can I modify this code, to get it functioning on my site?

Please note, I am new to coding.

I was inspired by the animation on the site; 

https://annajona.is/

Site Password: Irulan16

Thank you,

Add a Code Block > paste this code

<section class='hero-section'>
  <span class='heading'>Text fill on scroll</span>
</section>
<section class='sec1'>
  <div class="row">
    <div class='word'>
      <span class='letter'>H</span>
      <span class='letter'>E</span>
      <span class='letter'>L</span>
      <span class='letter'>L</span>
      <span class='letter'>O</span>
    </div>
    <div class='word'>
      <span class='letter'>W</span>
      <span class='letter'>E</span>
      <span class='letter'>L</span>
      <span class='letter'>C</span>
      <span class='letter'>O</span>
      <span class='letter'>M</span>
      <span class='letter'>E</span>

    </div>
    <div class='word'>
      <span class='letter'>T</span>
      <span class='letter'>O</span>
    </div>
    <div class='word'>
      <span class='letter'>T</span>
      <span class='letter'>H</span>
      <span class='letter'>E</span>
    </div>
    <div class='word'>
      <span class='letter'>N</span>
      <span class='letter'>E</span>
      <span class='letter'>W</span>
    </div>
    <div class='word'>
      <span class='letter'>W</span>
      <span class='letter'>O</span>
      <span class='letter'>R</span>
      <span class='letter'>L</span>
      <span class='letter'>D</span>
    </div>
  </div>
</section>
<style>
  .sec1 div, .sec1, .hero-section {
  display: flex;
  justify-content: center;
  align-items: center;
}

.heading {
  font-family: "Space Grotesk", sans-serif;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 200vh;
}

section {
  min-height: 100vh;
  border: 10px solid black;
}

.hero-section {
  padding: 0 10%;
}

.heading {
  font-size: 32px;
}
@media (min-width: 420px) {
  .heading {
    font-size: 72px;
    font-weight: 700;
  }
}

.sec1 .row {
  height: 400px;
}
.sec1 div {
  font-weight: 700;
  margin: 0 8px;
}
@media (min-width: 600px) {
  .sec1 div {
    font-size: 48px;
  }
}
.sec1 div span {
  -webkit-text-stroke: 2px black;
  color: white;
  margin: 0 1px;
}

.fill {
  color: black !important;
}
</style>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/CSSRulePlugin.min.js"></script>
<script>
  ScrollTrigger.batch(".letter", {
  trigger: '.row',
  start: "center-=100 center",
  scrub: 1,
  onEnter: batch => gsap.to(batch, {color: "#000", stagger: 0.017}),
});

</script>