.snowflake{color:#fff;font-size:2em;font-family:Arial;text-shadow:0 0 1px #000}@keyframes snowflakes-fall{0%{top:-10%}to{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0)}50%{transform:translateX(80px)}to{transform:translateX(0)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;animation-delay:0s,0s}.snowflake:first-of-type{left:10%;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;animation-delay:3s,1.5s}@keyframes firework{0%{transform:translate(var(--x),var(--initialY));width:var(--initialSize);opacity:1}50%{width:.5vmin;opacity:1}to{width:var(--finalSize);opacity:0}}.firework,.firework:after,.firework:before{--initialSize:2vh;--finalSize:75vh;--particleSize:1vh;--color1:#ff0;--color2:khaki;--color3:#fff;--color4:#0f0;--color5:gold;--color6:#3cb371;--y:-30vmin;--x:-50%;--initialY:60vmin;content:"";animation:firework 2.5s infinite;position:absolute;top:50%;left:50%;transform:translate(-50%,var(--y));width:var(--initialSize);aspect-ratio:1;background:radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 50% 0,radial-gradient(circle,var(--color2) var(--particleSize),transparent 0) 100% 50%,radial-gradient(circle,var(--color3) var(--particleSize),transparent 0) 50% 100%,radial-gradient(circle,var(--color4) var(--particleSize),transparent 0) 0 50%,radial-gradient(circle,var(--color5) var(--particleSize),transparent 0) 80% 90%,radial-gradient(circle,var(--color6) var(--particleSize),transparent 0) 95% 90%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 90% 70%,radial-gradient(circle,var(--color2) var(--particleSize),transparent 0) 100% 60%,radial-gradient(circle,var(--color3) var(--particleSize),transparent 0) 55% 80%,radial-gradient(circle,var(--color4) var(--particleSize),transparent 0) 70% 77%,radial-gradient(circle,var(--color5) var(--particleSize),transparent 0) 22% 90%,radial-gradient(circle,var(--color6) var(--particleSize),transparent 0) 45% 90%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 33% 70%,radial-gradient(circle,var(--color2) var(--particleSize),transparent 0) 10% 60%,radial-gradient(circle,var(--color3) var(--particleSize),transparent 0) 31% 80%,radial-gradient(circle,var(--color4) var(--particleSize),transparent 0) 28% 77%,radial-gradient(circle,var(--color5) var(--particleSize),transparent 0) 13% 72%,radial-gradient(circle,var(--color6) var(--particleSize),transparent 0) 80% 10%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 95% 14%,radial-gradient(circle,var(--color2) var(--particleSize),transparent 0) 90% 23%,radial-gradient(circle,var(--color3) var(--particleSize),transparent 0) 100% 43%,radial-gradient(circle,var(--color4) var(--particleSize),transparent 0) 85% 27%,radial-gradient(circle,var(--color5) var(--particleSize),transparent 0) 77% 37%,radial-gradient(circle,var(--color6) var(--particleSize),transparent 0) 60% 7%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 22% 14%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 45% 20%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 33% 34%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 10% 29%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 31% 37%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 28% 7%,radial-gradient(circle,var(--color1) var(--particleSize),transparent 0) 13% 42%;background-size:var(--initialSize) var(--initialSize);background-repeat:no-repeat}.firework:before{transform:translate(-50%,-50%) rotate(40deg) scale(1.3) rotateY(40deg)}.firework:after,.firework:before{--x:-50%;--y:-50%;--initialY:-50%}.firework:after{transform:translate(-50%,-50%) rotate(170deg) scale(1.15) rotateY(-30deg)}.firework:nth-child(2){--x:30vmin}.firework:nth-child(2),.firework:nth-child(2):after,.firework:nth-child(2):before{--color1:pink;--color2:violet;--color3:#f0f;--color4:orchid;--color5:plum;--color6:#e6e6fa;--finalSize:40vmin;left:30%;top:60%;animation-delay:-.25s}.firework:nth-child(3){--x:-30vmin;--y:-50vmin}.firework:nth-child(3),.firework:nth-child(3):after,.firework:nth-child(3):before{--color1:#0ff;--color2:#e0ffff;--color3:#add8e6;--color4:#afeeee;--color5:#87ceeb;--color6:#e6e6fa;--finalSize:35vmin;left:70%;top:60%;animation-delay:-.4s}.firework:nth-child(4){--x:-30vmin;--y:-50vmin}.firework:nth-child(4),.firework:nth-child(4):after,.firework:nth-child(4):before{--color1:#f0f;--color2:plum;--color3:red;--color4:red;--color5:red;--color6:plum;--finalSize:35vmin;left:90%;top:60%;animation-delay:-1s}