:root{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box;padding:0;margin:0}body{min-width:350px;min-height:100vh;font-family:Helvetica,Arial,sans-serif;font-size:16px;line-height:1.3;font-weight:400;color:#f8f8f8;background:#212121;overflow-x:hidden}#root{max-width:1280px;margin:0 auto;padding:2rem 1rem;text-align:center}.city-search{--glass-box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 1.8px 3px 0px -2px rgba(255,255,255,.6), inset -2px -2px 0px -2px rgba(255,255,255,.5), inset -3px -8px 1px -6px rgba(255,255,255,.3), inset -.3px -1px 4px 0px rgba(0,0,0,.12), inset -1.5px 2.5px 0px -2px rgba(0,0,0,.2), inset 0px 3px 4px -2px rgba(0,0,0,.2), inset 2px -6.5px 1px -4px rgba(0,0,0,.1), 0px 1px 5px 0px rgba(0,0,0,.1), 0px 6px 16px 0px rgba(0,0,0,.08);position:relative;width:70%;min-width:230px;font-size:1rem;line-height:1;color:#fff;padding:.75rem 1.2rem;background:var(--glass-bg-color);border:none;outline-color:#00dcff;box-shadow:var(--glass-box-shadow);text-shadow:0 0 3px var(--glass-bg-color),0 0 3px var(--glass-bg-color);border-radius:100rem}.city-search::placeholder{color:#ddd}@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){.city-search{background-color:#bbbbbc1f;backdrop-filter:blur(8px) saturate(150%) brightness(.75);-webkit-backdrop-filter:blur(8px) saturate(150%);text-shadow:none}.city-search::placeholder{color:#ddd}}.unit-switch{--glass-switch-box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 2px 1px 0px -1px rgba(255,255,255,.9), inset -1.5px -1px 0px -1px rgba(255,255,255,.8), inset -2px -6px 1px -5px rgba(255,255,255,.6), inset -1px 2px 3px -1px rgba(0,0,0,.2), inset 0px -4px 1px -2px rgba(0,0,0,.2), 0px 3px 6px 0px rgba(0,0,0,.08);position:relative;width:4rem;height:2rem;font-size:1rem;line-height:1;color:#fff;padding:0 .75rem;background:var(--glass-bg-color);border:none;border-radius:1rem;margin-left:1rem;box-shadow:var(--glass-switch-box-shadow);text-shadow:0 0 3px var(--glass-bg-color),0 0 3px var(--glass-bg-color)}.unit-switch span{display:inline-block;width:50%;text-align:left;z-index:1}.unit-switch span:last-child{text-align:right}.unit-switch:before{content:"";position:absolute;top:3px;left:3px;width:calc(2rem - 2px);height:calc(2rem - 6px);background:var(--glass-bg-color);border:none;border-radius:1rem;box-shadow:var(--glass-switch-box-shadow);z-index:-1;transition:left .2s}.unit-switch.metric:before{left:calc(100% - 2rem - 1px)}@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){.unit-switch{color:#fff;background-color:#bbbbbc1f;backdrop-filter:blur(8px) saturate(150%) brightness(.75);-webkit-backdrop-filter:blur(8px) saturate(150%);text-shadow:none}.unit-switch:before{background-color:#bbbbbc5c}}@property --sky-color-1{syntax: "<color>"; inherits: true; initial-value: #212121;}@property --sky-stop-1{syntax: "<percentage>"; inherits: true; initial-value: 5%;}@property --sky-color-2{syntax: "<color>"; inherits: true; initial-value: #282828;}@property --sky-stop-2{syntax: "<percentage>"; inherits: true; initial-value: 50%;}@property --sky-color-3{syntax: "<color>"; inherits: true; initial-value: #282828;}@property --sky-stop-3{syntax: "<percentage>"; inherits: true; initial-value: 90%;}.sky{position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}@supports (--sky-color-1: red){.sky{background:linear-gradient(var(--sky-color-1) var(--sky-stop-1),var(--sky-color-2) var(--sky-stop-2),var(--sky-color-3) var(--sky-stop-3));transition:--sky-color-1 1s,--sky-stop-1 1s,--sky-color-2 1s,--sky-stop-2 1s,--sky-color-3 1s,--sky-stop-3 1s}.none{--sky-color-1: #212121;--sky-stop-1: 5%;--sky-color-2: #282828;--sky-stop-2: 50%;--sky-color-3: #212121;--sky-stop-3: 90%}.dawn{--sky-color-1: #a2b1ea;--sky-stop-1: 40%;--sky-color-2: #faa66a;--sky-stop-2: 85%;--sky-color-3: #e36423;--sky-stop-3: 99%}.day{--sky-color-1: #3378b8;--sky-stop-1: 4%;--sky-color-2: #3378b8;--sky-stop-2: 5%;--sky-color-3: #d8e8fc;--sky-stop-3: 90%}.dusk{--sky-color-1: #0f1833;--sky-stop-1: 5%;--sky-color-2: #31375d;--sky-stop-2: 50%;--sky-color-3: #c79b90;--sky-stop-3: 90%}.night{--sky-color-1: #060519;--sky-stop-1: 4%;--sky-color-2: #060519;--sky-stop-2: 5%;--sky-color-3: #384762;--sky-stop-3: 90%}}@supports not (--sky-color-1: red){.sky,.none{background:linear-gradient(#212121 5%,#282828 50%,#212121 90%)}.dawn{background:linear-gradient(#a2b1ea 30%,#faa66a 60%,#e36423 99%)}.day{background:linear-gradient(#3378b8 5%,#d8e8fc 90%)}.dusk{background:linear-gradient(#0f1833 5%,#31375d 50%,#c79b90 90%)}.night{background:linear-gradient(#060519 5%,#384762 90%)}}.fog{position:relative;width:100%;min-width:1200px;height:100%;overflow:hidden;opacity:.3;z-index:1}.fog.none{opacity:.3}.fog.dawn,.fog.day{opacity:.9}.fog.dusk{opacity:.4}.fog.night{opacity:.3}.fog-layer{position:absolute;width:200%;height:100%}.fog-img1,.fog-img2{float:left;width:50%;height:100%}#FogLayer1{animation:foglayer1_opacity 10s linear infinite,foglayer_move 15s linear infinite}#FogLayer1 .fog-img1,#FogLayer1 .fog-img2{background:url(/img/fog-1.png) no-repeat top left transparent;background-size:100% 100%}#FogLayer2{animation:foglayer2_opacity 21s linear infinite,foglayer_move 13s linear infinite}#FogLayer2 .fog-img1,#FogLayer2 .fog-img2{background:url(/img/fog-2.png) no-repeat top left transparent;background-size:100% 100%}#FogLayer3{animation:foglayer_3_opacity 21s linear infinite,foglayer_moveme 13s linear infinite}#FogLayer3 .fog-img1,#FogLayer3 .fog-img2{background:url(/img/fog-2.png) no-repeat top left transparent;background-size:100% 100%}@keyframes foglayer1_opacity{0%{opacity:.1}22%{opacity:.5}40%{opacity:.28}58%{opacity:.4}80%{opacity:.16}to{opacity:.1}}@keyframes foglayer2_opacity{0%{opacity:.5}25%{opacity:.2}50%{opacity:.1}80%{opacity:.3}to{opacity:.5}}@keyframes foglayer3_opacity{0%{opacity:.8}27%{opacity:.2}52%{opacity:.6}68%{opacity:.3}to{opacity:.8}}@keyframes foglayer_move{0%{left:0}to{left:-100%}}#RainEffect{position:absolute;top:0;left:0;z-index:2}.rain-none{opacity:.3}.rain-dawn{background:#060519b3;opacity:.8}.rain-day{background:#060519;opacity:.6}.rain-dusk{background:#060519;opacity:.3}.rain-night{opacity:.3}#SnowEffect{position:absolute;top:0;left:0;z-index:2}.snow-none{opacity:.5}.snow-dawn{background:#060519b3;opacity:.8}.snow-day{background:#060519;opacity:.6}.snow-dusk{background:#060519;opacity:.5}.snow-night{opacity:.3}#ThunderEffect{position:absolute;top:0;left:0;z-index:2}.thunder-none{opacity:.5}.thunder-dawn{background:#060519;opacity:.5}.thunder-day{background:#060519;opacity:.4}.thunder-dusk{background:#060519;opacity:.5}.thunder-night{opacity:.5}.clouds{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10}#Cloud1,#Cloud2,#Cloud3,#Cloud4{position:absolute;border-radius:50%;box-shadow:0 400px 60px #fff;filter:url(#CloudFilter)}#Cloud1{top:-400px;left:calc(100% + 80px);width:190px;height:130px;opacity:.7;animation:cloud1_move 80s -30s linear infinite}@keyframes cloud1_move{0%{left:calc(100% + 80px)}to{left:-270px}}#Cloud2{top:-280px;left:calc(100% + 80px);width:300px;height:70px;opacity:.5;animation:cloud2_move 120s 0s linear infinite}@keyframes cloud2_move{0%{left:calc(100% + 80px)}to{left:-320px}}#Cloud3{top:-160px;left:calc(100% + 80px);width:700px;height:120px;opacity:.4;animation:cloud3_move 180s -80s linear infinite}@keyframes cloud3_move{0%{left:calc(100% + 80px)}to{left:-720px}}#Cloud4{top:-120px;left:0;width:325px;height:210px;opacity:.8;animation:cloud4_move 100s -60s linear infinite}@keyframes cloud4_move{0%{left:calc(100% + 80px)}to{left:-410px}}.sun-box{--sun-size: 100px;--sun-color: #f8ea81;--sun-center-color: #fef8cd;position:fixed;top:-20px;left:calc(30% - (var(--sun-size) / 2));width:var(--sun-size);height:var(--sun-size);z-index:5;rotate:0deg;animation:sun_rotate 160s linear infinite}.sun-box .sun{position:absolute;top:0;left:0;width:100%;aspect-ratio:1 / 1;background:var(--sun-center-color);border-radius:var(--sun-size);box-shadow:inset 0 0 50px 5px var(--sun-color),0 0 5px 10px var(--sun-color),0 0 80px 30px var(--sun-color);filter:blur(3px);z-index:3}.sun-box .long-rays{position:absolute;top:-155px;left:40px;width:0;height:0;opacity:.5;z-index:2}.sun-box .long-rays .ray{position:absolute;top:-10px;width:0;height:0;border:10px solid transparent;border-bottom:calc(var(--sun-size) * 2) solid var(--sun-color);filter:blur(8px);transform-origin:50% 100%;rotate:15deg}.sun-box .long-rays .ray:after{content:"";position:absolute;left:-10px;top:calc(var(--sun-size) * 2);width:0;height:0;border:10px solid transparent;border-top:calc(var(--sun-size) * 2) solid var(--sun-color)}.sun-box .long-rays .ray:nth-child(2){rotate:75deg}.sun-box .long-rays .ray:nth-child(3){rotate:135deg}.sun-box .short-rays{position:absolute;top:-54px;left:40px;width:0;height:0;opacity:.7;z-index:1}.sun-box .short-rays .ray{position:absolute;top:-2px;width:0;height:0;border:5px solid transparent;border-bottom:var(--sun-size) solid var(--sun-color);filter:blur(3px);transform-origin:50% 100%;rotate:-15deg}.sun-box .short-rays .ray:after{content:"";position:absolute;left:-2px;top:var(--sun-size);width:0;height:0;border:5px solid transparent;border-top:var(--sun-size) solid var(--sun-color)}.sun-box .short-rays .ray:nth-child(2){rotate:45deg}.sun-box .short-rays .ray:nth-child(3){rotate:105deg}@keyframes sun_rotate{0%{rotate:0deg}to{rotate:359deg}}.moon{--moon-size: 100px;position:absolute;top:-15px;left:calc(70% - (var(--moon-size) / 2));width:var(--moon-size);height:var(--moon-size);background:center center / cover url(/img/moon.jpg);border-radius:var(--moon-size);box-shadow:0 0 130px 10px #fff;filter:blur(1px);z-index:5}.effects{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.expanded-info{position:relative;display:flex;flex-wrap:wrap;justify-content:space-evenly;width:324px;margin:2rem auto 0;z-index:100}.glass-box{--glass-box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 1.8px 3px 0px -2px rgba(255,255,255,.6), inset -2px -2px 0px -2px rgba(255,255,255,.5), inset -3px -8px 1px -6px rgba(255,255,255,.3), inset -.3px -1px 4px 0px rgba(0,0,0,.12), inset -1.5px 2.5px 0px -2px rgba(0,0,0,.2), inset 0px 3px 4px -2px rgba(0,0,0,.2), inset 2px -6.5px 1px -4px rgba(0,0,0,.1), 0px 1px 5px 0px rgba(0,0,0,.1), 0px 6px 16px 0px rgba(0,0,0,.08);width:130px;padding:0 .5rem .5rem;margin:1rem 0;background:var(--glass-bg-color);box-shadow:var(--glass-box-shadow);border-radius:1rem;text-shadow:0 0 3px var(--glass-bg-color),0 0 3px var(--glass-bg-color)}.glass-box.wide{width:280px}.glass-box.wide p{line-height:1.2}.glass-box.wide p span:first-child{position:relative;top:-.4rem;font-size:1rem}.glass-box.small-text p{font-size:2rem;line-height:1.6}.glass-box.small-text span{font-size:1rem}.glass-box h4{font-size:1rem;font-weight:400;color:#ddd;line-height:2.5}.glass-box p{font-size:2.5rem;line-height:1.3}.glass-box p span,.glass-box p sup{font-size:1.5rem;padding-left:5px}@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)){.glass-box{background-color:#bbbbbc1f;backdrop-filter:blur(8px) saturate(150%) brightness(.75);-webkit-backdrop-filter:blur(8px) saturate(150%);text-shadow:none}}@media screen and (min-width:750px){.expanded-info{width:600px}.glass-box.wide{order:5}}.current-conditions{position:relative;display:flex;flex-wrap:wrap;margin-top:2rem;z-index:100}.current-conditions h1{width:100%;font-size:2em;font-weight:400}.current-conditions h2{width:55%;font-size:5rem;line-height:1;text-align:right}.current-conditions h2 span{font-weight:400}.current-conditions h3{width:100%;font-size:1.25rem;font-weight:400;line-height:1}.current-conditions .temp-range{width:45%;text-align:left;padding:.5rem 0 0 1rem}.current-conditions .temp-range .temp-high,.current-conditions .temp-range .temp-low{font-size:1.5rem}:is(.current-conditions .temp-range .temp-high,.current-conditions .temp-range .temp-low) span{position:relative;top:-.15rem;font-size:1rem}.check-source{position:relative;z-index:100}:root{--glass-bg-color: rgba(40, 55, 83, .5)}.search{position:relative;width:clamp(340px,100%,600px);margin:0 auto;z-index:100}