Fix accessability of balloons

- not keyboard focusable for screen readers sake
- role="none" for screen readers

src/components/blog/Balloon.astro

···
           --timing: ${utils.getRandom(blog.balloons.timing)}s;
           `}
 >
-  <button
+  <div
     class="balloon"
     style={`--width: ${utils.getRandom(blog.balloons.size[0])}rem;
             --height: ${utils.getRandom(blog.balloons.size[1])}rem;`}
     tabindex="-1"
     data-min-time={blog.balloons.time[0]}
     data-max-time={blog.balloons.time[1]}
+    role="none"
   >
     <div class="cable-tie"></div>
     <div class="tie"></div>
-  </button>
+  </div>
 </div>
 
 <script>
   const balloons = document.querySelectorAll(".balloon");
   console.log(balloons);
   balloons.forEach((el) => {
-    if (!(el instanceof HTMLButtonElement)) return;
-
-    // reenable tab index as functional
-    el.tabIndex = 0;
+    if (!(el instanceof HTMLElement)) return;
 
     const mintime = Number(el.dataset["minTime"] ?? "0");
     const maxtime = Number(el.dataset["maxTime"] ?? "0");
···
 
     @media (prefers-reduced-motion: no-preference) {
       animation: infinite var(--timing) linear inv-tilt;
-    }
-
-    &:focus {
-      @media (prefers-reduced-motion: no-preference) {
-        outline: none;
-        animation:
-          infinite var(--timing) linear inv-tilt,
-          infinite 2s cubic-bezier(0.8, -0.4, 0.469, 1.692) bouncing;
-      }
     }
   }