/* Six photographic weather scenes in one locally hosted sprite atlas. */
[data-scene]{--scene-x:0%;--scene-y:0%}
[data-scene="cloudy"]{--scene-x:50%}
[data-scene="rain"]{--scene-x:100%}
[data-scene="snow"]{--scene-x:0%;--scene-y:100%}
[data-scene="night"]{--scene-x:50%;--scene-y:100%}
[data-scene="fog"]{--scene-x:100%;--scene-y:100%}
.current{isolation:isolate;background:#456381;min-height:350px}
.current::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:100%;aspect-ratio:1;background-image:url('assets/weather-atlas.png');background-size:300% 200%;background-position:var(--scene-x) var(--scene-y);z-index:-2}
.current::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(13,29,48,.62),rgba(13,29,48,.18)),linear-gradient(0deg,rgba(13,29,48,.38),transparent 55%);z-index:-1}
.current .weather-main{min-height:192px}
.current-top p,.weather-main p,.current-bottom,.light{color:#f0f4fa}
.current h3,.current h2,.temperature{text-shadow:0 2px 12px #10243b30}
.live{background:#0c213c40;backdrop-filter:blur(8px);color:white}
.current-bottom{border-color:#ffffff45}
.photo-weather{background-image:url('assets/weather-atlas.png');background-size:300% 200%;background-position:var(--scene-x) var(--scene-y);border-radius:9px;box-shadow:0 2px 5px #243b5315}
.hour .weather-icon{width:44px;height:40px;margin:14px auto 12px}
.day .day-icon{width:32px;height:29px;display:block;border-radius:7px}
@media(max-width:600px){.current{min-height:340px}.current .weather-main{min-height:180px}.day .day-icon{width:30px;height:29px}.hour .weather-icon{width:43px}}