@import"https://fonts.googleapis.com/css2?family=Roboto&display=swap";*{margin:0;padding:0;box-sizing:border-box;font-family:Roboto,sans-serif;letter-spacing:.04em}.background{background:linear-gradient(to bottom,#ff7e5f,#feb47b,#fff3e3);background-attachment:fixed;background-size:cover;background-position:center;background-color:#fff3e3;width:100%;height:100dvh;padding:15px}.background .box{width:767px;height:100%;border-radius:4px;border:2px solid #fff;margin:0 auto;overflow-y:auto;box-shadow:0 0 20px #0000001a;padding:15px;background-color:#fff}@media (max-width: 768px){.background .box{width:100%}}.background .box::-webkit-scrollbar{width:6px;height:6px}.background .box::-webkit-scrollbar-thumb{background-color:#ff7e5f;border-radius:4px}.background .box::-webkit-scrollbar-thumb:hover{background-color:#ff7e5f}.background .box::-webkit-scrollbar-track{background-color:#ececec}.background .box::-webkit-scrollbar-track:hover{background-color:#d4d4d4}.box form{width:100%;margin-top:15px;background-color:#ffedd5;border-radius:4px;height:32px;display:flex;align-items:center}.box form label{height:100%;margin-left:15px;display:flex;justify-content:center;align-items:center;color:#ff7e5f}.box form .city-input{width:100%;height:100%;outline:none;border:none;text-indent:15px;background-color:#fff;color:#333}.box form button{height:100%;border-top-right-radius:4px;border-bottom-right-radius:4px;border:none;outline:none;background-color:#ff7e5f;color:#fff;width:75px;cursor:pointer}.box .current-weather-details-box{width:100%;margin-top:15px;display:flex;flex-direction:column;background-color:#fff5eb;border-radius:4px;padding:15px}.current-weather-details-box .details-box-header{width:100%;display:flex;justify-content:space-between;align-items:center}.details-box-header h4{color:#6e6e6e}.details-box-header .switch{width:80px;height:32px;background-color:#ff7e5f;display:flex;align-items:center;cursor:pointer;padding:4px;border-radius:4px;position:relative}.switch .switch-toggle{width:50%;height:100%;background-color:#fff;border-radius:4px;transition:all .3s}.switch span{position:absolute;top:7px;color:#fff}.switch span.c{left:8px}.switch span.f{right:8px}.switch-toggle.c{transform:translate(0)}.switch-toggle.f{transform:translate(100%)}.loader{margin-top:15px;display:flex;justify-content:center;align-items:center;padding:15px}.error-msg{width:100%;background-color:#ffe0e0;font-size:12px;color:#c82333;border-color:#f5c6cb;padding:.75rem 1.25rem;margin-top:1rem;border:1px solid transparent;border-radius:.25rem}.current-weather-details-box .weather-details-container{width:100%;margin-top:15px;padding:15px;display:flex}.weather-details-container .details,.weather-details-container .metrices{flex:1}.weather-details-container .details{border-right:1px solid #ff7e5f}.weather-details-container .metrices{padding-left:15px}@media (max-width: 768px){.current-weather-details-box .weather-details-container{flex-direction:column}.weather-details-container .details,.weather-details-container .metrices{width:100%}.weather-details-container .details{border-right:none;border-bottom:1px solid #ff7e5f;padding-bottom:15px}.weather-details-container .metrices{padding-left:0;padding-top:15px}}.weather-details-container .details .city-name{color:#ff7e5f}.weather-details-container .details .icon-and-temp{display:flex;align-items:center}.icon-and-temp h1{color:#ff7e5f;font-size:56px}.weather-details-container .details .description{color:#6e6e6e}.weather-details-container .metrices h4{color:#ff7e5f;margin-left:4px;margin-bottom:25px}.weather-details-container .metrices .key-value-box{width:100%;display:flex;margin-top:15px}.key-value-box .key,.key-value-box .value{flex:1}.key .icon{color:#6e6e6e}.key .value{color:#ff7e5f}.key span{color:#6e6e6e;margin-left:15px}.value span{color:#ff7e5f}.extended-forecast-heading{color:#6e6e6e;margin-top:25px}.extended-forecasts-container{margin-top:15px;display:flex}.extended-forecasts-container .forecast-box{width:calc(20% - 10px);height:120px;border-radius:4px;background-color:#ff7e5f;color:#fff;margin-right:10px;padding:10px;display:flex;flex-direction:column;justify-content:center;align-items:center}@media (max-width: 768px){.extended-forecasts-container{flex-direction:column}.extended-forecasts-container .forecast-box{width:100%;margin-right:0;margin-bottom:10px}}.forecast-box .min-max-temp{margin-top:5px;font-weight:500}