implemented image upload and cropping system, mostly work. it's too zoomed in and appears to be using the xy coords from the top left of the crop selector.

css/base.css

@@ -24,7 +24,8 @@ small,
 label,
 input,
 textarea,
-a {
+a,
+.modal_button {
   font-family: 'HackNerdFontMono', Hack, sans-serif;
   padding: 0;
   margin: 0;
@@ -52,15 +53,23 @@ h5 {
 
 p,
 a,
-label {
+label,
+.modal_button {
   font-size: 1vw;
 }
 
+p::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+}
+
 small {
   font-size: .75vw;
 }
 
-a {
+a,
+.modal_button {
   color: orange;
   transition-duration: 1s;
 }
@@ -297,7 +306,9 @@ textarea {
 .checkboxes {}
 
 .form_checkbox_container {
-  display: block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   position: relative;
   padding-left: 35px;
   margin: 15px 15px 15px 0px;
@@ -309,6 +320,7 @@ textarea {
 
   height: 29px;
   width: max-content;
+
 }
 
 .checkmark {
@@ -458,3 +470,66 @@ input[type="file"] {
   color: orange;
   cursor: pointer;
 }
+
+.modal_button {
+  background-color: transparent;
+  border: none;
+}
+
+#img_to_crop {
+  width: 70%;
+  height: auto;
+  max-width: 512px;
+  max-height: 512px;
+
+  user-select: none;
+}
+
+#img_crop_selection {
+  pointer-events: none;
+
+  height: 128px;
+  width: 128px;
+
+  outline: dashed 4px orange;
+
+  position: fixed;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.corner {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background-color: orange;
+  border-radius: 50%;
+  cursor: nwse-resize;
+  /* Default cursor for resizing */
+  pointer-events: all;
+}
+
+#corner_nw {
+  top: -5px;
+  left: -5px;
+  cursor: nw-resize;
+}
+
+#corner_ne {
+  top: -5px;
+  right: -5px;
+  cursor: ne-resize;
+}
+
+#corner_sw {
+  bottom: -5px;
+  left: -5px;
+  cursor: sw-resize;
+}
+
+#corner_se {
+  bottom: -5px;
+  right: -5px;
+  cursor: se-resize;
+}