fix(pause-button): reposition to top-right and improve responsiveness

This will prevent the button being hidden underneath media cards and
will improve its sizing and visibility across all background and
interfaces.

slideshowpure.css

@@ -181,20 +181,40 @@
 
 .pause-button {
   position: absolute;
-  bottom: 10vh;
-  right: 20px;
-  font-size: 24px;
+  top: 5rem;
+  right: 0.8rem;
   cursor: pointer;
   color: white;
   z-index: 10;
   opacity: 0.3;
   transition: opacity 0.3s ease;
+  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
+}
+
+.pause-button i {
+  font-size: 1.5rem;
 }
 
 .pause-button:hover {
   opacity: 0.9;
 }
 
+@media (max-width: 1599px) {
+  .pause-button {
+    top: 8rem;
+  }
+
+  .pause-button i {
+    font-size: 2rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .pause-button i {
+    font-size: 2.5rem;
+  }
+}
+
 .dots-container {
   position: absolute;
   top: calc(50% + 18vh);

slideshowpure.js

@@ -1323,9 +1323,13 @@ const SlideshowManager = {
     if (STATE.slideshow.isPaused) {
       STATE.slideshow.slideInterval.stop();
       pauseButton.innerHTML = '<i class="material-icons">play_arrow</i>';
+      pauseButton.setAttribute("aria-label", "Play slideshow");
+      pauseButton.setAttribute("title", "Play slideshow");
     } else {
       STATE.slideshow.slideInterval.start();
       pauseButton.innerHTML = '<i class="material-icons">pause</i>';
+      pauseButton.setAttribute("aria-label", "Pause slideshow");
+      pauseButton.setAttribute("title", "Pause slideshow");
     }
   },
 
@@ -1502,6 +1506,8 @@ const initArrowNavigation = () => {
     className: "pause-button",
     innerHTML: '<i class="material-icons">pause</i>',
     tabIndex: "0",
+    "aria-label": "Pause slideshow",
+    title: "Pause slideshow",
     onclick: (e) => {
       e.preventDefault();
       e.stopPropagation();