@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap";*{box-sizing:border-box}body{background:#f9f7fe;margin:0;font-family:Roboto,sans-serif}a{color:#885df1}#root{justify-content:center;align-items:flex-start;min-height:100svh;display:flex}.weather-app{text-align:left;background:#fff;border-radius:10px;width:100%;max-width:600px;margin:60px auto;padding:30px;box-shadow:0 30px 50px #41326414}header{border-bottom:1px solid #f9f7fe;padding-bottom:30px}.search-form{display:flex}.search-input{color:#27214266;background-color:#f9f7fe;border:none;border-radius:6px;width:65%;padding:20px;font-size:16px}.search-button{color:#fff;cursor:pointer;background-color:#885df1;border:none;border-radius:5px;margin-left:5px;padding:20px;font-size:16px;line-height:1}.geo-button{color:#885df1;cursor:pointer;background-color:#f9f7fe;border:none;border-radius:5px;margin-left:5px;padding:20px 16px;font-size:18px;line-height:1}.geo-button:hover,.search-button:hover{filter:brightness(.96)}.quick-cities{flex-wrap:wrap;gap:8px;margin-top:14px;display:flex}.quick-cities button{color:#885df1;cursor:pointer;background:#f9f7fe;border:1px solid #eee3ff;border-radius:999px;padding:6px 14px;font-size:13px}.quick-cities button:hover{background:#eee3ff}main{padding:30px 0}.status-message{color:#27214280;min-height:20px;margin:0 0 10px;font-size:14px}.status-message.error{color:#f65282}.current-weather{justify-content:space-between;display:flex}.current-city{margin:0;font-size:38px;font-weight:900}.current-details{color:#27214266;font-size:16px;font-weight:400;line-height:24px}.current-details strong{color:#f65282}.current-temperature{white-space:nowrap;font-size:48px}.current-temperature-icon{vertical-align:middle;margin-right:10px;position:relative;top:-8px}.current-temperature-value{font-size:80px;font-weight:700}.current-temperature-unit{font-size:28px;position:relative;top:-38px}.forecast{border-top:1px solid #f9f7fe;justify-content:space-between;gap:8px;margin-top:26px;padding-top:22px;display:flex}.forecast-day{flex-direction:column;flex:1;align-items:center;gap:6px;display:flex}.forecast-day-name{text-transform:uppercase;color:#27214280;font-size:13px;font-weight:700}.forecast-temps{font-size:14px}.forecast-min{color:#27214266}footer{text-align:center;color:#27214266;border-top:1px solid #f9f7fe;margin-top:15px;padding-top:15px}@media (width<=640px){.weather-app{margin:24px 16px}.current-weather{flex-direction:column;gap:16px}.forecast{flex-wrap:wrap}.forecast-day{flex:30%}}
