/* Illustrated scenery stays behind real DOM text and follows the live weather code. */
.weather-picture{isolation:isolate;background:#cceafa!important}
.weather-picture:before{content:"";position:absolute;inset:0;z-index:-2;background:url('/assets/light/weather-landscape.png') center 70% / cover no-repeat}
.weather-picture:after{content:"";position:absolute;inset:0;width:auto;height:auto;z-index:-1;border-radius:0;transform:none;opacity:1;background:linear-gradient(90deg,#e1f4ffb8 0%,#e1f4ff75 43%,#eef8ff00 85%)}
.weather-picture[data-weather="sunny"]:before{filter:saturate(1.06) brightness(1.03)}
.weather-picture[data-weather="cloudy"]:before{filter:saturate(.65) brightness(.95)}
.weather-picture[data-weather="cloudy"]:after{background:radial-gradient(ellipse at 85% 5%,#e9f1f8d9,transparent 62%),linear-gradient(90deg,#e3edf7c9,#e3edf76b 45%,#d4e0eb10)}
.weather-picture[data-weather="rain"]:before{filter:saturate(.45) brightness(.8)}
.weather-picture[data-weather="rain"]:after{background:linear-gradient(90deg,#dceaf7dc,#dceaf77a 50%,#a7bfd52b),repeating-linear-gradient(110deg,transparent 0 28px,#eef7ff4d 29px 30px,transparent 31px 65px)}
.weather-picture[data-weather="storm"]:before{filter:saturate(.35) brightness(.66) hue-rotate(8deg)}
.weather-picture[data-weather="storm"]:after{background:radial-gradient(ellipse at 95% 5%,#54647d88,transparent 70%),linear-gradient(90deg,#dce7f5ed,#dce7f58a 55%,#7b8dab26),repeating-linear-gradient(110deg,transparent 0 26px,#eef7ff55 27px 28px,transparent 29px 55px)}
.weather-picture[data-weather="snow"]:before{filter:saturate(.2) brightness(1.25)}
.weather-picture[data-weather="snow"]:after{background:linear-gradient(90deg,#edf7ffcf,#edf7ff70 50%,#ffffff10),radial-gradient(circle at 20% 40%,#fff 0 1px,transparent 2px),radial-gradient(circle at 70% 30%,#fff 0 2px,transparent 3px);background-size:auto,47px 59px,83px 73px}
.weather-picture[data-weather="fog"]:before{filter:saturate(.25) contrast(.65) brightness(1.15)}
.weather-picture[data-weather="fog"]:after{background:linear-gradient(90deg,#edf2f6e0,#edf2f694 55%,#e5edf080),linear-gradient(0deg,#edf2f699,transparent 75%)}
.weather-picture[data-weather="night"]:before{filter:brightness(.46) saturate(.65) hue-rotate(15deg)}
.weather-picture[data-weather="night"]:after{background:linear-gradient(90deg,#dce5f6eb,#dce5f69c 55%,#7992bd26),radial-gradient(circle at 82% 15%,#f6f6df88 0 12px,transparent 30px)}
.weather-now .weather-temp{align-items:center}.weather-now .weather-temp strong{text-shadow:0 1px 4px #f5fbff80}.weather-now .weather-place,.weather-now .weather-temp span{color:#385f7d}.weather-now-heading h2{text-shadow:0 1px 3px #ffffff70}
@media(min-width:1251px){.weather-picture:before{background-position:center 76%}}

.weather-picture:not([data-weather]):before{opacity:0}.weather-picture:before{transition:opacity .25s}