body, html {
  height: 100%; /* Ensure full height */
  margin: 0; /* Reset default margin */
  background: #f5f5f7; /* Set background color */
  display: flex; /* Set flex display */
  align-items: center; /* Center content vertically */
  justify-content: center; /* Center content horizontally */
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Set font */
}

.wrapper {
  margin-top: 100px;
  margin-bottom: 100px;
}

.form-signin {
  width: 600px; /* Increased width */
  padding: 40px 35px 50px; /* Adjusted padding for more height */
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.form-signin .form-signin-heading {
  color: #333; /* Darker color for better readability */
  font-size: 24px;
  margin-bottom: 30px; /* More space above the form fields */
  text-align: center;
}

.form-signin .form-control {
  font-size: 16px;
  height: auto;
  padding: 10px;
  border-radius: 20px; /* Rounded form fields */
  border: 1px solid #cccccc; /* Lighter border color */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* Inner shadow for depth */
  display: block; /* Ensure elements are block-level */
  width: 100%;
  justify-content: center;
}

.form-signin .form-control:focus {
  border-color: #66afe9; /* Focus color to match the button */
  outline: 0; /* Remove default focus outline */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6); /* More pronounced focus shadow */
}

.form-signin input[type="text"],
.form-signin input[type="password"] {
  margin-bottom: 15px; /* Adjusted spacing */
}

.btn {
  max-width: 340px; /* Your desired maximum width for the button */
  margin: auto; /* Center the button horizontally and add vertical spacing */
  font-size: 18px;
  border-radius: 20px;
  padding: 12px 45px;
  background-color: #007bff;
  border-color: #007bff;
  color: #ffffff;
  line-height: 1.5;
  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
  display: block; /* Ensure the button is a block-level element */
  width: 100%; /* This will make the button responsive and fill the width of its container, but not more than the max-width */
}

.btn:hover,
.btn:focus {
  background-color: #0056b3; /* Darker shade on hover/focus for contrast */
  border-color: #0056b3;
}

.logo {
  max-width: 200px; /* Ensure logo size is controlled */
  margin: 0 auto 20px; /* Adjust bottom margin */
}


.form-signin .form-signin-heading,
.logo,
.btn {
  margin-bottom: 20px; /* Space below each element */
  text-align: center; /* Align text to the center for the heading */
  width: 100%; /* Full width */
  display: block; /* Ensure elements are block-level */
}

.form-control {
  max-width: 340px; /* Your desired maximum width for the form fields */
  margin-left: auto; /* Center the field horizontally */
  margin-right: auto; /* Center the field horizontally */
  font-size: 16px;
  height: auto;
  padding: 10px;
  border-radius: 20px;
  border: 1px solid #cccccc;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  display: block; /* Ensure elements are block-level */
  width: calc(100% - 70px); /* Adjust width to be less than 100% to account for padding */
  text-align: center;
}