style.css

body {
  font-family: Montserrat;
  height: 100%;
}

.weather-container {
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  justify-content: flex-start;
  align-items: flex-start;
  /* Align items to the left */
  padding-top: 50px;
  min-height: 100vh;
  /* Ensure it takes up the full height of the viewport */
  padding-left: 10px;
  /* Optional: padding to the left for overall container */
  overflow-x: hidden;

}

/* Container for condition and temperature */
.temperature-info {
  display: flex;
  justify-content: flex-start;
  /* Align temperature info to the left */
  align-items: center;
  font-size: 24px;
  font-weight: 400;
  line-height: 25.6px;
  margin-bottom: 10px;
  /* Optional spacing */
}

.temperature-info p {
  margin: 0 5px;
}

/* Container for sunrise and sunset */
.sun-times {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Align sunrise/sunset to the left */
  font-size: 24px;
  font-weight: 400;
  margin-bottom: 20px;
  /* Space before other weather details */
  line-height: 25.6px;
}

.sun-times p {
  margin: 0 5px;
  /* Adjust spacing between sunrise and sunset */
}

.weather-img {
  margin-top: 30px;
  max-width: 100%;
  /* Ensure image doesn't exceed container width */
  height: auto;
  /* Maintain aspect ratio */

}

.weather-message {
  font-family: Montserrat;
  font-size: 37px;
  font-weight: 700;
  line-height: 45.1px;
  text-align: left;
  padding-right: 10px;
}

.forecast-wrapper {
  display: flex;
  flex-direction: column;
  /* Stack items vertically */
  justify-content: flex-start;
  align-items: flex-start;
  /* Align items to the left */
  position: relative;
  /* Optional: Positioning context for child elements */
}

#forecastList {
  list-style-type: none;
  /* Remove default list styling */
  padding: 0;
  /* Remove default padding */
  margin: 0;
  /* Remove default margin */
  font-size: 21px;
  line-height: 36px;
  gap: 20px
}

li {
  display: flex;
  width: 290px;
  justify-content: space-between;
  font-size: 20px;
  line-height: 1.6;
}

.weekday {
  width: 100px;
  /* Set a fixed width for all weekday names */
}

.min-max {
  display: flex;
}

.min-temp {
  margin-left: 10px;
}

.max-temp {
  margin-right: 5px;
}

#searchContainer {
  display: flex;
  /* Align items horizontally */
  justify-content: flex-start;
  /* Align items to the left */
  align-items: center;
  /* Vertically center the items */
  padding-top: 20px;
  padding-bottom: 20px;
}

label {
  font-size: 18px;
  margin-right: 15px;
  /* Space between the label and input */
}

#cityInput {
  padding: 8px;
  /* Padding for the input field */
  border: 1px solid #ccc;
  /* Border around the input field */
  border-radius: 4px;
  /* Rounded corners */
  margin-right: 5px;
  /* Space between the input and search button */
  font-family: Montserrat;
  font-weight: 500;
  font-size: 16px;
}

#searchButton {
  padding: 10px 12px;
  /* Padding for the search button */
  color: white;
  border: none;
  border-radius: 4px;
  /* Rounded corners for the button */
  cursor: pointer;
  /* Pointer cursor on hover */
  font-family: Montserrat;
  flex-shrink: 0;
}

/* Media Queries */

/* Apply centering only on desktop screens */
@media (min-width: 768px) {
  .weather-container {
    align-items: center;
    /* Center horizontally */
  }

  .temperature-info,
  .sun-times,
  .weather-message,
  .forecast-wrapper {
    text-align: left;
    /* Keep content left-aligned */
    width: 100%;
    max-width: 600px;
    /* Limit width on large screens */
  }
}

@media (min-width: 768px) {
  .weather-img {
    max-width: 300px;
    /* Limit max width for desktop */
    height: auto;
    /* Maintain aspect ratio */
    margin-top: 30px;
  }
}