:root{--MilkyBackground: rgba(255, 255, 255, .6);--MilkyBackgroundHover: rgba(235, 235, 235, .6);--BoxShadowValues:0px 0px 5px var(--MilkyBackground);--OpagueMilkyBackground:rgb(215, 222, 224);--LightGreyBorder:rgb(161, 160, 160);--DarkBackground:rgba(110, 106, 106, .6);--DarkBackgroundHover:rgba(80, 77, 77, .6);--DarkBoxShadowValues:0px 0px 5px var(--DarkBackground);--OpagueDarkBackground:rgb(110,106,106);--DarkGreyBorder:rgb(34, 33, 33);color-scheme:light dark}*{box-sizing:border-box;margin:0;font-family:helvetica}.Background{border-radius:20px;box-shadow:var(--BoxShadowValues);background:var(--MilkyBackground)}.DarkBackground{border-radius:20px;box-shadow:var(--DarkBoxShadowValues);background:var(--DarkBackground);color:#fff}.ButtonParentDiv{width:100%;display:flex;justify-content:space-evenly}.hidden{display:none}.noPrevCityComp{grid-column:1/-1;grid-row:2/-1;align-self:center;display:flex;flex-flow:column wrap;text-align:center}.noPrevCityComp div{display:flex;margin:auto}.noPrevCityComp h3{margin:3%}.rootDiv{min-height:100vh;display:grid;grid-template:repeat(4,auto) 1fr / 100vw;gap:5px;overflow-x:hidden;justify-items:center;min-width:320px}.darkmode{background:linear-gradient(200deg,#313131,#454646)}.lightmode{background:linear-gradient(200deg,#add8e6,#85b0b4)}@media screen and (min-width:900px){.rootDiv{grid-template:repeat(3,auto) 1fr/ 50vw 50vw}}.DailyForecastTile{display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;border:.1px solid var(--LightGreyBorder);border-radius:20px;padding:10px 0;width:250px;height:250px;margin:auto 10px;box-shadow:var(--BoxShadowValues);color:#000}.DailyForecastTile:hover{background:#ffffff80}.DailyForecastInner{padding:5px;width:200px;display:grid;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr}.DailyForecastInner svg{margin:5px}.DailyForecastInner div{display:flex;align-items:center}.MainForecastDiv{border-radius:0;height:100%;width:222px;overflow-y:auto;display:flex;-ms-overflow-style:none;scrollbar-width:none;box-shadow:none}@container containerQuery (width>=544px){.MainForecastDiv{width:440px}}@container containerQuery (width>=764px){.MainForecastDiv{width:660px}}.MainForecastDiv::-webkit-scrollbar{display:none}.MainForecastParentDiv{display:flex;border-radius:20px;box-shadow:var(--BoxShadowValues)}.MainForecastParentDiv button{border:none;box-shadow:none}.MainForecastParentDiv button.DarkBackground svg path{fill:#d3d3d3}.MainForecastParentDiv .left{border-radius:20px 0 0 20px}.MainForecastParentDiv .right{border-radius:0 20px 20px 0}.MainForecastHeading{padding:10px;margin:5px auto;display:flex;flex-flow:column wrap;align-items:center;grid-row:1/2;grid-column:1/-1}.containerQuery{display:flex;justify-content:center;margin-top:auto;margin-bottom:auto;width:100%;height:300px;container:containerQuery / inline-size}.extendedForecastParentDiv{width:95%;padding:5px;grid-column:1/-1}.extendedForecastParentDiv h3{width:100%;text-align:center;margin:auto;grid-column:1/3}.graphCanvasDiv{width:90%;margin:3% auto;padding:10px}.graphCanvasDiv:hover{background:#ffffff80}.canvasEl{object-fit:contain}@media screen and (max-width:755px){.extendedForecastParentDiv{flex-flow:column wrap}.graphCanvasDiv{width:95%}}.locationModal{border-radius:20px;box-shadow:var(--BoxShadowValues);border:none;margin-left:auto;margin-right:auto;overflow:hidden;grid-row:2/3}.locationModal.DarkBackground{background:var(--OpagueDarkBackground)}.locationModal[open]{display:flex;flex-flow:column nowrap;min-height:150px;animation:modalMove 1s linear(0,.0018,.0069 1.16%,.0262 2.32%,.0642,.1143 5.23%,.2244 7.84%,.5881 15.68%,.6933,.7839,.8591,.9191 26.13%,.9693,1.0044 31.93%,1.0234,1.0358 36.58%,1.0434 39.19%,1.046 42.39%,1.0446 44.71%,1.0404 47.61%,1.0118 61.84%,1.0028 69.39%,.9981 80.42%,.9991 99.87%) forwards}@keyframes modalMove{0%{margin-top:100vh}to{margin-top:5vh}}.locationModal::backdrop{background:#00000080}.locationModal .close{text-align:right;border:none;background:none}.locationModal .close svg:hover{fill:#dc143c}.locationModal label{padding:0 5px 5px;font-size:small;text-align:left;display:none}.locationModal input:invalid{border:1px solid crimson}.locationModal input:invalid+label{display:block;color:#dc143c}.locationModalError{margin:1px;text-align:center;border:.25px solid grey;padding:5px}.CityList{background:var(--MilkyBackground);margin:5px auto;overflow:auto;color:#000}.city{border:.25px solid grey;padding:5px;margin:1px;height:20%;min-height:50px}.city:hover{background-color:var(--MilkyBackgroundHover)}.cityInfo{margin-top:5%;font-size:.7rem;color:gray}.loadingSpinner{animation:rotate 1.5s linear infinite;overflow:hidden}.loadingDiv{display:flex;justify-content:center;align-items:center;flex-direction:row;overflow:hidden;margin:5px}.loadingWord{margin-right:5%}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.Button{padding:.5em 1em;border:none;margin:10px;font-weight:600;display:flex}.Button:hover{background:var(--MilkyBackgroundHover)}.Button.DarkBackground:hover{background:var(--DarkBackgroundHover)}.Button svg{height:1.2em;width:1.2em;padding-right:.5em}.unitSelection{display:flex;flex-direction:column;justify-content:space-evenly;padding:2%;width:95%}@media screen and (min-width:900px){.unitSelection{justify-self:start}}.OuterDD{border:.5px solid rgb(161,160,160);display:flex;flex-direction:column}.InnerDD:not(.hidden){display:flex;flex-direction:column;position:relative}.InnerDD:not(.hidden)>:first-child{border-top:.5px solid var(--LightGreyBorder);border-radius:0}.InnerDD:not(.hidden)>:last-child{border-radius:0 0 20px 20px;border-bottom:none}.InnerDD:not(.hidden) button{margin:0;border-radius:0;border-bottom:.5px solid var(--LightGreyBorder)}.outerToggle{display:block;border:1px solid rgb(161,160,160);width:50px;height:25px;background:#a8a8a8;box-shadow:inset 5px 0 8px #8d8c8c,inset -5px 0 8px #8d8c8c;border-radius:5px;z-index:1;margin:10px}.toggleLabel{display:block;background:var(--OpagueMilkyBackground);width:50%;height:100%;border-radius:5px;transition:transform .3s ease-in-out,box-shadow .3s ease-in-out;z-index:3}.toggleLabel svg{margin:0 20%}input:checked+.toggleLabel{box-shadow:0 0 5px #ff4500;transform:translate(100%)}input:checked+.toggleLabel svg path{stroke:#ff4500}