Better CSS

static/css/main.css

@@ -2519,49 +2519,52 @@ button:disabled,
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   position: relative;
+  display: flex;
+  justify-content: center; /* Centrer horisontalt */
+  align-items: center; /* Centrer vertikalt */
+  flex-direction: column; /* Placer knapper under billedet */
   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 {
+  display: block;
   height: auto;
-  max-width: 90vw;
-  max-height: 90vh;
-  object-fit: contain;
+  max-width: 95%; /* Maks bredde på 90% af modalens bredde */
+  max-height: 78vh; /* Maks højde på 80% af viewporten */
+  margin-bottom: 20px;
+  object-fit: contain; /* Skaler billedet korrekt */
   border-radius: 15px;
-  margin: 0 auto;
+  margin: 0 auto; /* Som ekstra sikkerhed */
 }
 .modal-content .modal-buttons {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
   display: flex;
-  justify-content: center;
-  position: relative;
-  margin-top: 20px;
+  gap: 15vh;
+  background-color: #ffffff;
 }
 .modal-content .modal-buttons button {
-  position: relative; /* Tillader z-index at tage effekt */
-  margin: 20px;
+  border: none;
+  border-radius: 5px;
   cursor: pointer;
-  transition: transform 0.3s ease, z-index 0.3s ease;
+  transition: background-color 0.3s ease, transform 0.2s ease;
 }
 .modal-content .modal-buttons button:hover {
   transform: scale(1.05);
-  z-index: 3; /* Hæver knappen øverst ved hover */
 }
 .modal-content .close-btn {
-  position: absolute;
   transform: translateX(-50%);
   cursor: pointer;
+  margin-left: 5vw;
 }
 
 .next-btn {
   cursor: pointer;
-  position: absolute;
-  right: 20px;
   transition: background-color 0.3s ease;
 }