Why is my mix-blend-mode not working?

Hi,

I’ve been trying to troubleshoot why my ‘FLUID TEXT’ page isn’t showing the text fluidity in the way that this codepen is: https://codepen.io/robin-dela/pen/KKPYoBq

The SCSS for this code pen is:

<style>
body {
	position: fixed;
	height: 100%;
  overflow: hidden;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.mask {
	position: absolute;
	z-index: 2;
	background: white;
	height: 100vh;
	width: 100vw;
	mix-blend-mode: screen;
	/* display: none; */
}

svg {
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

</style>

I’m almost certain it’s something to do with the mix-blend-mode , as that is the only code showing up in red. I’ve seen similar questions asked on here, and have tried all the methods offered, but nothing has as yet made it work. I’d really appreciate any help! The problematic code is below: (notice how it’s identical to the codepen above, however mix-blend-mode appears in red on my Webflow). Thanks so much in advance!

<style>
body {
	position: fixed;
	height: 100%;
  overflow: hidden;
}

canvas {
	position: absolute;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
}

.mask {
	position: absolute;
	z-index: 2;
	background: white;
	height: 100vh;
	width: 100vw;
	mix-blend-mode: screen;
	/* display: none; */
}

svg {
	width: 90%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

</style>

Here is my site Read-Only: Webflow - hen-ry

A lot of people seemed to solve this by changing the background colour of the body and/or div block to white (as opposed to transparent) - but this sadly did not work for me (although I may have made my own mistake here).