centering captions and images

src/inc/main.css

@@ -811,10 +811,9 @@ img.myImg:hover {
  * Modal
  **************************/
 
-.modal {
+ .modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
-  z-index: 1; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
@@ -826,27 +825,35 @@ img.myImg:hover {
   overflow: hidden; /* Prevent scroll */
 }
 
-.modal-content {
-  display: block;
-  width: 80%;
-  max-width: 900px;
-  max-height: 80vh;
-  object-fit: contain;
-  animation: zoom 0.6s ease;
-  padding-top: 100px;
-  margin: auto;
-  overflow: hidden;
-}
-
 #caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
-  padding: 10px 0;
-  font-size: 18px;
+  font-size: 20px;
+  position: absolute;
+  bottom: 20px; /* Position caption near the bottom */
+  left: 50%;
+  transform: translateX(-50%); /* Center horizontally */
+  padding: 10px 0; /* Adjust padding to add some space */
+}
+
+/* Adjust modal-content for the image to allow space for caption */
+.modal-content {
+  display: block;
+  width: 80%;
+  max-width: 900px;
+  max-height: 80%; /* Reduce max-height to make space for caption */
+  object-fit: contain;
+  animation: zoom 0.6s ease;
+  margin: auto;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Center horizontally and vertically */
+  text-align: center; /* Center the image */
 }
 
 @keyframes zoom {
@@ -885,7 +892,7 @@ img.myImg:hover {
   padding: 16px;
   color: white;
   font-weight: bold;
-  font-size: 24px;
+  font-size: 45px; /* Make the arrows larger */
   border: none;
   background-color: transparent;
   transform: translateY(-50%); /* Center vertically */
@@ -925,7 +932,7 @@ img.myImg:hover {
 
   .prev,
   .next {
-    font-size: 20px;
+    font-size: 28px; /* Increase the size of arrows on mobile */
   }
 }
 
@@ -1330,7 +1337,7 @@ a:after {
   position: absolute;
   top: 45%;
   left: 50%;
-  transform: translateX(-50%);
+  transform: translateX(-50%); /* Center horizontally */
   width: 80%;
   max-width: 1200px;
   text-align: left;