little tweaks

css/binaural.css

@@ -1,8 +1,8 @@
-.container-fluid {
+#sceneDiv {
     perspective: 500px;
 }
 
-.container-fluid * {
+#sceneDiv * {
     transform-style: preserve-3d;
 }
 

index.html

@@ -86,7 +86,7 @@
       </div>
     </div>
 
-    <div class="container-fluid d-flex vh-100 justify-content-center d-flex align-items-center">
+    <div id="sceneDiv" class="container-fluid d-flex vh-100 justify-content-center d-flex align-items-center">
 
       <div id="screenRow" class="row row-cols-auto align-items-start gap-2">
         <div class="col d-flex flex-column align-items-end">

js/app.js

@@ -268,7 +268,7 @@ let rY0 = 0
 let clientX0 = 0
 let clientY0 = 0
 
-screenRow.onmousedown = function(event) {
+document.onmousedown = function(event) {
     mousedown = true
     rX0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rX"))
     dy0 = parseInt(getComputedStyle(screenRow).getPropertyValue("--rY"))
@@ -276,7 +276,7 @@ screenRow.onmousedown = function(event) {
     clientY0 = event.clientY
 }
 
-screenRow.onmousemove = function(event) {
+document.onmousemove = function(event) {
 	if (mousedown) {
         event.preventDefault()
         event.stopPropagation()
@@ -301,11 +301,11 @@ screenRow.onmousemove = function(event) {
     }
 }
 
-screenRow.onmouseup = screenRow.onmouseleave = function(event) {
+document.onmouseup = document.onmouseleave = function(event) {
     mousedown = false
 }
 
-screenRow.onwheel = function(event) {
+document.onwheel = function(event) {
     event.preventDefault()
     event.stopPropagation()
     let tZ = parseInt(getComputedStyle(screenRow).getPropertyValue("--tZ"))