.snowbody{align-content:center;background-color:#061123;display:grid;height:100vh;justify-content:center}.snow{animation:animatedBackground 10s linear infinite;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 50 50'%3E%3Cstyle%3E.st1{opacity:.3;fill:%23fff}%3C/style%3E%3Ccircle cx='5' cy='8' r='1' class='st1'/%3E%3Ccircle cx='38' cy='3' r='1' class='st1'/%3E%3Ccircle cx='12' cy='4' r='1' class='st1'/%3E%3Ccircle cx='16' cy='16' r='1' class='st1'/%3E%3Ccircle cx='47' cy='46' r='1' class='st1'/%3E%3Ccircle cx='32' cy='10' r='1' class='st1'/%3E%3Ccircle cx='3' cy='46' r='1' class='st1'/%3E%3Ccircle cx='45' cy='13' r='1' class='st1'/%3E%3Ccircle cx='10' cy='28' r='1' class='st1'/%3E%3Ccircle cx='22' cy='35' r='1' class='st1'/%3E%3Ccircle cx='3' cy='21' r='1' class='st1'/%3E%3Ccircle cx='26' cy='20' r='1' class='st1'/%3E%3Ccircle cx='30' cy='45' r='1' class='st1'/%3E%3Ccircle cx='15' cy='45' r='1' class='st1'/%3E%3Ccircle cx='34' cy='36' r='1' class='st1'/%3E%3Ccircle cx='41' cy='32' r='1' class='st1'/%3E%3C/svg%3E");border:1px solid hsla(0,0%,100%,.1)}.snow div{animation:animatedBackground 15s linear infinite;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' viewBox='0 0 50 50'%3E%3Cstyle%3E.st3{opacity:.1;fill:%23fff}%3C/style%3E%3Ccircle cx='4' cy='14' r='1' class='st3'/%3E%3Ccircle cx='43' cy='3' r='1' class='st3'/%3E%3Ccircle cx='31' cy='30' r='2' class='st3'/%3E%3Ccircle cx='19' cy='23' r='1' class='st3'/%3E%3Ccircle cx='37' cy='22' r='1' class='st3'/%3E%3Ccircle cx='43' cy='16' r='1' class='st3'/%3E%3Ccircle cx='8' cy='45' r='1' class='st3'/%3E%3Ccircle cx='29' cy='39' r='1' class='st3'/%3E%3Ccircle cx='13' cy='37' r='1' class='st3'/%3E%3Ccircle cx='47' cy='32' r='1' class='st3'/%3E%3Ccircle cx='15' cy='4' r='2' class='st3'/%3E%3Ccircle cx='9' cy='27' r='1' class='st3'/%3E%3Ccircle cx='30' cy='9' r='1' class='st3'/%3E%3Ccircle cx='25' cy='15' r='1' class='st3'/%3E%3Ccircle cx='21' cy='45' r='2' class='st3'/%3E%3Ccircle cx='42' cy='45' r='1' class='st3'/%3E%3C/svg%3E")}@keyframes animatedBackground{0%{background-position:0 0}to{background-position:0 300px}}