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);
}
}