Help with custom gradient animation

Site URL: https://grapefruit-grapefruit-423g.squarespace.com/config/pages

Hi I am trying to add some custom css to my site. I have a specific section on the homepage Im trying to do so in and am having trouble figuring it out as im not a programmer.

I am following this tutorial to no avail and and any help would be appreciated.

https://www.marksmen.studio/blog/animated-gradient-backgrounds-in-squarespace

Here is the CSS I have so far...

#data-section-id="6004d985825cad7378ace840" {

.css-selector {
    background: linear-gradient(270deg, #5eb7b4, #7f5bd2, #b7ca61);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 36s ease infinite;
    -moz-animation: AnimationName 36s ease infinite;
    -o-animation: AnimationName 36s ease infinite;
    animation: AnimationName 36s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
}

Which section you want to apply gradient?