Ticker css, slower updates (weak target machine)

templates/index.html

     </div>
     <div class="row">
       <div class="col12">
-        <div id="the-ticker" class="marquee alert alert-warning fw-bolder w100 opacity-50 text-nowrap" role="alert" style="direction:rtl; font-size:5rem; position:fixed; left:0; bottom:2rem; z-index:23">
-          <h2 id="ticker-text" class="fw-bolder bg-danger text-white my-2 p-4">
-          </h2>
+        <div id="ticker-wrapper" class="alert alert-danger opacity-75 w-100" role="alert" style="position:fixed; left:0; bottom:3rem; z-index:23">
+            <div id="the-ticker" class="w-100 text-nowrap">
+              <h1 id="ticker-text" class="fw-bolder text-white py-2" style="direction:rtl; font-size:5rem;">
+              </h1>
+            </div>
         </div>
       </div>
     </div>
   <script src="/static/bootstrap/js/bootstrap.bundle.min.js"></script>
   <script>
   function setTicker(ticker_text) {
-    $(".marquee").marquee("destroy");
+    $("#the-ticker").marquee("destroy");
     if (ticker_text) {
-      $(".marquee").show();
-      $(".marquee").text(ticker_text);
-      $(".marquee").marquee({
+      $("#ticker-text").text(ticker_text);
+      $("#the-ticker").marquee({
         "direction": "right",
         "duplicated": true,
         "speed": 115
       });
+      $("#ticker-wrapper").show();
     } else {
-      $(".marquee").hide();
+        $("#ticker-wrapper").hide();
     }
   }
   window.item_index = 0;
     document.getElementById("the-video").style.filter=`blur(${vidblur}px)`;
     document.getElementById("the-ticker").style.filter=`blur(${tickerblur}px)`;
   }
-  window.update_interval = setInterval(updateDistance, 200);
+  window.update_interval = setInterval(updateDistance, 300);
   </script>
 </body>
 </html>