Fix some styling issues, particularly on Divers

divers.html

@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="shortcut icon" href="images/favicon.png">
     <link rel="stylesheet" href="styles/main.css" media="screen">
+    <link rel="stylesheet" href="styles/fancybox.css" media="screen">
     <link rel="stylesheet" href="plugins/jquery.fancybox.min.css" media="screen">
     <link rel="stylesheet" href="plugins/chart.min.css" media="screen">
     <script src="plugins/jquery-3.5.1.min.js"></script>

scripts/divers.js

@@ -5,8 +5,12 @@ jQuery(document).ready(function($)
         infobar: false,
         toolbar: true,
         smallBtn: false,
-        buttons : [ "close" ],
-        arrows: true,
+        buttons: ["arrowLeft", "arrowRight", "close"],
+        arrows: false,
         transitionEffect: "fade",
+        baseClass: 'fancybox-custom-layout',
+        mobile: {
+            preventCaptionOverlap: true,
+        },
     });
 });

styles/main.css

@@ -26,6 +26,10 @@ a {
     color:#38686A;
 }
 
+a:hover {
+    color:#2589BD;
+}
+
 .gallery a, nav a {
     text-decoration:none;
 }