eaglelandsonce/form

1body {2  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;3  background-color: #f7f7f7;4  margin: 0;5  padding: 0;6  box-sizing: border-box;7}8 9.container {10  max-width: 600px;11  margin: 40px auto;12  padding: 20px;13  background-color: #fff;14  border-radius: 8px;15  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);16}17 18h2 {19  font-size: 24px;20  color: #333;21  text-align: center;22  margin-bottom: 30px;23}24 25form {26  display: flex;27  flex-direction: column;28}29 30.form-group {31  margin-bottom: 20px;32}33 34label {35  display: block;36  margin-bottom: 10px;37  color: #666;38  font-size: 16px;39}40 41input[type=text], input[type=email], input[type=tel], input[type=date], textarea {42  width: calc(100% - 22px); /* Accounting for padding and border */43  padding: 10px;44  font-size: 14px;45  border: 1px solid #ccc;46  border-radius: 4px;47  transition: border-color 0.3s;48}49 50input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=date]:focus, textarea:focus {51  outline: none;52  border-color: #007bff;53}54 55textarea {56  resize: vertical;57  height: 120px;58}59 60input[type=submit] {61  font-size: 16px;62  color: white;63  background-color: #007bff;64  padding: 12px 20px;65  border: none;66  border-radius: 4px;67  cursor: pointer;68  transition: background-color 0.3s;69}70 71input[type=submit]:hover, input[type=submit]:focus {72  background-color: #0056b3;73}74 75/* Responsive adjustments */76@media (max-width: 768px) {77  .container {78    width: 80%;79    margin: 20px auto;80  }81 82  input[type=submit] {83    width: 100%;84  }85}86