*{margin:0;padding:0;--background-blue: #87b1e4;--transparent-black: #FFFFFF08;--track: #c2d5ed}body{font-family:Poppins,sans-serif!important;text-align:center;overflow:hidden;height:100vh;background:linear-gradient(200deg,rgb(255,255,255) 0%,#c9c9c9 100%);color:"black";font-weight:100}.mainGrid{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center}.searchBox{width:200px;margin-inline:10px;background:transparent;border:none;color:#fff;box-shadow:none;font-family:Poppins,sans-serif;font-size:1.1rem;transition:height 2s}.searchButton{font-size:1em;color:#ffffff90;background:transparent;border:none;transition:.5s}.searchButton:hover{color:#fff;transition:.5s}.searchBoxIconAndInput{display:flex;align-items:center}.searchBox::placeholder{color:#ffffff90}.searchForm{display:flex;justify-content:center;align-items:center;width:100%;font-size:1.1rem}.searchContainer{overflow:auto;color:#fff;background-color:linear-gradient(45deg,#87b1e4,#bed2eb);padding:15px;border-radius:15px;width:500px;height:75px;transition:1s width,1s height,margin .5s,border-radius .5s;animation:fade-in 2s;margin-top:30px}.searchContainer.show{height:80vh;width:80vh}.searchBoxInput{display:flex;align-items:center;justify-content:space-around;width:100%}.weatherInfo{display:flex;flex-direction:column;align-items:center;color:#fff;margin-block:30px;animation:fade-in 5s}.fade-in{animation-name:fade-in;animation-duration:5s}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.weatherInfo .temperatureText{font-size:3em}.weatherInfo .icon{width:4em;height:100%}.weatherInfo .feelsLikeText{font-size:.8em}.futureWeatherContainer{display:flex;flex-direction:column}.futureWeatherStack{display:flex;overflow-y:auto}.weatherChipStack{border-radius:15px;padding:20px;margin:10px;background-color:var(--transparent-black)}.chipImage{min-width:50px}.extraWeatherInfo{display:flex;align-content:center;justify-content:center;flex-wrap:wrap;margin-top:30px;animation:fade-in 5s}.extraInfoInfo{font-weight:700}.extraWeatherGroup{background-color:var(--transparent-black);border-radius:15px;margin:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:10px;width:40%}.noDataBanner{display:flex;flex-direction:column;align-items:center;animation:fade-in 5s}.noDataBanner img{height:500px;width:500px}.noDataBanner p{font-size:1.3em}.chartDiv{margin-top:30px;display:flex;flex-direction:column;align-items:center}.chartDiv p{margin-bottom:30px}.input:focus,.input:active,.button.is-focused:not(:active),.button:focus:not(:active){border:none;color:#fff;box-shadow:0 0}::-webkit-scrollbar{width:1px;height:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff50;border-radius:15px}::-webkit-scrollbar-thumb:hover{background:#ffffff10}@media only screen and (max-width: 768px){.searchContainer{width:100vw;margin:0;border-radius:0;transition:1s width,1s height,margin .5s,border-radius .5s}.searchContainer.show{height:100vh;width:100%;margin:0;border-radius:0;transition:2s width,2s height}}
