style.css

/* style.css */

body {
    background-color: rgb(243, 243, 243); /* Light grey background for the whole page */
    font-family: Arial, sans-serif; /* Setting a default font for better readability */
}

.user-form {
    border: 2px solid #333333; /* Solid border for the form */
    padding: 20px; /* Padding inside the form */
    margin: 30px auto; /* Centering the form on the page with some margin */
    width: 80%; /* Adjust the width as needed */
    max-width: 500px; /* Maximum width of the form */
    background-color: #ffffff; /* White background for the form */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adding a subtle shadow for depth */
}

.user-form h3 {
    text-align: center; /* Centering the form's title */
    margin-bottom: 20px; /* Spacing below the title */
}

.user-form label {
    display: block; /* Making labels block elements for better structure */
    margin: 10px 0 5px 0; /* Adding margin around labels */
}

.user-form input[type="text"],
.user-form input[type="date"] {
    width: calc(100% - 10px); /* Full width minus padding */
    padding: 5px; /* Padding inside input fields */
    margin-bottom: 10px; /* Space below each input field */
    border: 1px solid #ccc; /* Light border for inputs */
    border-radius: 4px; /* Slightly rounded corners for inputs */
}

.user-form button {
    background-color: #007bff; /* Bootstrap primary color for the button */
    color: white; /* White text color for the button */
    padding: 10px 20px; /* Padding inside the button */
    border: none; /* Removing default border */
    border-radius: 4px; /* Rounded corners for the button */
    cursor: pointer; /* Cursor changes to pointer to indicate it's clickable */
    width: 100%; /* Full width button */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Adding a shadow to the button */
    transition: background-color 0.3s; /* Smooth transition for hover effect */
}

.user-form button:hover {
    background-color: #0056b3; /* Darker shade of blue on hover */
}

/* Styles for the result list */
#weather-result {
    padding: 20px; /* Same padding as the form */
}

#weather-result ul {
    list-style-type: none; /* Removes default list styling */
    padding-left: 0; /* No padding on the left of the list */
}

#weather-result li {
    background-color: #e8e8e8; /* Light background for each list item */
    margin-bottom: 5px; /* Space between list items */
    padding: 10px; /* Padding inside each list item */
    border-radius: 10px; /* Rounded corners for list items */
    list-style-type: "\1F44D"; /* Removes default list styling and adds a thumbs up icon */
}