/* Reset default margin and padding for body */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* Style for the header */
header {
    background: linear-gradient(to bottom, #87CEEB, #1E90FF);
    text-align: center;
    color: white;
    padding: 20px 0;
    border-radius: 0px 5px;
}

/* Flexbox styles for responsive layout */
.container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 100vh;
}

.left-nav{
    flex: 1;
    min-width: 100px;
    max-width: 250px;
    padding: 20px;
}

.weather-dashboard {
    flex: 1;
    min-width: 300px;
    padding: 20px;
}

  /* Style for the search history list */
#history-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style for the history list buttons */
.history-button {
    display: block;
    width: 100%;
    text-align: left;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
  
.history-button:hover {
    background-color: #ddd;
}

/* Style for the clear history button */
#clear-history {
    background-color: darkblue;
    color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

/* Style for the search button */
#search-button {
    background-color: darkblue;
    color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

/* Style for the current weather section */
#current-weather {
    background: linear-gradient(to top, #87CEEB, #1E90FF);
    color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    text-align: center;
}

/* Style for the current weather header */
#current-weather-header {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-bottom: 10px;
}
#current-city,
#current-date {
    margin: 10px;
}

#current-date {
    font-size: 1.2em;
    font-style: normal;
}

/* Style for the weather icon in the current weather section */
#current-weather-icon {
    width: 100px;
    height: 100px;
    margin: 10px;
}

/* Style for the forecast section */
#forecast {
    background-color: lightskyblue;
    color: white;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
    
/* Style for the forecast list */
#forecast-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Style for individual forecast item */
.forecast-item {
    flex: 1;
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    margin: 5px;
    border-radius: 5px;
    background: #1E90FF;
    max-width: calc(20% - 10px);
}

/* Stlye for hover state on forecast item */
.forecast-item:hover {
    background: linear-gradient(to bottom, #87CEEB, #1E90FF);
    color: white;
    cursor: pointer;
    transform: scale(1.1);
    transition: transform 0.3s ease;
    
}

/* Responsive layout adjustments */
@media (max-width: 768px) {
    /* Center the stacked sections */
    .container {
        flex-direction: column;
        align-items: center;
    }

    /* Adjust width and padding for stacking */
    .left-nav,
    .weather-dashboard {
        width: 100%;
        min-width: auto;
        padding: 10px;
    }

    /* Stack current-weather and forecast sections */
    #current-weather,
    #forecast {
        width: 100%;
        max-width: none;
    }

    /* Adjust forecast list to stack */
    #forecast-list {
        flex-direction: column;
    }
}