Update static/styles.css

static/styles.css

@@ -86,3 +86,36 @@ h1 {
 .popup button:hover {
     background-color: darkred;
 }
+/* Modal Window Styles */
+.popup {
+    display: none; /* Hidden by default */
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 50%;
+    background-color: white;
+    padding: 20px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+    border-radius: 8px;
+    z-index: 1000;
+}
+
+.popup.show {
+    display: block; /* Show when modal is triggered */
+}
+
+.modal-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+/* Scrollable Background */
+body {
+    overflow-y: scroll; /* Keep scrolling enabled */
+}