*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif}#root{min-height:100vh}.weatherApp{background-position:50%;background-size:cover;background-attachment:fixed;min-height:100vh;padding:1px 20px 50px;transition:background-image .5s;position:relative}.weatherApp:before{content:"";z-index:0;background:#0003;position:absolute;inset:0}.weatherApp>*{z-index:1;position:relative}.weatherApp.hot{background-image:url(https://images.unsplash.com/photo-1525490829609-d166ddb58678?q=80&w=869&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)}.weatherApp.cold{background-image:url(https://plus.unsplash.com/premium_photo-1670430004754-60d86c50fb81?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)}.weatherApp.rain{background-image:url(https://plus.unsplash.com/premium_photo-1671229652411-4468b946b787?q=80&w=387&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D)}.weatherApp h2{text-align:center;color:#fff;text-shadow:0 3px 8px #0006;margin:0;padding:35px 15px 25px;font-size:32px;font-weight:700}@media (width<=600px){.weatherApp{padding-left:12px;padding-right:12px}.weatherApp h2{padding-top:25px;font-size:26px}}.SearchBox{justify-content:center;width:100%;margin-bottom:35px;display:flex}.SearchBox form{flex-wrap:wrap;justify-content:center;align-items:center;gap:15px;display:flex}.SearchBox .MuiTextField-root{background:#fff;border-radius:8px;width:300px}.SearchBox .MuiButton-root{text-transform:none;border-radius:8px;height:56px;padding:0 28px;font-size:16px;font-weight:600;transition:all .3s;box-shadow:0 5px 12px #1976d240}.SearchBox .MuiButton-root:hover{transform:translateY(-2px);box-shadow:0 8px 18px #1976d259}.SearchBox p{width:100%;margin:5px 0 0;font-size:14px;font-weight:600}.InfoBox{text-align:center;padding:10px 20px 40px}.cardContainer{justify-content:center;align-items:center;display:flex}.cardContainer .MuiCard-root{background:#fff;border-radius:18px;width:100%;transition:all .3s;overflow:hidden;box-shadow:0 12px 35px #00000026;max-width:420px!important}.cardContainer .MuiCard-root:hover{transform:translateY(-6px);box-shadow:0 18px 45px #0003}.cardContainer .MuiCardMedia-root{transition:transform .4s;height:190px!important}.cardContainer .MuiCard-root:hover .MuiCardMedia-root{transform:scale(1.03)}.cardContainer .MuiCardContent-root{padding:25px}.cardContainer h5{color:#173b63;justify-content:center;align-items:center;gap:8px;margin-bottom:18px;font-size:26px;font-weight:700;display:flex}.cardContainer h5 svg{font-size:30px}.cardContainer p{color:#4b5563;margin:10px 0;font-size:15px;line-height:1.6}.cardContainer p:first-child{color:#1565c0;font-size:20px;font-weight:700}.cardContainer p:last-child{border-top:1px solid #e5e7eb;margin-top:18px;padding-top:15px;font-size:14px}.cardContainer i{color:#1565c0;font-weight:600}@media (width<=600px){.SearchBox{padding:0 15px}.SearchBox form{gap:12px;width:100%}.SearchBox .MuiTextField-root,.SearchBox .MuiButton-root{width:100%}.InfoBox{padding:10px 15px 30px}.cardContainer .MuiCard-root{max-width:100%!important}.cardContainer .MuiCardMedia-root{height:170px!important}.cardContainer h5{font-size:23px}}