Header links disappear on hover in Chrome

Site URL: https://dragonfly-paddlefish-c5g3.squarespace.com/

Hi, there. I am using a gradient text on all of my headers (CSS below, h1-h4), and I am wanting to use header text for my footer menus. The problem is that when you hover over the footer links in Chrome, the text completely disappears. I'd like it behave like a normal hover, as it does in Firefox. Any help greatly appreciated as none of the tweaks I've done have seemed to work. Site URL: https://dragonfly-paddlefish-c5g3.squarespace.com/

Quote

h1 {
background: #36D1DC; // default color for older browsers
background: linear-gradient(45deg, #5b86e5, #36d1dc 50%); // angle, color1, color2, gradient position for chrome
background: -webkit-linear-gradient(45deg, #5b86e5, #36d1dc 50%);  // angle, color1, color2, gradient position for safari
background-clip: text;
-webkit-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}

Hi. Footer fine here. Do you still need help on this?