Syntax Error in Line 1

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

23 minutes ago, twzill said:

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

Cover page not support custom css like it notified

On 7/9/2021 at 10:30 PM, twzill said:

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

Hi. Do you want to solve these problems?

Site URL: http://arriverailside.com/

1. (Mobile/Tablet – News) Want to reduce the text size?

http://arriverailside.com/news

2. In the browser address bar, it says “Not secure”

3. (Mobile – About > The Bid) Logo is too big, do you want resize them and make 2 logos/row

http://arriverailside.com/our

4. (Mobile – Calendar) Calendar is cut off

http://arriverailside.com/calendar