@import"https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap";html,body{margin:0;padding:0;box-sizing:border-box;scroll-behavior:smooth}html{font-size:62.5%;font-family:Arial,Helvetica,sans-serif}body{min-width:320px}body.lock{height:100vh;overflow:hidden;touch-action:none}body .nowrap{white-space:nowrap}.weather-app{position:relative;display:flex;flex-direction:column;align-items:center;align-self:stretch;justify-content:flex-start;background-color:#9bd1ff;color:#222;font-family:Playfair Display,serif;font-size:2rem;min-height:100vh;width:100%;padding:30px 5%;box-sizing:border-box}.weather-app *{box-sizing:border-box}.weather-app .about-btn{position:absolute;top:3px;right:3px;display:flex;justify-content:center;background-color:transparent;color:#f8f8ff;font-size:3rem;line-height:1;height:35px;width:35px;border:none;border-radius:6px}.weather-app .about-btn:hover,.weather-app .about-btn:focus{background-color:#065091}.weather-app .inner{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1rem 0;width:100%}.weather-app .inner button{background-color:#1592ff;color:#fff;font-family:inherit;font-size:1.6rem;line-height:1;margin-bottom:1rem;padding:1.2rem;max-width:200px;border:1px solid #c7e5ff;border-radius:5px}.weather-app .inner button:hover,.weather-app .inner button:focus{background-color:#065091}.weather-app h1,.weather-app h2,.weather-app h3{font-weight:400;text-align:center}.weather-app h1{font-size:3.2rem;margin:0}.weather-app h2{font-size:2.1rem;margin:1rem 0}.weather-app h3{font-size:1.8rem;margin:1rem 0}.weather-app .error{color:#c40000;font-size:1.4rem}.weather-app input{background-color:#c7e5ff;color:inherit;font-family:inherit;font-size:2rem;text-align:center;margin-bottom:1rem;padding:1.2rem;width:200px;max-width:300px;border:1px inset #c7e5ff}.weather-app input:focus{outline:2px solid #fff}.weather-app .weather{display:flex;flex-direction:column;align-items:center;gap:1rem;flex-wrap:wrap;list-style:none;margin:0;padding:0}.weather-app .day{position:relative;display:flex;flex-direction:row;justify-content:center;align-items:center;align-self:stretch;gap:1.2rem;flex-basis:calc(50% - .6rem);background-color:#b1d9fb;text-align:center;padding:1.6rem}.weather-app .day.today{flex-direction:row;justify-content:center;gap:2rem;flex-wrap:wrap;padding-bottom:3.5rem;margin-bottom:1rem;border-top-right-radius:9px;border-top-left-radius:9px}.weather-app .day.today .icon{line-height:1}.weather-app .day.today .temps,.weather-app .day.today .stacked{margin:0}.weather-app .day .icon{font-size:5.2rem}.weather-app .day .stacked span{display:block}.weather-app .day .stacked span:last-child{font-size:1.6rem}.weather-app .day .today-title,.weather-app .day #todayHourly{flex-basis:100%}.weather-app .day #todayHourly{background-color:#9bd1ff;height:16rem;margin-top:1rem;margin-bottom:0;overflow:hidden;overflow-y:scroll;scrollbar-color:#c7e5ff #6e91b0;scrollbar-gutter:stable;border:1px inset ghostwhite;border-radius:5px}.weather-app .day #todayHourly.expanded{height:unset;overflow:unset;overflow-y:unset}.weather-app .day .today-title{margin:1rem 0 0}.weather-app .day .today-hourly-data{display:flex;align-items:center;justify-content:center}.weather-app .day .today-hourly-data:has(~.current){background-color:#7dc2f0}.weather-app .day .today-hourly-data.current{background-color:#d6eefe}.weather-app .day .today-hourly-data#i23{border-bottom:3px double #80919f}.weather-app .day .today-code,.weather-app .day .today-temp,.weather-app .day .today-hour,.weather-app .day .today-ampm{align-self:center}.weather-app .day .today-code{flex-basis:4rem;font-size:2.8rem}.weather-app .day .today-temp{flex-basis:5rem;text-align:right;padding-bottom:4px}.weather-app .day .today-hour{flex-basis:9rem;text-align:right;font-size:2rem;padding:0 .5rem 4px 3rem}.weather-app .day .today-ampm{flex-basis:4rem;text-align:left;font-size:1.6rem}.weather-app .day #expandHourlyBtn{position:absolute;bottom:.25rem;right:1.6rem;margin:0;padding:0}.weather-app .day #expandHourlyBtn button{background:transparent;color:#1592ff;font-size:2.6rem;height:3rem;width:3rem;margin:0 0 2px;padding:0;border:none;transition:transform .5s;transform:rotate(90deg);cursor:pointer}.weather-app .day #expandHourlyBtn button.expanded{transform:rotate(-90deg) translateY(-3px)}.weather-app .loader{font-size:2.4rem;font-weight:700}@media screen and (min-width: 450px){.weather-app .weather .day{flex-basis:calc(33.33% - .8rem)}}@media screen and (min-width: 600px){.weather-app .weather .day{flex-basis:calc(25% - .8rem)}}@media screen and (min-width: 870px){.weather-app .weather{flex-direction:row}.weather-app .weather .day{flex-direction:column;flex-basis:12%}.weather-app .weather .day .temps{display:flex;flex-direction:column-reverse}.weather-app .weather .day .dash{transform:rotate(90deg) skewY(65deg) translate(3px,-7px);display:flex;align-items:center;justify-content:center}}#alertOverlay{position:fixed;top:0;left:0;background-color:#000000a6;width:100%;height:100vh;z-index:1000;transition:all .5s}#alertOverlay #alertContent{position:fixed;top:50%;left:50%;background-color:#ccc;font-size:1.6rem;padding:32px 40px;min-width:200px;transform:translate(-50%,-50%);border-radius:9px;box-shadow:2px 2px 4px #222;transition:all .5s}#alertOverlay .alertClose{position:absolute;top:0;right:0;background:none;margin:0;padding:0;width:35px;height:35px;border:none;transition:all .2s;cursor:pointer}#alertOverlay .alertClose:focus{background-color:#bbb}