body {
  background: linear-gradient(to top, #accbee 0%, #e7f0fd 100%);
  display: block;
  background-attachment: fixed;
  font-family: "Saira Condensed", sans-serif;
}

.searchBox {
  margin: 30px 80px;
  margin-left: 65px;
}

#city-search {
  background: rgba(81, 108, 141, 0.3);
  border: solid 1px transparent;
}

.citySearchButton {
  background: rgba(81, 108, 141, 0.3);
  border: solid 1px transparent;
  cursor: pointer;
}

#city {
  margin-top: 40px;
  text-transform: capitalize;
}

.centerWeather {
  text-align: center;
  margin: 85px auto 0px;
  color: #304163;
  text-transform: capitalize;
}

h1 {
  font-size: 50px;
  margin-top: 25px;
}

.dayTime {
  font-size: 30px;
  font-weight: 500;
  text-transform: capitalize;
}

#icon {
  width: 150px;
}

.currentTemperature {
  font-size: 70px;
  margin-bottom: 0;
}

.units {
  font-size: 30px;
  margin-bottom: 100px;
}

#celsius {
  text-decoration: none;
}

#fahrenheit {
  text-decoration: none;
}

.active {
  color: #304163;
  cursor: default;
}
.active:hover {
  text-decoration: none;
  color: #304163;
}

h3 {
  margin-top: 50px;
  font-size: 25px;
  font-weight: 600;
}

ul {
  list-style: none;
}

.footerWeather {
  background: rgba(81, 108, 141, 0.5);
  color: #28385e;
  margin: 85px 80px 0px;
  padding: 20px 20px;
  border-radius: 8px;
}

.forecastWeather {
  text-align: center;
}

.forecastDay {
  font-size: 25px;
}

.forecastTemperature {
  font-size: 20px;
}

.forecastTemperatureMax {
  opacity: 0.7;
}

.sourceCode {
  text-align: center;
  margin: 10px;
}