finish styling for change password page

src/pages/profile_page.html

@@ -12,7 +12,7 @@
 
 <div id="popup_background" class="blocked hidden"></div>
 
-<div id="change_password_dialouge" class="hidden card">
+<div id="change_password_dialouge" class="hidden card static_center">
     <div id="password_error" class="error hidden">
         <div id="password_text"></div>
         <button id="password_error_close_button" class="close_error_button">

static/card.css

@@ -10,4 +10,15 @@
     padding: 2.5rem;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
     transition: transform 0.2s ease;
+
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.static_center {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translateX(-50%) translateY(-50%);
 }

static/login_page.css

@@ -6,11 +6,6 @@
 }
 
 #login_card {
-    /* The Magic Three */
-    display: flex;
-    flex-direction: column; /* Stack vertically */
-    gap: 15px; /* Space between inputs */
-
     position: fixed;
     top: 50%;
     left: 50%;

static/profile_page.css

@@ -33,6 +33,8 @@
     max-width: 500px;
     text-align: center;
 
+    gap: 0px !important;
+
     position: fixed;
     left: 50%;
     top: 50%;
@@ -120,3 +122,7 @@
     z-index: 10000;
     position: fixed;
 }
+
+#change_password_dialouge input {
+    width: 350px;
+}

static/style.css

@@ -52,7 +52,7 @@ input::placeholder {
 }
 
 .hidden {
-    display: none;
+    display: none !important;
 }
 
 .blocked {