.pn-weather-icon[data-pn-sky]{display:block;min-height:66px!important}
.pn-weather-icon[data-pn-sky] svg{width:60px!important;height:60px!important;overflow:visible;margin:auto}
.pn-weather-icon[data-pn-sky=sun] svg>g{transform-origin:24px 23px;animation:pn-sun-turn 14s linear infinite}
.pn-weather-icon[data-pn-sky=mixed] svg>path,.pn-weather-icon[data-pn-sky=cloud] svg>path{animation:pn-cloud-drift 2.6s ease-in-out infinite}
.pn-weather-icon[data-pn-sky=mixed] svg>g{animation:pn-sun-breathe 3s ease-in-out infinite;transform-origin:20px 18px}
.pn-weather-icon[data-pn-sky=moon] svg{animation:pn-moon-float 3.5s ease-in-out infinite}
.pn-weather-icon[data-pn-sky=rain] svg>path:last-child{animation:pn-rain-fall 1s linear infinite}
.pn-weather-icon[data-pn-sky=snow] svg>g{animation:pn-snow-fall 2s ease-in-out infinite}
.pn-weather-icon[data-pn-sky=fog] svg>path:last-child{animation:pn-cloud-drift 3s ease-in-out infinite}
.pn-weather-icon[data-pn-sky=storm] svg>path:last-child{animation:pn-storm-glow 3s ease-in-out infinite}
.pn-weather-city:nth-child(2) .pn-weather-icon svg>path{animation-delay:-.7s}
.pn-weather-city:nth-child(3) .pn-weather-icon svg>path{animation-delay:-1.4s}
.pn-weather-motion-toggle{grid-column:1/-1;font-size:11px!important;padding:4px 8px!important;border:1px solid #c7c9b7!important;border-radius:4px;background:#fff9!important;color:#214532!important;cursor:pointer;justify-self:center;margin-top:6px}
@keyframes pn-sun-turn{to{transform:rotate(360deg)}}
@keyframes pn-sun-breathe{0%,100%{opacity:.65}50%{opacity:1}}
@keyframes pn-cloud-drift{0%,100%{transform:translate(-6px,-1px)}50%{transform:translate(6px,2px)}}
@keyframes pn-moon-float{0%,100%{transform:translateY(2px) rotate(-6deg)}50%{transform:translateY(-4px) rotate(6deg)}}
@keyframes pn-rain-fall{from{transform:translateY(-4px);opacity:.4}to{transform:translateY(5px);opacity:1}}
@keyframes pn-snow-fall{0%,100%{transform:translate(-3px,-3px);opacity:.5}50%{transform:translate(3px,5px);opacity:1}}
@keyframes pn-storm-glow{0%,100%{opacity:.4}50%{opacity:1}}
html[data-pn-weather-motion=off] .pn-weather-icon svg,html[data-pn-weather-motion=off] .pn-weather-icon svg>*{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html:not([data-pn-weather-motion=on]) .pn-weather-icon svg,html:not([data-pn-weather-motion=on]) .pn-weather-icon svg>*{animation:none!important}}
@media(max-width:520px){.pn-weather-icon[data-pn-sky] svg{width:52px!important;height:52px!important}}