*{margin:0;padding:0;box-sizing:border-box}#root{width:100vw;height:100vh}.container{position:relative;width:100%;height:100%;overflow:hidden}.materialcontainer{width:100%;height:100%;text-align:center;display:flex;flex-direction:column;position:absolute;top:0;left:0}.nav{width:100%;display:flex;flex-wrap:wrap;padding:16px;position:sticky;bottom:1;z-index:80;align-items:center;justify-content:space-between}.heading{color:#fff}.src{position:relative}.inputbox{outline:none;border:none;width:250px;padding:8px 8px 8px 30px;border-radius:10px;font-size:18px}.icon{width:22px;height:22px;position:absolute;top:18%;left:2%}.minicontainer{padding:10px;width:100vw;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-evenly;margin-top:10px}.image{width:100%;height:100%;position:absolute;top:0;left:0;object-fit:cover;z-index:-100}img{width:100%;height:100%;overflow:hidden}.maincard{padding:16px;width:300px;backdrop-filter:blur(6px) saturate(189%);-webkit-backdrop-filter:blur(6px) saturate(189%);background-color:#57595a72;border-radius:12px;border:1px solid rgba(255,255,255,.125);z-index:70}.mainInfo{min-width:280px;display:flex;align-items:center;justify-content:space-around}.weathericon{width:100px;height:100px}.weathericon img{width:100%;height:100%;object-fit:contain}.tempHead{color:#fff;font-size:1rem}.cityName{color:#fff;margin-block:20px;text-align:center}.time{text-align:center;display:flex;align-items:center;justify-content:space-evenly;font-size:1rem;color:#fff}.windspeed,.Humidity{display:flex;align-items:center}.windheading,.humidityheading{color:#fff;margin-right:20px;padding-block:2px;font-weight:500;font-size:1rem}.windheading,.humidityheading,p{text-align:center;color:#fff}.humidityValue{margin-left:20px}.HR{margin-block:14px}.weathercondition{text-align:center;color:#fff;margin-bottom:10px}.hour{min-width:500px;max-width:600px;height:auto;padding:15px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:15px;z-index:60}.hourhead{color:#fff;font-weight:100}.hourcard{padding-block:10px;padding-inline:30px;text-align:center;backdrop-filter:blur(6px) saturate(189%);-webkit-backdrop-filter:blur(6px) saturate(189%);background-color:#57595a72;border-radius:12px;border:2px solid rgba(0,0,0,.125);z-index:70}.hourtemp{margin-block:10px}.weatherhouricon{width:50px;height:50px}.weatherhouricon img{width:100%;height:100%;object-fit:fill}.hourtemp{font-size:1rem}@media only screen and (max-width: 767px){.maincard{margin-top:50px;min-width:300px;max-width:400px}.nav{font-size:25px;gap:20px;text-align:center;justify-content:center}.maincard{padding:16px;width:100%}.image{object-fit:contain}img{height:100%}.hour::-webkit-scrollbar{width:0}.hour{margin-top:30px;min-width:110px;justify-content:start;flex-wrap:nowrap;overflow-x:auto;align-items:initial}.image{width:100vw;height:100vh}}