Make image viewer actually fit the whole page

style.css

@@ -609,13 +609,19 @@ table.popup-table .link{
     display: flex;
     gap: 1em;
     padding: 1em;
-    background-color: rgba(0,0,0,0.2);
+    background-color:rgba(0,0,0,0);
+    z-index: 1;
+    transition: 0.2s ease background-color;
+}
+.modalControls:hover {
+    background-color:rgba(0,0,0,0.9);
 }
 .modalClose {
     margin-left: auto;
 }
 .modalControls span{
     color: white;
+    text-shadow: 0px 0px 0.25em black;
     font-size: 35px;
     font-weight: bold;
     cursor: pointer;
@@ -640,6 +646,13 @@ table.popup-table .link{
     min-height: 0;
 }
 
+#modalImage{
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+}
+
 .modalPrev,
 .modalNext {
   cursor: pointer;