body{background-image:radial-gradient(circle,#0042ab,rgb(0,47,69));min-height:100vh;background-repeat:no-repeat;display:flex;justify-content:center;font-family:Kanit,sans-serif;margin:0}.main-container{display:flex;justify-content:center;align-items:center;text-align:center}h1{font-size:3rem;color:#d7d7d7}.weather-container{position:relative;width:1080px;display:flex;flex-direction:column;justify-content:center;align-items:center}.weather-container>h1{margin-top:0}.input-container{display:flex;gap:1rem}.weather-panel{width:90%;margin-top:1rem;display:flex;flex-direction:column}.no-search-display>h1{color:#fff;font-size:2rem}.no-search-display>img{width:200px;height:200px}.input-box{width:750px;padding:10px;border:1px solid black;border-radius:.2rem;font-size:1rem;outline:none}.search-options{position:absolute;top:150px;left:105px;width:71%;border-radius:.2rem;background-color:#fff;z-index:2}.dropdown-item:hover{background-color:#0097f5;cursor:pointer}.navigate-btn{cursor:pointer;font-family:Kanit,sans-serif;border:1px solid black;border-radius:3px;transition:color .15s;font-size:1.2rem}.navigate-btn:hover{color:#00496d}.current-weather{display:flex;flex-direction:column;gap:2rem}.display-weather{display:flex;justify-content:space-between;align-items:start}.display-weather-image{display:flex;justify-content:center;align-items:center}.display-weather-image>img{display:flex;width:100px;height:100px}.display-weather-temp{font-size:3.5rem;line-height:20px;color:#fff}.weather-location{color:#f5f5f5;align-self:center;font-size:1.2rem;font-weight:700}.weather-info>h2{font-size:2rem;margin-top:.5rem;margin-bottom:0;text-align:right}.weather-info>p{text-align:end;max-width:12ch;font-size:2.5rem;margin:0;margin-top:-1rem;color:#fff}.today-conditions-widget{display:grid;grid-template-columns:50% 40%;justify-content:space-between}.today-forecast-container{display:flex;flex-direction:column;gap:1rem}.today-forecast-items{display:grid;grid-template-columns:repeat(7,1fr);gap:1rem}.today-forecast-item{background:rgba(255,255,255,.28);border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(1.6px);-webkit-backdrop-filter:blur(1.6px);border:0px solid rgba(255,255,255,1);padding:5px}.today-forecast-heading{font-size:2rem;font-weight:700;text-align:left}.air-condition-container{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.air-condition-container>h2{text-align:end;font-size:2rem;margin:0;font-weight:700}.air-condition-items{display:grid;grid-template-columns:1fr 1fr 1fr 1fr}.air-condition-item{display:flex;flex-direction:column;justify-content:flex-end;align-items:end;color:#fff}.air-condition-term>img{width:30px;height:30px}.air-condition-term>p{margin:0}.weekly-forecast-container{width:100%}.weekly-forecast-container>h2{font-size:2rem}.weekly-forecast-items{display:grid;grid-template-columns:repeat(6,minmax(100px,1fr));justify-content:space-between}.weekly-forecast-item{background:rgba(255,255,255,.28);border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(1.6px);-webkit-backdrop-filter:blur(1.6px);border:0px solid rgba(255,255,255,1);margin:1rem}.selected{background:rgba(255,255,255,.6);border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(1.6px);-webkit-backdrop-filter:blur(1.6px);border:1px solid rgba(255,255,255,1)}@media screen and (max-width: 1100px){.weather-container{position:relative;width:900px}.search-options{left:10px;width:86%}.weather-info>p{font-size:2rem;margin:0;margin-top:-1rem;color:#fff}.today-forecast-items{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}.air-condition-items{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}}@media screen and (max-width: 900px){.weather-container{position:relative;width:100%}.input-box{width:500px}.search-options{left:35px;width:520px}.display-weather{display:grid;grid-template-areas:"temp loc-w" "temp weather";grid-template-columns:50% 50%}.display-weather-image{grid-area:temp;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.display-weather-image>img{display:flex}.display-weather-temp{font-size:4rem;grid-area:temp}.weather-location{grid-area:loc-w;text-align:end}.weather-info{grid-area:weather;display:flex;flex-direction:column}.weather-info>h2{font-size:2rem;margin-top:0;margin-bottom:0;text-align:right}.weather-info>p{width:100%;text-align:end;align-self:flex-end;justify-self:end}.air-condition-container{margin-top:0}}@media screen and (max-width: 690px){.weather-container{position:relative;width:100%}.input-box{width:100%}.search-options{left:15px;width:215px}.display-weather{display:grid;grid-template-areas:"loc-w" "temp" "weather";grid-template-columns:1fr;justify-content:center;align-items:center;gap:0rem}.display-weather-image{grid-area:temp;flex-direction:row}.weather-location{grid-area:loc-w;text-align:center}.weather-info{grid-area:weather;text-align:center}.weather-info>h2{font-size:2rem;text-align:center}.weather-info>p{text-align:center;align-self:center;margin:0}.today-conditions-widget{display:flex;flex-direction:column-reverse;justify-content:center;align-items:center}.air-condition-container>h2{text-align:center;margin-top:1rem}.air-condition-items{display:grid;grid-template-columns:repeat(4,1fr)}.today-forecast-heading{text-align:center;margin-top:1rem}.weekly-forecast-items{display:grid;grid-template-columns:repeat(3,1fr);justify-content:space-between}.weekly-forecast-container>h2{margin-bottom:.5rem}}@media screen and (max-width: 350px){.weather-container>h1{font-size:1.8rem}.search-options{left:4px;top:8%;width:210px}.air-condition-items{display:grid;grid-template-columns:1fr 1fr;justify-content:center;align-items:center}.air-condition-item{display:flex;justify-content:center;align-items:center}.today-forecast-items{grid-template-columns:repeat(3,1fr)}.weekly-forecast-item{margin:.5rem}}