header{
    background-color: #2D3E50;
    width: 100%;
    height: 100px;
}

h1{
padding: 30px;
    text-align: center;
    color: white;
}

hr {
    margin-right: 1100px;

}

.forecast-container {
    display: flex;
    flex-direction: row;
    /* margin-left: 200px; */
  }
  #today {
    display: flex;
    flex-direction: row;
    margin-left: 255px;
  }

  .first-day-container {
    width: 1010px;
    background-color: #dfe2e6;
    color: rgb(32, 31, 31);
    padding: 10px;
    margin: 5px;
    margin-top: -150px;
    
  }
  
  .forecast-day {
    background-color: #2D3E50;
    color: white;
    padding: 10px;
    margin: 5px;
    width: 150px;
    margin-left: 250px;
  }


.city-button {
    display: block;
    width: 250px;
    padding: 8px;
    margin-bottom: 8px;
    text-align: center;
    background-color: #007bff;
    color: #fff;
    border: 1px solid #007bff;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .city-button:hover {
    background-color: #0056b3;
  }
  
  #clear-history {
    margin-top: 10px;
    background-color: #dc3545;
    color: #fff;
    border: 1px solid #dc3545;
    border-radius: 4px;
    cursor: pointer;
  }
  
  #clear-history:hover {
    background-color: #bd2130;
  }

  /* Style for forecast days */
.forecast-day {
    margin: 10px;
  }
  
  /* Media query for smaller screens (e.g., mobile devices) */
  @media (max-width: 767px) {
    /* Adjust the layout for smaller screens */
    .forecast-day {
      margin: 10px 0; /* Change margin to create space between days in a column */
    }
  }
  
/* style of the rows for the forecast */
#forecast-row {
    margin-left: 250px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Adjust styles for each forecast day container */
  .forecast-day {
    width: 170px;
    margin-right: 10px;
    margin-bottom: 20px;
  }