how do i create a contrail for a mouse with html – Blancer.com Tutorials and projects

I’m trying to make a website in where a word “lean” follows your cursor. there are two issues i have that I’m struggling with. first: the <div id="circle">lean</div>(see html below) element only works when there is text above it. my second problem is that the word is stuck in the right corner and wont move.

here is my code:

<!--Javascript-->
<script>
    let circle = document.getElementById('circle');

    const onMouseMove = (e) =>{
    circle.style.left = e.pageX + 'px';
    circle.style.top = e.pageY + 'px';
    }

    document.addEventListener('mousemove', onMouseMove);
</script>



<!--CSS-->
<style>
    body{
    margin:0;
    padding:0;
    overflow:hidden;
    background-color: white;
    color: #8A2BE2;
    }
    div{
    position:absolute;
    transform:translate(-50%,-50%);
    height:35px;
    width:35px;
    }
</style>



<!--HTML-->
<html>
    <head>
        <title>PlsDoge</title>
    </head>
    <body>
        a
        <div id="circle">
            lean
        </div> 
    </body>
</html>

is it possible that this has something to do with the version of the html files? i have largely created this html from a combination of other old tutorials. sorry if this is a dumb question, I’m still a novice programmer.