/* General styling for the body */
body {
  margin: 0; /* Remove default margin */
  padding: 0; /* Remove default padding */
  background: #f0f4f8; /* Light background color */
  color: #333; /* Text color */
}

/* Main container styling to center content and add padding */
.container {
  max-width: 500px; /* Set the maximum width of the container */
  margin: 40px auto; /* Center the container with margin on top and bottom */
  padding: 20px; /* Add padding inside the container */
  background: #ffffff; /* White background for the container */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Add subtle shadow around the container */
  border-radius: 10px; /* Rounded corners */
  text-align: center; /* Center text inside the container */
}

/* Header styling (the title) */
header h1 {
  font-size: 2rem; /* Set font size */
  margin-bottom: 20px; /* Space below the header */
}

/* Form section styling */
.weather-form {
  display: flex; /* Use flexbox for the form */
  flex-direction: column; /* Stack form elements vertically */
  gap: 10px; /* Space between form elements */
  margin-top: 20px; /* Space above the form */
}

/* Styling for the input field */
.weather-form input {
  padding: 12px; /* Add padding inside the input */
  font-size: 1.1rem; /* Increase font size */
  border: 1px solid #ccc; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 10px; /* Space below the input */
  outline: none; /* Remove default outline on focus */
  transition: border 0.3s ease; /* Smooth transition for border on focus */
}

/* Focus effect on input field */
.weather-form input:focus {
  border: 1px solid #0077cc; /* Change border color to blue on focus */
}

/* Button styling */
.weather-form button {
  padding: 8px 16px; /* Add padding inside the button */
  background-color: #0077cc; /* Blue background color */
  color: #fff; /* White text color */
  font-size: 0.9rem; /* Slightly smaller font size */
  border: none; /* Remove border */
  border-radius: 4px; /* Rounded corners */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: background-color 0.3s ease; /* Smooth transition for background color on hover */
  width: auto; /* Button adjusts to the size of the content */
  max-width: 200px; /* Limit the button's maximum width */
  margin: 0 auto; /* Center the button horizontally */
}

/* Hover effect on button */
.weather-form button:hover {
  background-color: #005fa3; /* Change button color when hovered */
}

/* Loading indicator styling */
.loading {
  font-size: 1.2rem; /* Larger font size for loading text */
  color: #0077cc; /* Blue text color */
  font-weight: bold; /* Make the loading text bold */
  margin-top: 10px; /* Space above the loading text */
  display: none; /* Hide by default */
}

/* Weather result section styling */
.weather-result {
  margin-top: 20px; /* Space above the weather result */
  padding: 20px; /* Add padding inside the result box */
  background-color: #e9f6ff; /* Light blue background */
  border-left: 4px solid #0077cc; /* Blue left border */
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow around the result box */
}

/* Styling for the paragraphs inside the weather result */
.weather-result p {
  margin: 5px 0; /* Small margin between paragraphs */
  font-size: 1rem; /* Standard font size */
}

/* Styling for the temperature text */
.weather-result .temperature {
  font-size: 1.5rem; /* Larger font size for temperature */
  font-weight: bold; /* Bold text */
}

/* Styling for the weather description */
.weather-result .weather-description {
  color: #555; /* Dark gray color for the description */
}

/* Footer styling */
footer {
  margin-top: 30px; /* Space above the footer */
  text-align: center; /* Center the footer text */
  font-size: 0.9rem; /* Smaller font size */
  color: #777; /* Light gray color */
}