.icon{width:5em;height:5em;font-size:.5em;display:inline-block;position:relative;transform:scale(.5)}.cloud{z-index:1;background:gray;border-radius:50%;width:3.6875em;height:3.6875em;margin:-1.84375em;position:absolute;top:50%;left:50%;box-shadow:-2.1875em .6875em 0 -.6875em gray,2.0625em .9375em 0 -.9375em gray,0 0 0 .375em gray,-2.1875em .6875em 0 -.3125em gray,2.0625em .9375em 0 -.5625em gray}.cloud:after{content:"";background:gray;width:4.5625em;height:1em;display:block;position:absolute;bottom:0;left:-.5em;box-shadow:0 .4375em 0 -.0625em gray}.cloud:nth-child(2){z-index:0;opacity:.8;background:gray;animation:4s linear infinite cloud;transform:scale(.5)translate(6em,-3em);box-shadow:-2.1875em .6875em 0 -.6875em gray,2.0625em .9375em 0 -.9375em gray,0 0 0 .375em gray,-2.1875em .6875em 0 -.3125em gray,2.0625em .9375em 0 -.5625em gray}.cloud:nth-child(2):after{background:gray}.sun{width:2.5em;height:2.5em;box-shadow:0 0 0 .375em var(--color-secondary);background:0 0;border-radius:50%;margin:-1.25em;animation:12s linear infinite spin;position:absolute;top:50%;left:50%}.rays{background:var(--color-secondary);width:.375em;height:1.125em;box-shadow:0 5.375em var(--color-secondary);border-radius:.25em;margin-left:-.1875em;display:block;position:absolute;top:-2em;left:50%}.rays:before,.rays:after{content:"";transform-origin:50% 3.25em;background:var(--color-secondary);width:.375em;height:1.125em;box-shadow:0 5.375em var(--color-secondary);border-radius:.25em;display:block;position:absolute;top:0;left:0;transform:rotate(60deg)}.rays:before{transform:rotate(120deg)}.cloud+.sun{margin:-2em 1em}.rain,.lightning,.snow{z-index:2;background:0 0;width:3.75em;height:3.75em;margin:.375em 0 0 -2em;position:absolute;top:50%;left:50%}.rain:after{content:"";z-index:2;background:#0cf;border-radius:100% 0 60% 50%/60% 0 100% 50%;width:1.125em;height:1.125em;margin:-1em 0 0 -.25em;animation:3s linear infinite rain;position:absolute;top:50%;left:50%;transform:rotate(-28deg);box-shadow:.625em .875em 0 -.125em #0000,-.875em 1.125em 0 -.125em #0000,-1.375em -.125em #0000}.bolt{opacity:.3;margin:-.25em 0 0 -.125em;animation:2s linear infinite lightning;position:absolute;top:50%;left:50%}.bolt:nth-child(2){opacity:.2;width:.5em;height:.25em;margin:-1.75em 0 0 -1.875em;animation:1.5s linear infinite lightning;transform:translate(2.5em,2.25em)}.bolt:before,.bolt:after{content:"";z-index:2;border:.75em solid;border-top:1.25em solid #0000;border-left:.5em solid #0000;margin:-1.625em 0 0 -1.0125em;position:absolute;top:50%;left:50%;transform:skew(-10deg)}.bolt:after{border-top:.75em solid;border-bottom:1.25em solid #0000;border-left:.75em solid;border-right:.5em solid #0000;margin:-.25em 0 0 -.25em;transform:skew(-10deg)}.bolt:nth-child(2):before{border:.375em solid;border-top:.625em solid #0000;border-left:.25em solid #0000;margin:-.75em 0 0 -.5em}.bolt:nth-child(2):after{border-top:.375em solid;border-bottom:.625em solid #0000;border-left:.375em solid;border-right:.25em solid #0000;margin:-.125em 0 0 -.125em}.flake:before,.flake:after{content:"❄";color:#0cf;opacity:.5;margin:-1.025em 0 0 -1.0125em;line-height:1em;animation:8s linear infinite reverse spin;position:absolute;top:50%;left:50%}.flake:after{opacity:.4;margin:.125em 0 0 -1em;font-size:1.5em;animation:14s linear infinite spin}.flake:nth-child(2):before{opacity:.2;margin:-.5em 0 0 .25em;font-size:1.25em;animation:10s linear infinite spin}.flake:nth-child(2):after{opacity:.4;margin:.375em 0 0 .125em;font-size:2em;animation:16s linear infinite reverse spin}@keyframes spin{to{transform:rotate(360deg)}}@keyframes cloud{0%{opacity:0}50%{opacity:.3}to{opacity:0;transform:scale(.5)translate(-200%,-3em)}}@keyframes rain{0%{background:#0cf;box-shadow:.625em .875em 0 -.125em #0000,-.875em 1.125em 0 -.125em #0000,-1.375em -.125em #0cf}25%{box-shadow:.625em .875em 0 -.125em #0000,-.875em 1.125em 0 -.125em #0cf,-1.375em -.125em #0000}50%{background:gray;box-shadow:.625em .875em 0 -.125em #0cf,-.875em 1.125em 0 -.125em #0000,-1.375em -.125em #0000}to{box-shadow:.625em .875em 0 -.125em #0000,-.875em 1.125em 0 -.125em #0000,-1.375em -.125em #0cf}}@keyframes lightning{45%{color:#fff;opacity:.2;background:#fff}50%{color:var(--color-secondary);background:var(--color-secondary);opacity:1}55%{color:#fff;opacity:.2;background:#fff}}
