I'm trying to do a rotate-element-on-scroll effect but it seems my JS is wrong. I get the error "(index):271 Uncaught TypeError: Cannot read properties of null (reading 'style')"

My page is jakobnatorp.com

Edit: I've tried replacing "document.querySelector("logoJakob")" with following and it still doesn't work:

document.querySelector(".logoJakob");
document.querySelector("#jakoblogo");
document.getElementByClassName("logoJakob");
document.getElementById("jakoblogo");

HTML

<div class="logojakob" id="jakoblogo" >
<img src="http://jakobnatorp.com/wp-content/uploads/2021/10/cropped-JAKOB-LERCHE-DAA-NATORP.png"/>
    </div>

CSS

.logojakob {
  position: fixed;
  width:150px;
  height:150px;
  margin-top:50px;
  margin-bottom:-300px;
  margin-left:50px;
}

JS

var elem = document.querySelector("logoJakob");
window.addEventListener('scroll', function() {
    var value = window.scrollY * 0.25;
    elem.style.transform = `translatex(-50%) translatey(-50%) rotate(${value}deg)`; 
});