I have improved the book exchange form

assets/css/style.css

@@ -4682,3 +4682,150 @@ body.dark-mode .h3 {
   position: relative;
   left: 10rem;
 }
+
+
+body {
+  background-color: #ffb2a8; /* Background color for the whole page */
+  color: black;
+  font-size: 1.55rem;
+  line-height: 1.8;
+}
+
+.container1 {
+
+  width: 100%;
+  max-width: 1200px;
+  height: auto;
+  max-height: 1600px;
+  padding: 20px;
+  box-sizing: border-box;
+  overflow-y: auto;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  background-color:var(--seashell);
+}
+* {
+  box-sizing: border-box;
+}
+
+
+
+
+.form-fields {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Label for each field */
+.form-label {
+  margin-bottom: 5px; /* Reduced margin */
+  font-weight: bold;
+  margin-top:5px
+}
+
+/* Input field styling */
+.input-field {
+  padding: 8px; /* Reduced padding */
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 10px; /* Adjusted margin */
+  width: 100%; /* Full width */
+  box-sizing: border-box; 
+  margin-top: 5px;/* Include padding in width */
+}
+
+/* Currency container styling */
+.currency-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px; /* Adjusted margin */
+}
+
+/* Styling for currency label */
+.currency-label {
+  margin-right: 8px; /* Reduced margin */
+}
+
+/* Button styling */
+.btn {
+  background-color: #ff67a1;
+  color: white;
+  border: none;
+  padding: 10px; /* Reduced padding */
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+  /* Style for Predict Price button */
+#predictPriceBtn {
+  background-color:#4CAF50; /* Change to your preferred background color */
+  color: white; /* Text color */
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 16px;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
+}
+
+/* Hover effect */
+#predictPriceBtn:hover {
+  background-color:#ad5388; /* Darker shade for hover effect */
+}
+
+/* Active and focus states to prevent white background */
+#predictPriceBtn:active,
+#predictPriceBtn:focus {
+  background-color: #ad5388; /* Keep the original background color */
+  color: white;
+  outline: none;
+}
+
+/* Remove any outline on focus */
+#predictPriceBtn:focus {
+  outline: none;
+}
+
+
+
+
+
+/* Style for the Connect with a Reader button */
+#connectReaderBtn {
+  background-color: #4CAF50; /* Change this color to your preferred button color */
+  color: white; /* Button text color */
+  border: none; /* Remove border */
+  padding: 10px 20px; /* Button padding */
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin-top: 10px;
+  cursor: pointer;
+  border-radius: 4px; /* Rounded corners */
+  transition: background-color 0.3s ease;
+}
+
+#connectReaderBtn:hover {
+  background-color: #ad5388; /* Darker shade on hover */
+}
+
+
+/* Button hover effect */
+.btn:hover {
+  background-color: #e25591;
+}
+
+/* Error message styling */
+.error {
+  color: red;
+  font-size: 0.9rem;
+  margin-top: -8px; /* Reduced margin */
+  margin-bottom: 10px; /* Adjusted margin */
+}
+
+/* New field for book name */
+.book-name-field {
+  margin-bottom: 10px; /* Space between fields */
+}