Bug somewhere

static/css/main.css

@@ -2500,12 +2500,11 @@ button:disabled,
 }
 
 .modal {
-  display: none;
   position: fixed;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 100vw;
+  height: 100vh;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(8px);
   display: flex;
@@ -2516,20 +2515,26 @@ button:disabled,
 
 .modal-content {
   background-color: #fff;
-  padding: 20px;
+  padding: 5px;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
-  width: 90%;
-  max-width: 900px;
-  max-height: 90vh;
-  overflow: hidden;
   position: relative;
+  min-width: 70vw;
+  min-height: 70vh;
+  max-width: 95vw;
+  max-height: 95vh;
+  overflow: auto;
+  justify-content: center; /* Centrer billedet i modal horisontalt */
+  align-items: center; /* Centrer billedet i modal vertikalt */
+  flex-direction: column; /* Knapper placeres nedenunder billedet */
 }
 .modal-content img {
-  width: 100%;
   height: auto;
+  max-width: 90vw;
+  max-height: 90vh;
   object-fit: contain;
-  border-radius: 5px;
+  border-radius: 15px;
+  margin: 0 auto;
 }
 .modal-content .modal-buttons {
   display: flex;
@@ -2539,9 +2544,7 @@ button:disabled,
 }
 .modal-content .modal-buttons button {
   position: relative; /* Tillader z-index at tage effekt */
-  margin: -20px; /* Øger negativ margin for mere overlap */
-  padding: 12px 18px;
-  font-size: 16px;
+  margin: 20px;
   cursor: pointer;
   transition: transform 0.3s ease, z-index 0.3s ease;
 }
@@ -2549,14 +2552,6 @@ button:disabled,
   transform: scale(1.05);
   z-index: 3; /* Hæver knappen øverst ved hover */
 }
-.modal-content .modal-buttons button:nth-child(odd) {
-  transform: rotate(10deg); /* Roterer med uret */
-  z-index: 1; /* Start-lag for ulige knapper */
-}
-.modal-content .modal-buttons button:nth-child(even) {
-  transform: rotate(-10deg); /* Roterer mod uret */
-  z-index: 2; /* Lidt højere lag for lige knapper */
-}
 .modal-content .close-btn {
   position: absolute;
   transform: translateX(-50%);