.container {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  max-width: 50%;
  max-height: 40%;
  margin: 15% auto;
  color: rgb(24, 102, 128);
}

.weather-card {
  background: linear-gradient(
    90deg,
    rgb(197, 243, 250) 6%,
    rgb(24, 102, 128) 100%
  );
  padding: 30px;
  border-radius: 20px;
}

h1 {
  font-size: 30px;
  font-weight: lighter;
}

.searchForm {
  display: inline-flex;
  max-width: 20em;
  border-radius: 10px;
  color: #ffffff;
  background-color: rgba(24, 102, 128, 0.278);
}

.searchInput {
  background-color: rgba(255, 255, 255, 0);
  border-radius: 10px;
  border: none;
}

.searchInput::placeholder {
  color: #ffffff;
}

.searchButton {
  color: #ffffff;
  border-radius: 10px;
  border: none;
}

.searchButton:hover {
  background-color: rgba(24, 102, 128, 0.347);
}

img {
  max-height: 50%;
  vertical-align: top;
  margin: 0% auto;
}

#tempOfTheDay {
  font-size: 70px;
  margin: 0% auto;
}

.tempUnits {
  vertical-align: 30px;
}

.locater {
  font-size: 20px;
}
.locater:hover {
  cursor: pointer;
  color: rgb(13, 58, 73);
}

#searchIcon {
  font-size: 20px;
}
#searchIcon:hover {
  cursor: pointer;
  color: rgb(13, 58, 73);
}

.active {
  color: rgb(24, 102, 128);
  cursor: default;
  text-decoration: none;
}
.active:hover {
  text-decoration: none;
}
#f-c-btn {
  color: rgb(13, 58, 73);
}
#c-f-btn {
  color: rgb(13, 58, 73);
}
.col-2 {
  color: aliceblue;
  background-color: rgba(240, 248, 255, 0.241);
  border: 2px solid aliceblue;
  border-radius: 20px;
  text-align: center;
  padding: 10px;
}
.weather-forecast-date {
  font-size: 20px;
}
.forecast img {
  width: 30px;
  display: block;
}
.weather-forecast-temp {
  font-size: 15px;
  display: inline;
}
.lowestTemp {
  color: rgba(240, 248, 255, 0.797);
}