I am trying to make a typing game (following a tutorial) but my code doesn’t work the same as theirs. When the position in CSS is absolute, the cursor stays in the right position when i resize the window but disappears when i type. When the position is fixed, it doesn’t align with the text correctly when i resize the window but does move how i want it as i type. i tried lots of combinations and solutions but i don’t know how to fix it.

/* CSS for cursor

#cursor{
    display: none;
    width: 2px;
    height: 1.6rem;
    position: absolute;
    top: 5%;
    left: 1%;
    background: #EE0000;
    animation: blink 1s infinite;
}

//javascript for moving cursor

const nextLetter = document.querySelector(selectors = '.letter.current');
    const cursor = document.getElementById(elementId = 'cursor');
    if (nextLetter) {
        cursor.style.top = nextLetter.getBoundingClientRect().top + 2 + 'px';
        cursor.style.left = nextLetter.getBoundingClientRect().left + 'px';
    }
})

for the cursor to stay aligned with text element when resized, and work with javascript moving cursor code