@import url(https://fonts.googleapis.com/css2?family=Zen+Dots:wght@300;400;500;700&display=swap);body,html{height:100%;margin:0;padding:0}body{font-family:Zen\+Dots,sans-serif;background-color:#f8fafa;color:#333}.container{max-width:1200px;margin:0 auto;padding:2rem}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.header h1{font-family:Zen Dots,serif;font-size:2.5rem;color:#1b4965;margin:0}.search-bar{display:flex;align-items:center;margin-bottom:2rem}.search-input{font-size:1rem;padding:.5rem;border:1px solid #ccc;border-radius:.25rem;background-color:#f5f5f5;width:60%;margin-right:1rem}.search-button{font-size:1rem;background-color:#1b4965;color:#fff;border:none;border-radius:.25rem;padding:.5rem 1rem;cursor:pointer;transition:background-color .3s ease}.search-button:hover{background-color:#2a9d8f}.weather{text-align:center;color:#264653;margin-bottom:3rem;padding:2rem}.weather h2{font-size:2rem;margin-bottom:1rem;color:#264653}.weather-icon{width:auto;height:auto;border-radius:10%;background-color:rgba(240,248,255,.5)}.temp-box{display:flex;flex-direction:column;align-items:center}.temperature{font-size:3rem;margin-top:1rem;margin-bottom:1rem}.main-desc{display:inline-block;font-size:1.8rem;color:#264653}.forecast{margin-bottom:3rem}.cast-header{font-size:1.5rem;color:#fff;background-color:#bee9e8;padding:.5rem 1rem;border-radius:1rem;margin-bottom:1rem;text-shadow:1px 1px 2px #000;width:50%}.forecast-cards{display:flex;justify-content:space-between;padding:1.4rem;background:hsla(0,0%,100%,.2);box-shadow:0 8px 32px 0 rgba(31,38,135,.37);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:10px;border:1px solid hsla(0,0%,100%,.18)}.time{font-weight:700;color:#2a9d8f;margin-bottom:.5rem}.temp-max,.temp-min{font-size:1.2rem;margin-bottom:.5rem;color:#1b4965}.desc{color:#1b4965}.date{font-weight:700;color:#2a9d8f}.forcast-desc{display:flex}@media screen and (max-width:768px){.header{align-items:stretch}.header,.search-bar{flex-direction:column}.search-button,.search-input{width:100%;border-radius:.5rem}.search-input{margin-right:0;margin-bottom:1rem}.weather-icon{width:100px;height:100px}.temperature{font-size:2.5rem}.forecast-cards{flex-direction:column}.mobile-margin{margin-bottom:2.6rem}.cast-header{font-size:1.2rem}}