display profile picture image

static/card.css

@@ -9,6 +9,7 @@
     display: flex;
     flex-direction: column;
     gap: 15px;
+    overflow: hidden;
 }
 
 .static_center {

static/profile_page.css

@@ -154,13 +154,58 @@
     color: var(--text-main);
 }
 
-#resize_photo_box {
-    background-color: black;
-    width: 100px;
-    height: 100px;
-
+#image_container {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
 }
+
+#darken_part {
+    /*background-color: black;*/
+    z-index: 3;
+    width: 100vw;
+    height: 100vh;
+}
+
+#confirm_change {
+    z-index: 2;
+}
+
+#new_profile_image {
+    z-index: 1;
+    transform: translateX(calc(-50% + var(--x-offset)))
+        translateY(calc(-50% + var(--y-offset)));
+    position: absolute;
+    left: calc(350px / 2);
+    top: calc(350px / 2);
+}
+
+#resize_photo_box {
+    background-color: rgba(0, 0, 0, 0);
+    width: 350px;
+    aspect-ratio: 1 / 1;
+
+    border-style: dashed;
+    border-color: black;
+    border-width: 5px;
+    z-index: 4;
+}
+
+/*
+
+#resize_photo_box:hover {
+    cursor: grab;
+}
+
+#new_profile_image {
+    height: 350px;
+    position: absolute;
+    transform: translateX(5px) translateY(5px);
+    object-fit: cover;
+}
+
+
+#image_container {
+    height: 350px;
+    width: fit-content;
+    position: absolute;
+    background-color: red;
+}*/