More styling to character select and modal

src/components/utilities/Modal.vue

@@ -143,19 +143,43 @@ onUnmounted(() => {
 
   .modal-body {
     padding: 15px;
+    .submit {
+      display: inline-block;
+      button {
+        margin-right: 20px;
+      }
+    }
     button {
       padding: 10px 16px;
+      min-width: 6.25rem;
+      text-align: center;
+      position: relative;
       background-color: rgba($purple, 0.75);
-      border: 2px solid rgba($white, 0.5);
+      border: rgba($white, 0.35) 1px solid;
       border-radius: 5px;
       color: $white;
+
+      &:hover {
+        background-color: rgba($lilac, 0.75);
+        cursor: pointer;
+      }
     }
     .modal-form {
+      display: inline;
       .form-fields {
         display: flex;
         flex-direction: column;
+        margin-bottom: 20px;
+        label {
+          font-family: Arial, sans-serif;
+          margin-bottom: 10px;
+        }
         input {
           max-width: 250px;
+          border: 1px solid $purple;
+          border-radius: 5px;
+          background-color: rgba($white, 0.5);
+          padding: 10px;
         }
       }
     }