*,*:before,:after{box-sizing:border-box}body{margin:0;padding:0;font-family:Roboto,sans-serif;color:#ffffffe6}body.weather-clear{background:linear-gradient(to right,#253c56,#314a77,#3b71ce)}body.weather-clouds{background:linear-gradient(to right,#4a5968,#75868a,#abb8c4)}body.weather-rain{background:linear-gradient(to right,#3a6073,#17232b)}body.weather-thunder{background:linear-gradient(to right,#222425,#404244)}body.weather-mist{background:linear-gradient(to right,#757f99,#d8dee9)}h1,h2,h3{margin:0}.App{max-width:700px;margin:25px auto;padding:16px}.App footer{font-size:.8rem;line-height:1rem;text-align:center;margin:15px;color:#fffc}.App footer>a{text-decoration:none;color:#ffffffe6;font-weight:500}.App footer>a:hover{color:#fff;text-decoration:underline}@media (min-width: 46.875em){.App footer{font-size:.9rem}}.Weather{width:100%;margin:0 auto;padding:12px;background:#ffffff1f;box-shadow:0 10px 25px #00000026;backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border:1px solid hsla(0,0%,100%,.1);border-radius:16px}.Weather .search-city{display:flex;gap:8px;align-items:center;width:100%;max-width:500px;margin:0 auto}.Weather input{font-family:Roboto,sans-serif;flex:1;border-radius:12px;padding:10px 14px;font-weight:500;font-size:.8rem;background-color:#ffffff26;border:1px solid hsla(0,0%,100%,.3);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 6px #00000026;outline:none}.Weather input::placeholder{color:#fffc}.Weather input:focus{background-color:#ffffff40;outline:none;border:1px solid hsla(0,0%,100%,.6)}.Weather .spinner{display:flex;justify-content:center;align-items:center;height:200px}.Weather button{font-family:Roboto,sans-serif;white-space:nowrap;padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:500;font-size:.8rem;color:#fff;border:1px solid hsla(0,0%,100%,.3);background-color:#ffffff26;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 2px 6px #00000026;transition:background-color .2s ease}.Weather button:hover{background-color:#ffffff40}.Weather .current-weather-info{display:flex;justify-content:space-between;align-items:center;margin-top:16px}.Weather .city-name{font-size:1.8rem}.Weather .current-date{font-size:1rem}.Weather .current-temperature{font-size:2.8rem;margin:16px 0}.Weather .temperature-unit{font-size:1.1rem;position:relative;top:-20px;margin-left:5px}.Weather .temperature-unit .unit-button{all:unset;color:inherit;font:inherit;text-decoration:none;cursor:pointer;background:none}.Weather .temperature-unit .unit-button.active{font-weight:700;text-decoration:none;cursor:default}.Weather .temperature-unit .unit-button:disabled{pointer-events:none;color:#ffffffb3}.Weather .temperature-unit .unit-button:hover{text-decoration:underline}.Weather .current-weather-icon{display:flex;flex-direction:column;justify-content:center;align-items:center}.Weather .current-weather-icon>img{width:70px;height:70px}.Weather .icon-description{margin-top:3px;font-size:.9rem}.Weather .weather-details{margin:8px}@media (min-width: 25.875em) and (max-width: 40.825em){.Weather{padding:22px}.Weather .current-weather-icon>img{width:80px;height:80px}}@media (min-width: 40.625em){.Weather{padding:30px}.Weather input,.Weather button{padding:14px 18px;font-size:.9rem}.Weather .city-name{font-size:2.3rem}.Weather .current-date{font-size:1.1rem}.Weather .current-temperature{font-size:3.3rem;margin-top:20px}.Weather .temperature-unit{font-size:1.2rem}.Weather .weather-details{font-size:1.1rem}.Weather .current-weather-icon>img{width:100px;height:100px}.Weather .icon-description{font-size:1rem}}.forecast{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.2);margin-top:20px;padding-top:25px}.forecast .day-forecast{display:flex;flex-direction:column;justify-content:center;align-items:center}.forecast .day-forecast>h3{font-size:1.06rem}.forecast .day-forecast>img{width:55px}.forecast .max-min-temperature .max-temp{margin-right:4px;color:#fff;font-size:.875rem}.forecast .max-min-temperature .min-temp{color:#ffffffb3;font-size:.875rem}@media (min-width: 25.875em) and (max-width: 40.825em){.forecast .day-forecast>h3{font-size:1.125rem}.forecast .day-forecast>img{width:65px}.forecast .max-min-temperature .max-temp{margin-right:5px;font-size:1.1rem}.forecast .max-min-temperature .min-temp{font-size:1.1rem}}@media (min-width: 40.625em){.forecast .day-forecast>h3{font-size:1.1875rem}.forecast .day-forecast>img{width:70px}.forecast .max-min-temperature .max-temp{margin-right:7px;font-size:1.1rem}.forecast .max-min-temperature .min-temp{font-size:1.1rem}}