Problem with text color animation

I’ve been working on building out my personal website for my portfolio, and I’ve come across a problem with how I’m attempting to set-up my h1 text.
I’ve added the code to my codecademy workspace so anyone can view it HERE.

The problem is within this segment of CSS code:

h1 {
display: inline-block;
font-size: 6rem;
text-align: center;
font-family: “Lora”, Palatino, Georgia, serif;
color: transparent;
background-clip: text;
-webkit-background-clip: text;
animation: welcome 1s linear infinite;
margin: 0;
}

@keyframes welcome {
0% {background: linear-gradient (to bottom right, hsl(0, 0%, 0%), hsl(0, 0%, 28%), hsl(0, 0%, 64%), hsl(260, 100%, 75%), hsl(271, 85%, 55%) )}
25% {background: linear-gradient (to bottom right, hsl(271, 85%, 55%), hsl(0, 0%, 0%), hsl(0, 0%, 28%), hsl(0, 0%, 64%), hsl(260, 100%, 75%) )}
50% {background: linear-gradient (to bottom right, hsl(260, 100%, 75%), hsl(271, 85%, 55%), hsl(0, 0%, 0%), hsl(0, 0%, 28%), hsl(0, 0%, 64%) )}
75% {background: linear-gradient (to bottom right, hsl(0, 0%, 64%), hsl(260, 100%, 75%), hsl(271, 85%, 55%), hsl(0, 0%, 0%), hsl(0, 0%, 28%) )}
100% {background: linear-gradient (to bottom right, hsl(0, 0%, 28%), hsl(0, 0%, 64%), hsl(260, 100%, 75%), hsl(271, 85%, 55%), hsl(0, 0%, 0%) )}
}

The desired result is for the h1 text to have a moving color gradient as the text color, but the result is it affects the background only without clipping the text. The problem seems to potentially come from this line of code:

background-clip: text;
-webkit-background-clip: text;

When I check Chrome dev tools it says that background-clip has an invalid property value, but according to the various resources I’ve checked, the value seems valid.

I would appreciate any help on trying to figure this problem out. Thank you in advance.