Locally injected CSS not working (color)

Site URL: https://gregorylassale.com

I'm using a few scroll indicators throughout my site, all black on white pages. They use a mix of HTML, CSS and Jquery. I just redesigned my top page ("Landing Banner") which is now black and would like to have a scroll indicator at the bottom which needs to be white.

I tried to inject the CSS in the page code injection (with <style> tags and after changing all elements color to white) , but the color won't change on the page. The element is there, but still black. I tried marking all colors as !important, but still nothing.

Hoping someone can help.

The CSS I tried is:

<!--Codepen Scroll Down Arrow 1 Start-->
<style>
.scroll a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  color: white;
  font : normal 400 20px/1 'montserrat', sans-serif;
  letter-spacing: none;
  text-decoration: none;
  transition: opacity .3s;
}
.scroll a:hover {
  opacity: .5;
}

#arrow a {
  padding-top: 70px;
}
#arrow a span {
  position: absolute;
  top: auto;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-left: -12px;
  border-left: 2px solid white;
  border-bottom: 2px solid white;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-animation: sdb05 1.5s infinite;
  animation: sdb05 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb05 {
  0% {
    -webkit-transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb05 {
  0% {
    transform: rotate(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
</style>  
<!--Codepen Scroll Down Arrow 1 End-->

Please disregard. I successfully injected the CSS via code block.