Trouble implementing a codepen timeline that uses javascript

Site URL: https://hen-dalmatian-c85a.squarespace.com

HI I am trying to utilize this codepen https://codepen.io/anthonyhastings/pen/ojYymN on this page https://hen-dalmatian-c85a.squarespace.com/nba-all-star (password PaulMillsap4) and cant seem to get things functioning.  I am getting a syntax error on line 178 in the custom CSS.

i appreciate any assistance 

The css was canceling out other css i had implemented on the site so i have pulled all the code form the site . i would still welcome any assistance on how best to make this timeline (or a similar animated timeline) work. I placed:

IN HEADER CODE INJECTION (also tried on page header)

<script 'use strict';
console.clear();

// When ready to paint, trigger the animation.
window.requestAnimationFrame(function() {
    document.querySelector('.timeline').classList.add('timeline--show'); </script>
});

--------------------------

CSS 

// Re-usable variables.
$linearLineWidth: 0.6rem;
$itemGutterWidth: 2rem;
$itemVerticalSpacing: 4rem;
$customFontFamily: 'Open Sans', sans-serif;

%heading-copy-font {
    font-family: $customFontFamily;
    font-weight: 600;
}

%body-copy-font {
    font-family: $customFontFamily;
    font-weight: 300;
}

* {
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

html, body {
    margin: 0;
    paddng: 0;
}

// Overall container for items and the line.
.timeline {
    margin: 0 auto;
    padding: $itemVerticalSpacing 0 $itemVerticalSpacing 0;

    max-width: 600px;
    width: 90%;

    display: flex;
    flex-direction: column;
    position: relative;

    // Acts as the linear line in the timeline.
    &::after {
        display: block;
        content: '';

        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        transition: transform 1000ms;
        transform: translateX(-50%) translateY(-100%);
        z-index: -1;
        background-color: #000;
        width: $linearLineWidth;
    }

    // State class to trigger the timeline animation.
    &.timeline--show::after {
        transform: translateX(-50%) translateY(0);
    }
}

// Items that appear within the timeline.
.timeline__item {
    display: block;
    width: calc(50% - (#{$linearLineWidth} / 2));
    position: relative;

    // A circle that'll mark this items start on the line.
    &::before {
        content: '';
        display: block;
        position: absolute;
        top: 1.5rem;

        width: $linearLineWidth * 3;
        height: $linearLineWidth * 3;
        background: #FF0000;
        border-radius: 50%;
        transform: scale(0);

        // Applying the scaling animation when appropriate.
        .timeline--show & {
            animation: circleScaling 500ms 1500ms forwards;
        }
    }

    // Supplies spacing between items.
    &:not(:last-child) {
        margin-bottom: $itemVerticalSpacing
    }

    // Odd items will have their circle positioned to the left.
    &:nth-child(odd) {
        align-self: flex-end;
        padding-left: $itemGutterWidth;
        text-align: left;

        &::before {
            left: $linearLineWidth * -2;
        }
    }

    // Even items are positioned on the opposite side of odd items.
    // They will also have their circles aligned to the right.
    &:nth-child(even) {
        align-self: flex-start;
        padding-right: $itemGutterWidth;
        text-align: right;

        &::before {
            right: $linearLineWidth * -2;
        }
    }
}

// Main title within timeline items.
.timeline__itemTitle {
    @extend %heading-copy-font;
    font-size: 3.2rem;
    line-height: 1.5;
    margin: 0 0 1.2rem 0;
}

// Main body copy within timeline items.
.timeline__itemDescription {
    @extend %body-copy-font;
    font-size: 1.6rem;
    margin: 0;
}

// Titles / Descriptions will fade up when required.
.timeline__itemTitle,
.timeline__itemDescription {
    opacity: 0;
    transition: opacity 800ms;

    // Fades up the items when required.
    .timeline--show & {
        opacity: 1;
        transition-delay: 2500ms;
    }
}

// An animation to scale the circles up and down.
@keyframes circleScaling {
    0% {
        transform: scale(0);
    }
    80% {
        transform: scale(1.5);
    }
    100% {
        transform: scale(1);
    }
}

-----------------

ON PAGE CODE BLOCK

<section class="timeline">
    <article class="timeline__item">
        <header>
            <h1 class="timeline__itemTitle">Timeline Item</h1>
        </header>
        <p class="timeline__itemDescription">Timeline description.</p>
    </article>
    <article class="timeline__item">
        <header>
            <h1 class="timeline__itemTitle">Timeline Item</h1>
        </header>
        <p class="timeline__itemDescription">Timeline description.</p>
    </article>
    <article class="timeline__item">
        <header>
            <h1 class="timeline__itemTitle">Timeline Item</h1>
        </header>
        <p class="timeline__itemDescription">Timeline description.</p>
    </article>
</section>

 

 

Thanks in advance for any assitance.

 

Codepen use SCSS. You can change to this CSS

.timeline__itemTitle {
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
}

.timeline__itemDescription {
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

html, body {
  margin: 0;
  paddng: 0;
}

.timeline {
  margin: 0 auto;
  padding: 4rem 0 4rem 0;
  max-width: 600px;
  width: 90%;
  display: flex;
  flex-direction: column;
  position: relative;
}
.timeline::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transition: transform 1000ms;
  transform: translateX(-50%) translateY(-100%);
  z-index: -1;
  background-color: #000;
  width: 0.6rem;
}
.timeline.timeline--show::after {
  transform: translateX(-50%) translateY(0);
}

.timeline__item {
  display: block;
  width: calc(50% - (0.6rem / 2));
  position: relative;
}
.timeline__item::before {
  content: "";
  display: block;
  position: absolute;
  top: 1.5rem;
  width: 1.8rem;
  height: 1.8rem;
  background: #FF0000;
  border-radius: 50%;
  transform: scale(0);
}
.timeline--show .timeline__item::before {
  -webkit-animation: circleScaling 500ms 1500ms forwards;
          animation: circleScaling 500ms 1500ms forwards;
}
.timeline__item:not(:last-child) {
  margin-bottom: 4rem;
}
.timeline__item:nth-child(odd) {
  align-self: flex-end;
  padding-left: 2rem;
  text-align: left;
}
.timeline__item:nth-child(odd)::before {
  left: -1.2rem;
}
.timeline__item:nth-child(even) {
  align-self: flex-start;
  padding-right: 2rem;
  text-align: right;
}
.timeline__item:nth-child(even)::before {
  right: -1.2rem;
}

.timeline__itemTitle {
  font-size: 3.2rem;
  line-height: 1.5;
  margin: 0 0 1.2rem 0;
}

.timeline__itemDescription {
  font-size: 1.6rem;
  margin: 0;
}

.timeline__itemTitle,
.timeline__itemDescription {
  opacity: 0;
  transition: opacity 800ms;
}
.timeline--show .timeline__itemTitle,
.timeline--show .timeline__itemDescription {
  opacity: 1;
  transition-delay: 2500ms;
}

@-webkit-keyframes circleScaling {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes circleScaling {
  0% {
    transform: scale(0);
  }
  80% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}