Need help with website CSS code

Hello, I have an issue with some simple CSS code and was wondering how I can fix it.

The problem: the code works, it targets the footer of the website to give a parallax effect on desktop + mobile, but it makes the text/links unclickable. I want the text/links to be clickable.

the site:

https://gilded-collective.squarespace.com

the code:

@media only screen and ( min-width: 640px ) and ( max-width: 768px ) {
.Site {
margin-bottom: 505px; /*This may to be adjusted depending on the content of your footer*/
}

.Footer {
position: fixed;
z-index: -1;
height: 505px; /*This may to be adjusted depending on the content of your footer*/
width: 100%;
bottom: 0;
}

.Footer-inner {
position: fixed;
width: 100%;
bottom: 0;
padding: 10px 0;
}

}