body{
  font-family: 'Inter', sans-serif;
}

ul {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  margin: 0;
  padding: 0;
  color: #96A0A6;
  font-size: 16px;
  font-weight: 400;
  line-height: 19px;
  text-transform: capitalize;
}

.update {
  font-size: 14px;
  font-weight: 200;
}

.app {
  max-width: 500px;
  margin: 80px auto;
}

.weather {
  padding: 20px;
  border: 1px solid none;
  border-radius: 6px;           
}

.city {
  color: #878787;
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 0;
}

.date {
  display: inline;
}

.float-left {
  display: inline-block;
  margin-right: 20px;
}
.overview {
  margin-bottom: 15px;
}

.weather-temp img{
  margin-bottom:28px;
  margin-right: 5px;
  height: 73px;
  width: 73px;
}

.weather-temp strong {
  color: #878787;
  font-size: 45px;
  display: inline;
}

.weather-temp .unit {
  position: relative;
  bottom: 21px;
  font-size: 16px;
  font-weight: 400;
  color: #96A0A6;
}

.humidity {
  margin-top: -20px;
  margin-left: 60px;
}

.wind {
  margin-top: 35px;
  margin-left: 60px;
  text-transform: none;
}

.search-form{
  margin-bottom: 30px;
}

.btn {
  background: #96a0a6;
  border: 1px solid #96a0a6;
  border-radius: 6px;
}

.btn:hover{
  background: #8f989e;
  border: 1px solid #8f989e;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}

.weather-forecast {
  margin-top: 10px;
  text-align:center;
  color: #000;
}

.forecast-date {
  font-size: 18px;
  opacity: 0.8;
}

.forecast-temp {
  font-size: 15px;  
}

.forecast-temp-max {
  opacity: 0.9;
}

.forecast-temp-min {
  opacity: 0.7;
}