.app-body {
  display: block;
  background: antiquewhite;
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #352f2c;
  font-weight: 500;
  font-size: medium;
  max-width: 600px;
  padding: 10px;
  margin: 40px auto 0 auto;
  border-radius: 10px;
  box-shadow:
    2px 4px rgba(43, 34, 22, 0.04),
    0 8px 16px rgba(43, 34, 22, 0.08);
}
header {
  padding-bottom: 10px;
}
#search-city {
  display: flex;
  gap: 12px;
}
#search-input,
#search-button {
  font-family: "Plus Jakarta Sans", sans-serif;
  color: #352f2c;
  font-weight: 500;
  font-size: medium;
  border-radius: 7px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-style: none;
  background-color: rgb(209, 220, 208);
}
#search-input {
  outline: none;
  padding-left: 9px;
  background-color: rgb(250, 245, 239);
  width: 72%;
}
#search-button {
  width: 25%;
  cursor: pointer;
  transition: all 0.1s ease;
}
#search-button:hover {
  background-color: rgb(201, 212, 200);
  box-shadow: 0 8px 16px rgba(145, 136, 136, 0.2);
}

main {
  padding: 60px 20px;
  border-radius: 7px;
  background-color: rgb(202, 222, 200);
}
.app-body,
main,
#search-input {
  background-image: url("https://plus.unsplash.com/premium_photo-1668091148044-056cd744e64a?fm=jpg&q=60&w=3000&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8c2t5JTIwY29sb3J8ZW58MHx8MHx8fDA%3D");
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}
.weather-info-container {
  display: flex;
  width: 100%;
}

.weather-info,
.weather-other-info {
  font-weight: bold;
  flex: 1;
  text-align: center;
}
.weather-info {
  margin-left: 10px;
  font-family: "Lora", serif;
  font-weight: 700;
  font-size: xxx-large;
}
.weather-other-info {
  list-style-type: none;
}

#current-temperature,
#weather-description-icon {
  display: inline-flex;
  height: 1em;
}
.temperature-unit {
  font-size: small;
}
.day-time,
.description,
.humidity,
.wind-speed {
  padding: 3px;
}

.weather-forecast {
  background-color: rgba(255, 255, 255, 0.25);
  color: #352f2c;
  padding: 28px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  font-size: 12px;
  text-align: center;
  font-family: "Plus Jakarta Sans", sans-serif;

  line-height: 20px;
}
.day-name {
  text-transform: uppercase;
  font-weight: 600;
}

.day-temperature-unit {
  font-size: x-small;
}
.image-forecast-icon,
#weather-description-icon {
  height: 60px;
  width: 60px;
}
footer {
  border-radius: 7px;
  margin-left: 10px;
  margin-top: 10px;
  font-size: x-small;
}
a {
  color: #352f2c;
}