:root {
  --blue: #2980b9;
  --lightblue: #3498db;
  --light: #ecf0f1;
  --darkblue: #2c3e50;
  --grey: rgb(182, 173, 173);

}

body {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  background-color: var(--light);
  color: var(--darkblue);
}
h1,
h2,
h5{

  font-weight: 700;
}
.forecast-item {
  background-color: var(--darkblue);
  color: var(--light);
}
.forecast {
  flex-wrap: wrap;
  display: inline;
}
.forecast-item,.today-header {
  padding: 10px;
  border: 3px solid var(--grey);
}
.forecast-header {
  padding-top: 10px;
}
.forecast-item {
display: inline-block !important;
width: 17%;
margin-right: 28px;
/* padding-right: 10p; */
}
#search-input{
  /* display: block; */
  width: 100%;
  padding: 10px;
  border-radius: 5px;
}
.custom-card .card-body,
.custom-modal .modal-body {
  background-color: var(--light);
  color: var(--darkblue);
}

.custom-btn, .search-button {
  background-color: var(--grey);
  color: var(--darkblue);
  width: 100%;
  margin-top: 15px;
  padding: 10px;
  border-radius: 5px;
}
.search-button {
  background-color: var(--blue);
}
.custom-btn:hover {
  background-color: var(--lightblue);
  color: var(--darkblue);
}