twzill

Site URL: http://arriverailside.com/#arrive
I am trying to add a more animated scroll down arrow on my home page at http://arriverailside.com/#arrive.  I am using different recommendations for inserting custom css on the design page, however I keep getting a syntax error on line 1 message.  I am thinking it may be related to the message that says "Note: Custom CSS does not apply to Cover Pages."   But I am unsure about this.   Any help would be greatly appreciated.  Thanks.  
This is what I am trying to add:
body{
  margin: 0;
  padding: 0;
  background-color: #000;
}
.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 5px solid #06A8FF;
    border-right: 5px solid #06A8FF;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.2s;
}
.arrow span:nth-child(3){
    animation-delay: -0.4s;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}