.body {
    font-family: 'Darker Grotesque', sans-serif;
    background-color: orange;
  }
  
  .jumbotron {
    text-align: center;
    background-color: transparent;
    color: rgb(236, 109, 17);
    border-bottom: 10px solid rgb(28, 87, 99);
  }
  .weather-h1 {
    color: #d89997;
    font-weight: bolder;
  }
  
  .card-header {
    background: aqua;
    text-align: center;
  }
  
  #searchCityName {
    width: 85%;
  }
  
  .flex {
    display: flex;
    flex-direction: column;
    align-items: baseline;
  }
  
  .wicon {
    width: 50%;
      height: 50%;
  }

  /* button styling */
  .btn {
    background: #3B3B6D;
    color: gold;
  }
  
  #clearBtn{
    margin-left: 90px;
    margin-top: 1vw;
  }
  
  /* 5 day forecast */
  .card-forecast {
    background-color: yellow;
  }
  
  .five-forecast-title {
    font-size: 1.5vw;
    margin-bottom: 1vw;
  }
  
  .forecastCard {
    color: antiquewhite;
    font-weight: bold;
  }
  
.5-dayForecast  {
    background-color: antiquewhite;
    font-weight: bold;
  }

  .card-title {
    font-size: 1vw;
  }
  
  .card-body h6 {
    font-size: 1.25vw;
    font-weight: bold;
  }
  
  .card-subtitle {
    font-size: .90rem;
  }