trying to create a cool cloudy cursor effect on my site using the below pasted in (this stops me from being able to scroll on site) i know the code is CSS compatible i just don't know what else it needs to work. (i have js also but every time i add it into header/ footer it just pastes it onto the website, i don't know how to get both CSS and JS to work and i am also unsure where to put the JS)
html,
body {
overflow: hidden;
}
body {
margin: 0;
position: absolute;
width: 100%;
height: 100%;
}
#container {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.a-title {
position: absolute;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-image: conic-gradient(#ed0101, blue);
pointer-events: none;
mix-blend-mode: difference;
filter: drop-shadow(2px 4px 6px black);
}
.a-second-title {
position: absolute;
margin-top: 25vh;
pointer-events: none;
-webkit-text-stroke: 1.3px white;
letter-spacing: 1.125px;
font-size: -webkit-xxx-large;
font-weight: 900;
mix-blend-mode: color-dodge;
}
canvas {
width: 100%;
height: 100%;
}