@import url(https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);.text-center,h1{text-align:center}.alert p,.weather-content,h1{color:#fff}*{margin:0;padding:0}body{font-family:Poppins,sans-serif;background:linear-gradient(to bottom,#57c1eb 0,#246fa8 100%) no-repeat;height:100%;min-height:100vh;display:flex;background-size:cover}.alert{background-color:#f3876d;border-radius:10px;padding:20px}.alert p svg{margin-right:4px;top:2px;position:relative}.container{margin:50px auto;max-width:500px}.input-box,h1{margin-bottom:20px}.align-items-center{align-items:center!important}.d-flex{display:flex!important}.justify-content-between{justify-content:space-between!important}.w-100{width:100%}.d-block{display:block}.input-box{position:relative;height:76px;background:#fff;border-radius:8px;box-shadow:0 5px 10px rgba(0,0,0,.1)}.uil-search{display:inline-block;width:24px;height:24px;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6"><path fill-rule="evenodd" d="M10.5 3.75a6.75 6.75 0 1 0 0 13.5 6.75 6.75 0 0 0 0-13.5ZM2.25 10.5a8.25 8.25 0 1 1 14.59 5.28l4.69 4.69a.75.75 0 1 1-1.06 1.06l-4.69-4.69A8.25 8.25 0 0 1 2.25 10.5Z" clip-rule="evenodd" /></svg>');background-size:cover;background-repeat:no-repeat}.input-box .button,.input-box i{position:absolute;top:50%;transform:translateY(-50%)}.input-box i{left:20px;font-size:30px;color:#707070}.input-box input{height:100%;outline:0;font-size:18px;font-weight:400;border:none;padding:0 155px 0 65px;background-color:transparent}.input-box .button{right:20px;font-size:16px;font-weight:500;color:#fff;border:none;padding:12px 30px;border-radius:6px;background-color:#2e9cf3;cursor:pointer}.input-box .button:active{transform:translateY(-50%) scale(.98)}@media screen and (max-width:500px){.input-box{height:66px;margin:0 8px}.box{margin:20px 8px 0}.input-box i{left:12px;font-size:25px}.input-box input{padding:0 112px 0 50px}.input-box .button{right:12px;font-size:14px;padding:8px 18px}.box div.box-blue{display:block!important;text-align:center}.weather-icon{margin-right:0!important}}@media screen and (max-width:400px){.t{display:block!important}.t div{margin-bottom:20px}.t div:last-child{margin-bottom:0}}.box,.element{display:none}.weather-icon{margin-right:50px}.weather-icon svg{width:120px;height:120px}.white{fill:#FFFFFF}.gray{fill:#E0E0E0}.yellow{fill:#FFEB3B}.weather-content{margin:0;padding:0}.date-box .date,.humidity,.t span,.time-box .time{color:#555f6b}.box,.box-blue,.t{padding:20px;border-radius:20px}.weather-content .temp{font-size:30px;font-weight:800}.box{background-color:#ecf0f3}.date-box svg,.time-box svg{width:18px;height:18px;fill:#555F6B;margin-right:4px}.box-blue{background-color:#2e9cf3;margin:20px 0}.t{background-color:#f8f8f8}.t svg{fill:#CAD1D9;width:24px;height:24px}.t span{font-weight:500;font-size:14px}.humidity{font-weight:700;font-size:16px}