body {
  background-color: rgb(215, 247, 245, 0.8);
  color: #2a6171;
  font-family: "Sofia Sans", sans-serif;
}

header {
  text-align: center;
}

main {
  color: #2a6171;
}
footer {
  text-align: center;
  font-family: "Numans", sans-serif;
  font-size: 12px;
  padding: 20px 10px 10px;
}

a {
  color: #75cac3;
}

.app-container {
  background: linear-gradient(
    180deg,
    rgba(255, 227, 128, 0.9) 0%,
    rgb(250, 249, 241) 100%
  );
  border-radius: 15px;
  box-shadow: 20px 20px 30px rgba(42, 97, 113, 0.2);
  max-width: 75%;
  margin: 30px auto;
  padding: 25px;
}

.enter-city {
  border: none;
  border-radius: 5px;
  font-size: 15px;
  padding: 5px 10px;
  width: 50%;
}
.search-button {
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  background-color: #2a6171;
  margin-left: 10px;
  padding: 5px 10px;
  transition: all 200ms ease;
}
.search-button:hover {
  background-color: #75cac3;
  cursor: pointer;
}

.current-city {
  color: #2a6171;
  font-size: 48px;
  font-weight: bold;
  margin-top: 20px;
  text-align: center;
}
.current-temp {
  color: #2a6171;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: bold;
  margin-top: 5px;
  text-align: center;
}
#current-temp {
  font-size: 70px;
}
#weather-icon {
  max-width: 100px;
}

.current-weather {
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
  margin-top: 15px;
}
#humidity,
#wind {
  font-weight: normal;
}

.weather-forecast {
  display: flex;
  margin: 25px 0;
  text-align: center;
  justify-content: space-around;
}

.forecast-icon {
  max-width: 55px;
}
.forecast-high {
  font-weight: bold;
}