*{box-sizing:border-box;margin:0;padding:0}.container{background-image:url(/assets/sunflower-DSdiz0AO.jpg);padding:20px 70px;color:#fff;background-repeat:no-repeat;background-size:cover;overflow:hidden;height:100vh;font-family:Poppins,sans-serif}.clear{background-image:url(/assets/clear-C0iuqWI_.jpg)}.cloudy{background-image:url(/assets/cloudy-CEnKNGnh.jpg)}.rainy{background-image:url(/assets/rainy-DPOXz3EP.jpg)}.stormy{background-image:url(/assets/stormy-DJc6ZFbz.jpg)}.snowy{background-image:url(/assets/snowy-CvSQUBeG.jpg);color:#000}.haze{background-image:url(/assets/haze-XEbkbkvP.jpg);color:#000}.mist{background-image:url(/assets/mist-DB6EEe8k.jpg);color:#000}.dtbtn{background-color:#18181b99;color:#fff;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;width:150px;height:30px;border-radius:10px;border:none}.current-info{display:flex;justify-content:space-between;flex-wrap:wrap}.date-container{font-weight:100}.date-container .time{font-size:70px}.date-container #am-pm{font-size:30px;margin-left:20px}.date-container .date{font-size:30px}.place-container{text-align:end}.place-container .time-zone{font-size:30px;font-weight:100}.place-container .country{font-size:12px;font-weight:700}.current-info .others{display:flex;flex-direction:column;background:#18181b99;padding:20px;border-radius:10px;margin:10px 0;border:1px solid #eee}.current-info .others .weather-item{display:flex;justify-content:space-between}.future-forecast{background:#18181bcc;padding:25px;position:fixed;bottom:0;left:0;display:flex;color:#fff;width:100%;align-items:center;justify-content:center;overflow-y:hidden}.future-forecast .today{border:1px solid #eee;border-radius:10px;padding:15px;background:#0003}.c{display:flex;align-items:center;justify-content:center;padding-right:40px;border-radius:10px}.future-forecast .today .day{padding:5px 15px;background:#3c3c44;border-radius:50px;text-align:center}.future-forecast .today .temp{font-size:18px;padding-top:15px}.future-forecast .weather-forecast{display:flex}.weather-forecast .weather-forecast-item{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 10px;border:1px solid #eee;padding:15px;border-radius:10px;background:#0003;max-width:8.5rem}.weather-forecast .weather-forecast-item .day{padding:5px 15px;background:#3c3c44;border-radius:50px;text-align:center}.weather-forecast .weather-forecast-item .temp{font-weight:100;font-size:12px}button#search-button{border:none;padding-top:.5rem;background:transparent}input#location-input{width:300px;height:45px;border-radius:25px;padding:.7rem}.container-input{display:flex;gap:1%;align-items:center}.popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.popup-content{background-color:#fff;padding:20px;border-radius:5px;box-shadow:0 0 10px #00000080;color:#000}.btn{display:flex;justify-content:center}.dt{text-align:end;position:fixed;bottom:28%;width:90vw}.popup button{margin-top:10px;padding:5px 10px;background-color:gray;color:#fff;border:none;border-radius:3px;cursor:pointer}button.mybtn:focus{background-color:#000}@media screen and (max-width: 450px) and (min-width: 100px){.git{float:right;top:50vh}}@media only screen and (max-width: 750px){.other{gap:.25rem}.container{padding:20px}p{font-size:12px}input#location-input{width:300px;height:40px;border-radius:25px}.dt{text-align:end;position:fixed;bottom:33%;width:90vw}.future-forecast{justify-content:start;align-items:none;overflow-y:scroll}.future-forecast .today .temp{font-size:16px}.date-container .time{font-size:50px}.date-container #am-pm,.date-container .date{font-size:20px}.place-container{text-align:end;margin-top:15px}.place-container .time-zone{font-size:20px}.current-info .others{padding:12px}.current-info .others .weather-item{font-size:14px}}@media only screen and (max-width: 1400px) and (min-width: 750px){.future-forecast{justify-content:start;align-items:none;overflow-x:scroll}}.weather-icons{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1rem}.w-icon{width:50px;height:50px;object-fit:contain}.weather-forecast-item{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 10px;border:1px solid #eee;border-radius:10px;padding:15px;background:#0003}.weather-forecast-item .temp{font-weight:100;font-size:12px}.weather-forecast-item .day{padding:5px 15px;background:#3c3c3c;border-radius:50px;text-align:center;margin-bottom:8px}.w-icon:hover{transform:scale(1.1);transition:transform .2s ease-in-out}.T{display:flex;flex-direction:column;gap:2.25rem;margin:1rem}.wt{display:flex;justify-content:center;align-items:center}.weather-icons-today{display:flex;margin:.5rem 1.5rem 0;justify-content:center;align-items:center;flex-direction:column}.other{display:flex;flex-direction:column;gap:.5rem}.git{float:right}