/* base styles for the */ body { font-family: 'Lato', Arial, sans-serif; margin: 0; padding: 0; background-color: #E9EBEE; color: #333; } body.aside-closed aside { display: none; } /* expands the content area to full width when aside is closed */ body.aside-closed #content-area { flex: 1; width: 100%; } /*

styles */ header { background-color: #2C3E50; color: white; text-align: center; padding: 0.5em 0; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); } /*

content area layout */ main { display: flex; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); margin: 20px; border-radius: 5px; overflow: hidden; } /* styles for

section */ aside { flex-basis: 25%; border-right: 1px solid #ddd; padding: .75em; height: 100vh; box-sizing: border-box; overflow-y: auto; background-color: #FDF5E6; } /*screens up to 768px width */ @media (max-width: 768px) { /*

content +

stack vertically */ main { flex-direction: column; } aside { border-right: none; border-bottom: 1px solid #ddd; } #content-area { height: auto; } /* hides the

content */ #asideContent { display: none; } .forecast-item { display: block; width: 100%; overflow-x: hidden; } } /* button to toggle the visibility of the

*/ button#toggleAsideBtn { position: absolute; top: 20px; left: 20px; padding: 10px 20px; background-color: #527fac; color: white; border: none; border-radius: 4px; cursor: pointer; z-index: 999; /* the button will stay on top of elements */ } /* hover effect */ button#toggleAsideBtn:hover { background-color: #34495E; } /*

content area styles */ #content-area { flex: 1; display: flex; flex-direction: column; height: 100vh; background-color: #F4F6F6; } /* city information styling */ #city-info { flex-basis: 35%; overflow-y: auto; padding: .4em; text-align: center; background-color: #AFEEEE; border-bottom: 1px solid #ddd; } /* styles for the forecast container */ .forecast-container { background-color: #FDF5E6; } /* styles for individual forecast sections */ #forecast { flex: .8; display: flex; flex-wrap: nowrap; justify-content: space-around; overflow-y: auto; } h3 { text-align: center; } /* styling each forecast item */ .forecast-item { display: inline-block; max-width: 100%; } /* styles for each day in the forecast */ .forecast-day { flex: 1; text-align: center; padding: 0 0.5em; box-sizing: border-box; background-color: #FFFFFF; margin: 5px; border-radius: 5px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); position: relative; background-color: #20B2AA; max-width: 100%; } /* overlay header on the forecast day */ .forecast-day h3 { position: absolute; top: 0; left: 50%; padding: 5px; border-radius: 4px; background-color: #FDF5E6; } /* styles for each city in the search history */ .history-item { padding: 0.5em; margin: 0.5em 0; border: 1px solid #ddd; cursor: pointer; transition: background-color 0.3s; background-color: #DA70D6; display: flex; justify-content: center; align-items: center; } /* hover effect */ .history-item:hover { background-color: #BA55D3; transform: scale(1.02); } /* form layout */ #city-form { margin-bottom: 1em; display: flex; flex-direction: column; gap: 10px; } /* input box styles*/ #city-input { padding: 10px; border: 1px solid #ddd; border-radius: 4px; } /* button styles for submitting city search */ #submit-button { padding: 10px 20px; background-color: #2C3E50; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } /* hover effect */ #submit-button:hover { background-color: #34495E; } /* button styles for other search actions */ .search-button { padding: 10px 20px; background-color: #00BFFF; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s; } /* hover effect */ .search-button:hover { background-color: #1E90FF; } /* button styles for clearing search history */ #clearSearches { padding: 10px 20px; background-color: #E74C3C; color: white; } /* hover effect */ #clearSearches:hover { background-color: #C0392B; }