changes.html

<!-- 
     Hi Sophia, here are the changes I made.. no need to include the <style> tags to your css, 
     just added those here for syntax highlighting here : ) 
-->

<!-- index.html changes -->
    <div id="fold1">
<!--SCROLLING TEXT-->
       <div class="scrolling" id="fade-in">
        <div class="leftscroll">
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
        </div>
        <p class="rightscroll">
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
        </p>
        <div class="leftscroll">
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
          <span>what does a comma do what does a comma do what does a comma do</span>
        </div>
      </div>
    </div>
    
    
 <!-- scrollstyles.css changes -->
 <style type="text/css">
 .scrolling {
  font-size: 9rem;
  font-style: italic;
  font-family: apoc;
  line-height: 8rem;
  padding-top: 25rem;
  padding-bottom: 50rem;
  overflow: hidden;
  position: relative;
}

.leftscroll, .rightscroll{
  margin: 0;
  line-height: 50px;
  white-space: nowrap;
}
.rightscroll {
  text-align: right;
}

.leftscroll{
  animation: left-scroll 15s linear infinite;
}

.rightscroll{
  display: flex;
  justify-content: flex-end;
  animation: right-scroll 15s linear infinite;
}

@keyframes left-scroll {
  0% {transform: translateX(0);}
  100% {transform: translateX(-2652px);}
}


@keyframes right-scroll {
  0% {transform: translateX(0);}
  100% {transform: translateX(2652px);} }
}
</style>