css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="card">
  <div class="tree">
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
    <span class="particle"></span>
  </div>
  <img class="logo" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALcAAAAyCAYAAAAeE0r0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6Q0M5NkI4RUQ1QjkxMTFFNEEzQ0RCN0M2OUQ5OURERUUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6Q0M5NkI4RUM1QjkxMTFFNEEzQ0RCN0M2OUQ5OURERUUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODg5Qzk1RTY1QjY3MTFFNDg3OUNEMEU2Q0IwNzE5OTMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODg5Qzk1RTc1QjY3MTFFNDg3OUNEMEU2Q0IwNzE5OTMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5csB04AAAMo0lEQVR42uxd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">
  <div class="message">Bonne Année 2019!</div>
            
          
!
            
              @import url("https://fonts.googleapis.com/css?family=Gloria+Hallelujah");
div.card { overflow: hidden; font-family: Helvetica, Arial, sans-serif; color: #fff; font-size: 11px; width: 100vw; height: 100vh; perspective: 3000px; perspective-origin: 0px 148.23px; background: #2155aa; background: -webkit-radial-gradient(center, ellipse cover, #2155aa 0%, #492727 100%); }

div.card div.tree { transform-origin: 50% 0; transform-style: preserve-3d; margin: 0 auto; position: relative; animation: spin 18s infinite linear; }

div.card div.tree * { position: absolute; transform-origin: 0 0; }

div.card div.tree div.branch { text-align: center; color: white; line-height: 22px; vertical-align: middle; background-color: #0a4f0a; overflow: hidden; border-bottom-right-radius: 5px; border-top-right-radius: 5px; }

div.card div.tree progress.branch { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); }

div.card img.logo { position: absolute; left: 15px; top: 10px; height: 70px; width: auto; }

div.card div.message { position: absolute; left: 0; right: 0; bottom: 40px; text-align: center; font-size: 70px; font-family: 'Gloria Hallelujah', cursive; font-weight: 400; font-style: normal; line-height: 70px; }

.particle { position: absolute; top: calc(50% - 3px); left: calc(50% - 3px); }

.particle { transform-style: preserve-3d; }

.particle:before { content: ""; width: 6px; height: 6px; position: absolute; background: currentColor; border-radius: 50%; animation: spin 18s infinite linear reverse, blink 6s infinite linear; box-shadow: 0 0 10px currentColor; }

.particle:nth-child(1) { transform: translate3d(-41.34017px, -213.09334px, 143.1161px); color: #FFF; }

.particle:nth-child(1):before { animation-delay: 0s, -0.015s; }

.particle:nth-child(2) { transform: translate3d(-97.64834px, 230.66161px, 69.71388px); color: #FFF; }

.particle:nth-child(2):before { animation-delay: 0s, -0.03s; }

.particle:nth-child(3) { transform: translate3d(156.45037px, -20.58534px, -206.63864px); color: #FFF; }

.particle:nth-child(3):before { animation-delay: 0s, -0.045s; }

.particle:nth-child(4) { transform: translate3d(206.28783px, -45.55015px, 151.56027px); color: #FFF; }

.particle:nth-child(4):before { animation-delay: 0s, -0.06s; }

.particle:nth-child(5) { transform: translate3d(16.08601px, 155.98295px, -207.38988px); color: #FFF; }

.particle:nth-child(5):before { animation-delay: 0s, -0.075s; }

.particle:nth-child(6) { transform: translate3d(110.09406px, 199.52437px, 125.17717px); color: #FFF; }

.particle:nth-child(6):before { animation-delay: 0s, -0.09s; }

.particle:nth-child(7) { transform: translate3d(-232.53644px, -0.12422px, -116.30472px); color: #FFF; }

.particle:nth-child(7):before { animation-delay: 0s, -0.105s; }

.particle:nth-child(8) { transform: translate3d(-17.50299px, 256.89918px, 36.00635px); color: #FFF; }

.particle:nth-child(8):before { animation-delay: 0s, -0.12s; }

.particle:nth-child(9) { transform: translate3d(55.41679px, -189.515px, 169.15391px); color: #FFF; }

.particle:nth-child(9):before { animation-delay: 0s, -0.135s; }

.particle:nth-child(10) { transform: translate3d(34.12652px, -252.76243px, -50.46318px); color: #FFF; }

.particle:nth-child(10):before { animation-delay: 0s, -0.15s; }

.particle:nth-child(11) { transform: translate3d(-41.28288px, 253.36765px, -41.2378px); color: #FFF; }

.particle:nth-child(11):before { animation-delay: 0s, -0.165s; }

.particle:nth-child(12) { transform: translate3d(-179.52525px, 164.04407px, 91.97949px); color: #FFF; }

.particle:nth-child(12):before { animation-delay: 0s, -0.18s; }

.particle:nth-child(13) { transform: translate3d(125.79738px, -226.72326px, 19.2765px); color: #FFF; }

.particle:nth-child(13):before { animation-delay: 0s, -0.195s; }

.particle:nth-child(14) { transform: translate3d(-210.47833px, 149.64585px, 30.08308px); color: #FFF; }

.particle:nth-child(14):before { animation-delay: 0s, -0.21s; }

.particle:nth-child(15) { transform: translate3d(218.24656px, -82.54331px, 114.69543px); color: #FFF; }

.particle:nth-child(15):before { animation-delay: 0s, -0.225s; }

.particle:nth-child(16) { transform: translate3d(159.99541px, -60.33355px, -195.86049px); color: #FFF; }

.particle:nth-child(16):before { animation-delay: 0s, -0.24s; }

.particle:nth-child(17) { transform: translate3d(233.80417px, 1.68919px, -113.72227px); color: #FFF; }

.particle:nth-child(17):before { animation-delay: 0s, -0.255s; }

.particle:nth-child(18) { transform: translate3d(183.09298px, -165.66003px, 81.44763px); color: #FFF; }

.particle:nth-child(18):before { animation-delay: 0s, -0.27s; }

.particle:nth-child(19) { transform: translate3d(-47.97499px, 80.95488px, 242.37308px); color: #FFF; }

.particle:nth-child(19):before { animation-delay: 0s, -0.285s; }

.particle:nth-child(20) { transform: translate3d(31.88527px, -82.55966px, 244.47338px); color: #FFF; }

.particle:nth-child(20):before { animation-delay: 0s, -0.3s; }

.particle:nth-child(21) { transform: translate3d(-127.65534px, -10.09768px, -226.27892px); color: #FFF; }

.particle:nth-child(21):before { animation-delay: 0s, -0.315s; }

.particle:nth-child(22) { transform: translate3d(-135.31418px, 221.58348px, 13.81422px); color: #FFF; }

.particle:nth-child(22):before { animation-delay: 0s, -0.33s; }

.particle:nth-child(23) { transform: translate3d(-91.23177px, 241.76072px, -28.78405px); color: #FFF; }

.particle:nth-child(23):before { animation-delay: 0s, -0.345s; }

.particle:nth-child(24) { transform: translate3d(2.41905px, 212.90227px, 149.22054px); color: #FFF; }

.particle:nth-child(24):before { animation-delay: 0s, -0.36s; }

.particle:nth-child(25) { transform: translate3d(169.00048px, 138.93192px, 140.48758px); color: #FFF; }

.particle:nth-child(25):before { animation-delay: 0s, -0.375s; }

.particle:nth-child(26) { transform: translate3d(12.01897px, -257.48974px, -33.9791px); color: #FFF; }

.particle:nth-child(26):before { animation-delay: 0s, -0.39s; }

.particle:nth-child(27) { transform: translate3d(128.68265px, -72.55952px, -213.95301px); color: #FFF; }

.particle:nth-child(27):before { animation-delay: 0s, -0.405s; }

.particle:nth-child(28) { transform: translate3d(-11.4947px, -259.20346px, -16.77616px); color: #FFF; }

.particle:nth-child(28):before { animation-delay: 0s, -0.42s; }

.particle:nth-child(29) { transform: translate3d(117.90728px, 4.68198px, -231.68071px); color: #FFF; }

.particle:nth-child(29):before { animation-delay: 0s, -0.435s; }

.particle:nth-child(30) { transform: translate3d(-137.28002px, 204.33515px, 83.67401px); color: #FFF; }

.particle:nth-child(30):before { animation-delay: 0s, -0.45s; }

.particle:nth-child(31) { transform: translate3d(58.95841px, 90.16483px, -236.63096px); color: #FFF; }

.particle:nth-child(31):before { animation-delay: 0s, -0.465s; }

.particle:nth-child(32) { transform: translate3d(114.30217px, 229.14006px, 45.05382px); color: #FFF; }

.particle:nth-child(32):before { animation-delay: 0s, -0.48s; }

.particle:nth-child(33) { transform: translate3d(64.00252px, -250.51516px, -27.30989px); color: #FFF; }

.particle:nth-child(33):before { animation-delay: 0s, -0.495s; }

.particle:nth-child(34) { transform: translate3d(19.8172px, 244.91639px, -84.98965px); color: #FFF; }

.particle:nth-child(34):before { animation-delay: 0s, -0.51s; }

.particle:nth-child(35) { transform: translate3d(18.04801px, 245.64677px, 83.25825px); color: #FFF; }

.particle:nth-child(35):before { animation-delay: 0s, -0.525s; }

.particle:nth-child(36) { transform: translate3d(-60.47508px, 170.16499px, -187.04716px); color: #FFF; }

.particle:nth-child(36):before { animation-delay: 0s, -0.54s; }

.particle:nth-child(37) { transform: translate3d(-256.84394px, -19.86225px, -35.16651px); color: #FFF; }

.particle:nth-child(37):before { animation-delay: 0s, -0.555s; }

.particle:nth-child(38) { transform: translate3d(-226.6252px, -95.45604px, -84.43439px); color: #FFF; }

.particle:nth-child(38):before { animation-delay: 0s, -0.57s; }

.particle:nth-child(39) { transform: translate3d(38.59153px, 252.3584px, 49.25376px); color: #FFF; }

.particle:nth-child(39):before { animation-delay: 0s, -0.585s; }

.particle:nth-child(40) { transform: translate3d(167.6052px, -163.96746px, 112.35289px); color: #FFF; }

.particle:nth-child(40):before { animation-delay: 0s, -0.6s; }

.particle:nth-child(41) { transform: translate3d(226.66474px, -104.94656px, -72.1756px); color: #FFF; }

.particle:nth-child(41):before { animation-delay: 0s, -0.615s; }

.particle:nth-child(42) { transform: translate3d(88.8446px, 238.27517px, 54.14408px); color: #FFF; }

.particle:nth-child(42):before { animation-delay: 0s, -0.63s; }

.particle:nth-child(43) { transform: translate3d(39.04745px, -80.69997px, 244.05494px); color: #FFF; }

.particle:nth-child(43):before { animation-delay: 0s, -0.645s; }

.particle:nth-child(44) { transform: translate3d(-259.79814px, -7.30193px, 7.18372px); color: #FFF; }

.particle:nth-child(44):before { animation-delay: 0s, -0.66s; }

.particle:nth-child(45) { transform: translate3d(49.31946px, 239.04538px, 89.5818px); color: #FFF; }

.particle:nth-child(45):before { animation-delay: 0s, -0.675s; }

.particle:nth-child(46) { transform: translate3d(68.81819px, -198.63335px, -152.9995px); color: #FFF; }

.particle:nth-child(46):before { animation-delay: 0s, -0.69s; }

.particle:nth-child(47) { transform: translate3d(246.61341px, 19.82347px, 79.93033px); color: #FFF; }

.particle:nth-child(47):before { animation-delay: 0s, -0.705s; }

.particle:nth-child(48) { transform: translate3d(-232.02667px, -114.90216px, -23.6879px); color: #FFF; }

.particle:nth-child(48):before { animation-delay: 0s, -0.72s; }

.particle:nth-child(49) { transform: translate3d(-125.35531px, -221.2575px, -54.14025px); color: #FFF; }

.particle:nth-child(49):before { animation-delay: 0s, -0.735s; }

.particle:nth-child(50) { transform: translate3d(9.68043px, 173.41692px, 193.47574px); color: #FFF; }

.particle:nth-child(50):before { animation-delay: 0s, -0.75s; }

.particle:nth-child(51) { transform: translate3d(37.53639px, 256.70538px, -17.128px); color: #FFF; }

.particle:nth-child(51):before { animation-delay: 0s, -0.765s; }

.particle:nth-child(52) { transform: translate3d(-245.64613px, 20.43016px, -82.70785px); color: #FFF; }

.particle:nth-child(52):before { animation-delay: 0s, -0.78s; }

.particle:nth-child(53) { transform: translate3d(59.41328px, 35.21705px, -250.65878px); color: #FFF; }

.particle:nth-child(53):before { animation-delay: 0s, -0.795s; }

.particle:nth-child(54) { transform: translate3d(-76.28405px, -248.43523px, -7.78968px); color: #FFF; }

.particle:nth-child(54):before { animation-delay: 0s, -0.81s; }

.particle:nth-child(55) { transform: translate3d(168.45707px, -146.12767px, 133.67467px); color: #FFF; }

.particle:nth-child(55):before { animation-delay: 0s, -0.825s; }

.particle:nth-child(56) { transform: translate3d(-145.47295px, 61.90638px, 206.41032px); color: #FFF; }

.particle:nth-child(56):before { animation-delay: 0s, -0.84s; }

.particle:nth-child(57) { transform: translate3d(-28.37698px, 121.03626px, -228.35273px); color: #FFF; }

.particle:nth-child(57):before { animation-delay: 0s, -0.855s; }

.particle:nth-child(58) { transform: translate3d(-45.35503px, -82.82566px, -242.2454px); color: #FFF; }

.particle:nth-child(58):before { animation-delay: 0s, -0.87s; }

.particle:nth-child(59) { transform: translate3d(-222.0881px, 66.47438px, -117.72014px); color: #FFF; }

.particle:nth-child(59):before { animation-delay: 0s, -0.885s; }

.particle:nth-child(60) { transform: translate3d(212.61941px, -125.09832px, -82.11818px); color: #FFF; }

.particle:nth-child(60):before { animation-delay: 0s, -0.9s; }

.particle:nth-child(61) { transform: translate3d(59.75446px, 240.5805px, 78.42465px); color: #FFF; }

.particle:nth-child(61):before { animation-delay: 0s, -0.915s; }

.particle:nth-child(62) { transform: translate3d(-63.13738px, 207.52053px, -143.34887px); color: #FFF; }

.particle:nth-child(62):before { animation-delay: 0s, -0.93s; }

.particle:nth-child(63) { transform: translate3d(180.10101px, -108.37149px, -153.03348px); color: #FFF; }

.particle:nth-child(63):before { animation-delay: 0s, -0.945s; }

.particle:nth-child(64) { transform: translate3d(117.6798px, -225.64352px, 53.25849px); color: #FFF; }

.particle:nth-child(64):before { animation-delay: 0s, -0.96s; }

.particle:nth-child(65) { transform: translate3d(-22.22261px, 258.53414px, 16.31735px); color: #FFF; }

.particle:nth-child(65):before { animation-delay: 0s, -0.975s; }

.particle:nth-child(66) { transform: translate3d(74.16148px, -249.18926px, 2.1878px); color: #FFF; }

.particle:nth-child(66):before { animation-delay: 0s, -0.99s; }

.particle:nth-child(67) { transform: translate3d(14.57188px, 259.5694px, -3.3746px); color: #FFF; }

.particle:nth-child(67):before { animation-delay: 0s, -1.005s; }

.particle:nth-child(68) { transform: translate3d(-40.77433px, 254.92199px, 30.8583px); color: #FFF; }

.particle:nth-child(68):before { animation-delay: 0s, -1.02s; }

.particle:nth-child(69) { transform: translate3d(67.15809px, -238.29385px, 79.40928px); color: #FFF; }

.particle:nth-child(69):before { animation-delay: 0s, -1.035s; }

.particle:nth-child(70) { transform: translate3d(-156.32027px, -134.21626px, -158.58742px); color: #FFF; }

.particle:nth-child(70):before { animation-delay: 0s, -1.05s; }

.particle:nth-child(71) { transform: translate3d(-196.89px, 88.49971px, 144.92112px); color: #FFF; }

.particle:nth-child(71):before { animation-delay: 0s, -1.065s; }

.particle:nth-child(72) { transform: translate3d(14.95349px, 259.16026px, 14.5723px); color: #FFF; }

.particle:nth-child(72):before { animation-delay: 0s, -1.08s; }

.particle:nth-child(73) { transform: translate3d(115.74276px, 215.4451px, 88.24411px); color: #FFF; }

.particle:nth-child(73):before { animation-delay: 0s, -1.095s; }

.particle:nth-child(74) { transform: translate3d(-134.69839px, 180.60799px, 129.75783px); color: #FFF; }

.particle:nth-child(74):before { animation-delay: 0s, -1.11s; }

.particle:nth-child(75) { transform: translate3d(22.98111px, 252.39811px, 58.02638px); color: #FFF; }

.particle:nth-child(75):before { animation-delay: 0s, -1.125s; }

.particle:nth-child(76) { transform: translate3d(-16.34638px, -25.14177px, -258.26476px); color: #FFF; }

.particle:nth-child(76):before { animation-delay: 0s, -1.14s; }

.particle:nth-child(77) { transform: translate3d(-253.49066px, 49.35186px, 30.11447px); color: #FFF; }

.particle:nth-child(77):before { animation-delay: 0s, -1.155s; }

.particle:nth-child(78) { transform: translate3d(-128.06879px, -225.86988px, 13.46039px); color: #FFF; }

.particle:nth-child(78):before { animation-delay: 0s, -1.17s; }

.particle:nth-child(79) { transform: translate3d(102.69px, -238.77535px, -6.41065px); color: #FFF; }

.particle:nth-child(79):before { animation-delay: 0s, -1.185s; }

.particle:nth-child(80) { transform: translate3d(-43.51365px, 5.11637px, 256.28185px); color: #FFF; }

.particle:nth-child(80):before { animation-delay: 0s, -1.2s; }

.particle:nth-child(81) { transform: translate3d(-212.93382px, 84.61472px, 122.88018px); color: #FFF; }

.particle:nth-child(81):before { animation-delay: 0s, -1.215s; }

.particle:nth-child(82) { transform: translate3d(-12.12879px, -259.47154px, -11.28783px); color: #FFF; }

.particle:nth-child(82):before { animation-delay: 0s, -1.23s; }

.particle:nth-child(83) { transform: translate3d(-15.33656px, 45.58731px, -255.5124px); color: #FFF; }

.particle:nth-child(83):before { animation-delay: 0s, -1.245s; }

.particle:nth-child(84) { transform: translate3d(91.8304px, 243.24224px, 0.62585px); color: #FFF; }

.particle:nth-child(84):before { animation-delay: 0s, -1.26s; }

.particle:nth-child(85) { transform: translate3d(-216.79164px, 93.93417px, 108.52536px); color: #FFF; }

.particle:nth-child(85):before { animation-delay: 0s, -1.275s; }

.particle:nth-child(86) { transform: translate3d(-243.38157px, 85.80453px, -31.67007px); color: #FFF; }

.particle:nth-child(86):before { animation-delay: 0s, -1.29s; }

.particle:nth-child(87) { transform: translate3d(54.53386px, -230.65885px, -106.87635px); color: #FFF; }

.particle:nth-child(87):before { animation-delay: 0s, -1.305s; }

.particle:nth-child(88) { transform: translate3d(57.42806px, -232.90682px, 100.28175px); color: #FFF; }

.particle:nth-child(88):before { animation-delay: 0s, -1.32s; }

.particle:nth-child(89) { transform: translate3d(-50.32185px, -254.98001px, -7.27372px); color: #FFF; }

.particle:nth-child(89):before { animation-delay: 0s, -1.335s; }

.particle:nth-child(90) { transform: translate3d(124.52903px, 191.2504px, -124.56246px); color: #FFF; }

.particle:nth-child(90):before { animation-delay: 0s, -1.35s; }

.particle:nth-child(91) { transform: translate3d(-69.5724px, -250.45629px, 5.59706px); color: #FFF; }

.particle:nth-child(91):before { animation-delay: 0s, -1.365s; }

.particle:nth-child(92) { transform: translate3d(-11.19138px, 251.16251px, 66.27326px); color: #FFF; }

.particle:nth-child(92):before { animation-delay: 0s, -1.38s; }

.particle:nth-child(93) { transform: translate3d(27.07622px, 244.09585px, -85.34691px); color: #FFF; }

.particle:nth-child(93):before { animation-delay: 0s, -1.395s; }

.particle:nth-child(94) { transform: translate3d(170.89669px, -140.40076px, -136.68192px); color: #FFF; }

.particle:nth-child(94):before { animation-delay: 0s, -1.41s; }

.particle:nth-child(95) { transform: translate3d(132.99213px, 218.6338px, -45.96035px); color: #FFF; }

.particle:nth-child(95):before { animation-delay: 0s, -1.425s; }

.particle:nth-child(96) { transform: translate3d(182.42615px, -83.14377px, -165.55305px); color: #FFF; }

.particle:nth-child(96):before { animation-delay: 0s, -1.44s; }

.particle:nth-child(97) { transform: translate3d(-87.1922px, -242.57126px, -34.01037px); color: #FFF; }

.particle:nth-child(97):before { animation-delay: 0s, -1.455s; }

.particle:nth-child(98) { transform: translate3d(-212.86359px, 141.50791px, 47.58786px); color: #FFF; }

.particle:nth-child(98):before { animation-delay: 0s, -1.47s; }

.particle:nth-child(99) { transform: translate3d(137.06912px, -172.84145px, 137.61501px); color: #FFF; }

.particle:nth-child(99):before { animation-delay: 0s, -1.485s; }

.particle:nth-child(100) { transform: translate3d(257.63037px, -10.04236px, -33.55211px); color: #FFF; }

.particle:nth-child(100):before { animation-delay: 0s, -1.5s; }

.particle:nth-child(101) { transform: translate3d(-217.27518px, 70.28435px, -124.3045px); color: #FFF; }

.particle:nth-child(101):before { animation-delay: 0s, -1.515s; }

.particle:nth-child(102) { transform: translate3d(69.75642px, 110.16119px, 224.94123px); color: #FFF; }

.particle:nth-child(102):before { animation-delay: 0s, -1.53s; }

.particle:nth-child(103) { transform: translate3d(-171.73975px, -135.97834px, 140.05482px); color: #FFF; }

.particle:nth-child(103):before { animation-delay: 0s, -1.545s; }

.particle:nth-child(104) { transform: translate3d(38.64098px, 217.90961px, 136.46347px); color: #FFF; }

.particle:nth-child(104):before { animation-delay: 0s, -1.56s; }

.particle:nth-child(105) { transform: translate3d(244.57494px, -7.67711px, -87.88722px); color: #FFF; }

.particle:nth-child(105):before { animation-delay: 0s, -1.575s; }

.particle:nth-child(106) { transform: translate3d(-234.27594px, 108.615px, -30.29131px); color: #FFF; }

.particle:nth-child(106):before { animation-delay: 0s, -1.59s; }

.particle:nth-child(107) { transform: translate3d(96.98775px, 160.97748px, -179.66532px); color: #FFF; }

.particle:nth-child(107):before { animation-delay: 0s, -1.605s; }

.particle:nth-child(108) { transform: translate3d(-132.29125px, 121.9683px, 187.67728px); color: #FFF; }

.particle:nth-child(108):before { animation-delay: 0s, -1.62s; }

.particle:nth-child(109) { transform: translate3d(29.50035px, -251.37899px, -59.48389px); color: #FFF; }

.particle:nth-child(109):before { animation-delay: 0s, -1.635s; }

.particle:nth-child(110) { transform: translate3d(-19.97981px, -254.52698px, -49.16121px); color: #FFF; }

.particle:nth-child(110):before { animation-delay: 0s, -1.65s; }

.particle:nth-child(111) { transform: translate3d(39.33468px, -202.16059px, 158.69429px); color: #FFF; }

.particle:nth-child(111):before { animation-delay: 0s, -1.665s; }

.particle:nth-child(112) { transform: translate3d(-233.34864px, 24.15849px, 112.09273px); color: #FFF; }

.particle:nth-child(112):before { animation-delay: 0s, -1.68s; }

.particle:nth-child(113) { transform: translate3d(3.95346px, 259.58353px, -14.169px); color: #FFF; }

.particle:nth-child(113):before { animation-delay: 0s, -1.695s; }

.particle:nth-child(114) { transform: translate3d(-47.28701px, 109.31488px, -231.11511px); color: #FFF; }

.particle:nth-child(114):before { animation-delay: 0s, -1.71s; }

.particle:nth-child(115) { transform: translate3d(81.78739px, 98.04211px, -226.49187px); color: #FFF; }

.particle:nth-child(115):before { animation-delay: 0s, -1.725s; }

.particle:nth-child(116) { transform: translate3d(-211.5167px, 39.78699px, -145.86871px); color: #FFF; }

.particle:nth-child(116):before { animation-delay: 0s, -1.74s; }

.particle:nth-child(117) { transform: translate3d(-23.69345px, 258.84087px, -6.32644px); color: #FFF; }

.particle:nth-child(117):before { animation-delay: 0s, -1.755s; }

.particle:nth-child(118) { transform: translate3d(-8.68499px, 223.19137px, -133.07961px); color: #FFF; }

.particle:nth-child(118):before { animation-delay: 0s, -1.77s; }

.particle:nth-child(119) { transform: translate3d(203.88744px, -114.19353px, -113.97259px); color: #FFF; }

.particle:nth-child(119):before { animation-delay: 0s, -1.785s; }

.particle:nth-child(120) { transform: translate3d(195.74006px, 169.02509px, 26.76469px); color: #FFF; }

.particle:nth-child(120):before { animation-delay: 0s, -1.8s; }

.particle:nth-child(121) { transform: translate3d(-28.53822px, 234.5479px, -108.50278px); color: #FFF; }

.particle:nth-child(121):before { animation-delay: 0s, -1.815s; }

.particle:nth-child(122) { transform: translate3d(-164.24567px, 2.05918px, 201.54185px); color: #FFF; }

.particle:nth-child(122):before { animation-delay: 0s, -1.83s; }

.particle:nth-child(123) { transform: translate3d(-23.75209px, 176.01215px, -189.88302px); color: #FFF; }

.particle:nth-child(123):before { animation-delay: 0s, -1.845s; }

.particle:nth-child(124) { transform: translate3d(74.89415px, -245.10394px, 43.75984px); color: #FFF; }

.particle:nth-child(124):before { animation-delay: 0s, -1.86s; }

.particle:nth-child(125) { transform: translate3d(82.56664px, 212.49282px, 125.0182px); color: #FFF; }

.particle:nth-child(125):before { animation-delay: 0s, -1.875s; }

.particle:nth-child(126) { transform: translate3d(-85.66285px, 66.15736px, -236.40025px); color: #FFF; }

.particle:nth-child(126):before { animation-delay: 0s, -1.89s; }

.particle:nth-child(127) { transform: translate3d(92.8081px, 209.59953px, 122.69756px); color: #FFF; }

.particle:nth-child(127):before { animation-delay: 0s, -1.905s; }

.particle:nth-child(128) { transform: translate3d(103.59535px, -131.23264px, -199.11303px); color: #FFF; }

.particle:nth-child(128):before { animation-delay: 0s, -1.92s; }

.particle:nth-child(129) { transform: translate3d(181.43194px, 179.10408px, 51.03119px); color: #FFF; }

.particle:nth-child(129):before { animation-delay: 0s, -1.935s; }

.particle:nth-child(130) { transform: translate3d(-223.76266px, -116.45804px, 62.99044px); color: #FFF; }

.particle:nth-child(130):before { animation-delay: 0s, -1.95s; }

.particle:nth-child(131) { transform: translate3d(-227.83412px, -124.90843px, 9.46042px); color: #FFF; }

.particle:nth-child(131):before { animation-delay: 0s, -1.965s; }

.particle:nth-child(132) { transform: translate3d(-45.17378px, -182.8702px, -179.21445px); color: #FFF; }

.particle:nth-child(132):before { animation-delay: 0s, -1.98s; }

.particle:nth-child(133) { transform: translate3d(-228.77075px, -123.52966px, -2.0893px); color: #FFF; }

.particle:nth-child(133):before { animation-delay: 0s, -1.995s; }

.particle:nth-child(134) { transform: translate3d(12.81406px, 259.64623px, 4.4314px); color: #FFF; }

.particle:nth-child(134):before { animation-delay: 0s, -2.01s; }

.particle:nth-child(135) { transform: translate3d(240.38633px, -16.64715px, 97.65903px); color: #FFF; }

.particle:nth-child(135):before { animation-delay: 0s, -2.025s; }

.particle:nth-child(136) { transform: translate3d(-131.83483px, -66.36069px, -214.04634px); color: #FFF; }

.particle:nth-child(136):before { animation-delay: 0s, -2.04s; }

.particle:nth-child(137) { transform: translate3d(164.85512px, -134.91775px, 149.06371px); color: #FFF; }

.particle:nth-child(137):before { animation-delay: 0s, -2.055s; }

.particle:nth-child(138) { transform: translate3d(-170.15062px, 173.43295px, -92.5731px); color: #FFF; }

.particle:nth-child(138):before { animation-delay: 0s, -2.07s; }

.particle:nth-child(139) { transform: translate3d(-15.46233px, -244.34298px, -87.50671px); color: #FFF; }

.particle:nth-child(139):before { animation-delay: 0s, -2.085s; }

.particle:nth-child(140) { transform: translate3d(-47.17838px, -248.37815px, 60.68358px); color: #FFF; }

.particle:nth-child(140):before { animation-delay: 0s, -2.1s; }

.particle:nth-child(141) { transform: translate3d(-142.0406px, -65.2953px, 207.75224px); color: #FFF; }

.particle:nth-child(141):before { animation-delay: 0s, -2.115s; }

.particle:nth-child(142) { transform: translate3d(164.55989px, 188.56367px, 70.45414px); color: #FFF; }

.particle:nth-child(142):before { animation-delay: 0s, -2.13s; }

.particle:nth-child(143) { transform: translate3d(-57.10452px, -250.5163px, 39.75752px); color: #FFF; }

.particle:nth-child(143):before { animation-delay: 0s, -2.145s; }

.particle:nth-child(144) { transform: translate3d(-65.09603px, -251.30273px, 14.47222px); color: #FFF; }

.particle:nth-child(144):before { animation-delay: 0s, -2.16s; }

.particle:nth-child(145) { transform: translate3d(-164.05798px, -110.52978px, 168.72506px); color: #FFF; }

.particle:nth-child(145):before { animation-delay: 0s, -2.175s; }

.particle:nth-child(146) { transform: translate3d(-44.82562px, 254.4686px, 28.92054px); color: #FFF; }

.particle:nth-child(146):before { animation-delay: 0s, -2.19s; }

.particle:nth-child(147) { transform: translate3d(-78.6556px, 51.82118px, 242.33832px); color: #FFF; }

.particle:nth-child(147):before { animation-delay: 0s, -2.205s; }

.particle:nth-child(148) { transform: translate3d(123.70865px, -227.83027px, 19.73669px); color: #FFF; }

.particle:nth-child(148):before { animation-delay: 0s, -2.22s; }

.particle:nth-child(149) { transform: translate3d(69.10885px, 97.21169px, 231.02782px); color: #FFF; }

.particle:nth-child(149):before { animation-delay: 0s, -2.235s; }

.particle:nth-child(150) { transform: translate3d(199.6497px, 109.33283px, -125.64366px); color: #FFF; }

.particle:nth-child(150):before { animation-delay: 0s, -2.25s; }

.particle:nth-child(151) { transform: translate3d(-210.78894px, 151.26462px, 16.94217px); color: #FFF; }

.particle:nth-child(151):before { animation-delay: 0s, -2.265s; }

.particle:nth-child(152) { transform: translate3d(131.47112px, 146.17663px, 170.14034px); color: #FFF; }

.particle:nth-child(152):before { animation-delay: 0s, -2.28s; }

.particle:nth-child(153) { transform: translate3d(0.89692px, 259.99831px, -0.27335px); color: #FFF; }

.particle:nth-child(153):before { animation-delay: 0s, -2.295s; }

.particle:nth-child(154) { transform: translate3d(97.80886px, -218.84995px, 100.68826px); color: #FFF; }

.particle:nth-child(154):before { animation-delay: 0s, -2.31s; }

.particle:nth-child(155) { transform: translate3d(-207.27293px, -156.78942px, -7.41678px); color: #FFF; }

.particle:nth-child(155):before { animation-delay: 0s, -2.325s; }

.particle:nth-child(156) { transform: translate3d(21.37365px, 256.82124px, 34.43865px); color: #FFF; }

.particle:nth-child(156):before { animation-delay: 0s, -2.34s; }

.particle:nth-child(157) { transform: translate3d(2.50272px, -256.07997px, -44.90865px); color: #FFF; }

.particle:nth-child(157):before { animation-delay: 0s, -2.355s; }

.particle:nth-child(158) { transform: translate3d(-74.01748px, -248.35348px, 21.02294px); color: #FFF; }

.particle:nth-child(158):before { animation-delay: 0s, -2.37s; }

.particle:nth-child(159) { transform: translate3d(173.8931px, -129.28919px, -143.68541px); color: #FFF; }

.particle:nth-child(159):before { animation-delay: 0s, -2.385s; }

.particle:nth-child(160) { transform: translate3d(9.74864px, -252.55794px, 60.98732px); color: #FFF; }

.particle:nth-child(160):before { animation-delay: 0s, -2.4s; }

.particle:nth-child(161) { transform: translate3d(225.67432px, -117.51353px, -53.49459px); color: #FFF; }

.particle:nth-child(161):before { animation-delay: 0s, -2.415s; }

.particle:nth-child(162) { transform: translate3d(89.73888px, 241.79541px, -32.89244px); color: #FFF; }

.particle:nth-child(162):before { animation-delay: 0s, -2.43s; }

.particle:nth-child(163) { transform: translate3d(-219.37663px, 10.88707px, 139.12357px); color: #FFF; }

.particle:nth-child(163):before { animation-delay: 0s, -2.445s; }

.particle:nth-child(164) { transform: translate3d(70.66065px, -169.67361px, 183.89654px); color: #FFF; }

.particle:nth-child(164):before { animation-delay: 0s, -2.46s; }

.particle:nth-child(165) { transform: translate3d(-219.33114px, -75.52314px, 117.43127px); color: #FFF; }

.particle:nth-child(165):before { animation-delay: 0s, -2.475s; }

.particle:nth-child(166) { transform: translate3d(186.18436px, 53.50341px, -173.41502px); color: #FFF; }

.particle:nth-child(166):before { animation-delay: 0s, -2.49s; }

.particle:nth-child(167) { transform: translate3d(-5.00978px, 257.04738px, 38.74976px); color: #FFF; }

.particle:nth-child(167):before { animation-delay: 0s, -2.505s; }

.particle:nth-child(168) { transform: translate3d(212.69373px, -84.03906px, 123.68837px); color: #FFF; }

.particle:nth-child(168):before { animation-delay: 0s, -2.52s; }

.particle:nth-child(169) { transform: translate3d(32.21575px, 88.74278px, 242.25372px); color: #FFF; }

.particle:nth-child(169):before { animation-delay: 0s, -2.535s; }

.particle:nth-child(170) { transform: translate3d(-197.03259px, -141.90278px, 92.96106px); color: #FFF; }

.particle:nth-child(170):before { animation-delay: 0s, -2.55s; }

.particle:nth-child(171) { transform: translate3d(234.10858px, -77.16821px, -82.69363px); color: #FFF; }

.particle:nth-child(171):before { animation-delay: 0s, -2.565s; }

.particle:nth-child(172) { transform: translate3d(-57.76135px, -24.47762px, -252.3182px); color: #FFF; }

.particle:nth-child(172):before { animation-delay: 0s, -2.58s; }

.particle:nth-child(173) { transform: translate3d(131.44455px, 180.45088px, -133.26593px); color: #FFF; }

.particle:nth-child(173):before { animation-delay: 0s, -2.595s; }

.particle:nth-child(174) { transform: translate3d(-256.79732px, -39.81197px, 8.37514px); color: #FFF; }

.particle:nth-child(174):before { animation-delay: 0s, -2.61s; }

.particle:nth-child(175) { transform: translate3d(-252.92881px, -55.10675px, -24.2953px); color: #FFF; }

.particle:nth-child(175):before { animation-delay: 0s, -2.625s; }

.particle:nth-child(176) { transform: translate3d(83.04021px, 183.52145px, -164.3904px); color: #FFF; }

.particle:nth-child(176):before { animation-delay: 0s, -2.64s; }

.particle:nth-child(177) { transform: translate3d(-114.26547px, 193.49449px, -130.77953px); color: #FFF; }

.particle:nth-child(177):before { animation-delay: 0s, -2.655s; }

.particle:nth-child(178) { transform: translate3d(152.69292px, -15.99479px, 209.83098px); color: #FFF; }

.particle:nth-child(178):before { animation-delay: 0s, -2.67s; }

.particle:nth-child(179) { transform: translate3d(14.42891px, -149.64606px, 212.127px); color: #FFF; }

.particle:nth-child(179):before { animation-delay: 0s, -2.685s; }

.particle:nth-child(180) { transform: translate3d(234.1956px, -105.8746px, -39.28093px); color: #FFF; }

.particle:nth-child(180):before { animation-delay: 0s, -2.7s; }

.particle:nth-child(181) { transform: translate3d(74.79956px, 179.0357px, -173.06428px); color: #FFF; }

.particle:nth-child(181):before { animation-delay: 0s, -2.715s; }

.particle:nth-child(182) { transform: translate3d(-242.61008px, -72.51047px, 59.01339px); color: #FFF; }

.particle:nth-child(182):before { animation-delay: 0s, -2.73s; }

.particle:nth-child(183) { transform: translate3d(-133.64667px, -137.43049px, -175.64575px); color: #FFF; }

.particle:nth-child(183):before { animation-delay: 0s, -2.745s; }

.particle:nth-child(184) { transform: translate3d(3.09478px, -259.83082px, 8.85239px); color: #FFF; }

.particle:nth-child(184):before { animation-delay: 0s, -2.76s; }

.particle:nth-child(185) { transform: translate3d(-55.80566px, 250.05043px, -44.27767px); color: #FFF; }

.particle:nth-child(185):before { animation-delay: 0s, -2.775s; }

.particle:nth-child(186) { transform: translate3d(-155.97569px, -187.37735px, 90.33999px); color: #FFF; }

.particle:nth-child(186):before { animation-delay: 0s, -2.79s; }

.particle:nth-child(187) { transform: translate3d(-229.88656px, 44.96805px, 112.8275px); color: #FFF; }

.particle:nth-child(187):before { animation-delay: 0s, -2.805s; }

.particle:nth-child(188) { transform: translate3d(37.06992px, -183.10812px, -180.82378px); color: #FFF; }

.particle:nth-child(188):before { animation-delay: 0s, -2.82s; }

.particle:nth-child(189) { transform: translate3d(47.66684px, 106.92584px, 232.1524px); color: #FFF; }

.particle:nth-child(189):before { animation-delay: 0s, -2.835s; }

.particle:nth-child(190) { transform: translate3d(-196.27383px, -134.91221px, -104.28461px); color: #FFF; }

.particle:nth-child(190):before { animation-delay: 0s, -2.85s; }

.particle:nth-child(191) { transform: translate3d(33.28705px, -256.80005px, 23.36032px); color: #FFF; }

.particle:nth-child(191):before { animation-delay: 0s, -2.865s; }

.particle:nth-child(192) { transform: translate3d(-31.9462px, 253.17947px, 49.79557px); color: #FFF; }

.particle:nth-child(192):before { animation-delay: 0s, -2.88s; }

.particle:nth-child(193) { transform: translate3d(199.80192px, 130.36209px, 103.36789px); color: #FFF; }

.particle:nth-child(193):before { animation-delay: 0s, -2.895s; }

.particle:nth-child(194) { transform: translate3d(39.64787px, 247.56422px, 68.84767px); color: #FFF; }

.particle:nth-child(194):before { animation-delay: 0s, -2.91s; }

.particle:nth-child(195) { transform: translate3d(-5.68444px, -242.78664px, 92.85651px); color: #FFF; }

.particle:nth-child(195):before { animation-delay: 0s, -2.925s; }

.particle:nth-child(196) { transform: translate3d(84.92907px, -239.28969px, 55.92404px); color: #FFF; }

.particle:nth-child(196):before { animation-delay: 0s, -2.94s; }

.particle:nth-child(197) { transform: translate3d(66.09975px, 32.61869px, -249.3328px); color: #FFF; }

.particle:nth-child(197):before { animation-delay: 0s, -2.955s; }

.particle:nth-child(198) { transform: translate3d(51.12772px, 233.99722px, 101.14968px); color: #FFF; }

.particle:nth-child(198):before { animation-delay: 0s, -2.97s; }

.particle:nth-child(199) { transform: translate3d(-83.72355px, 233.54145px, 77.77376px); color: #FFF; }

.particle:nth-child(199):before { animation-delay: 0s, -2.985s; }

.particle:nth-child(200) { transform: translate3d(258.2559px, -29.69008px, -4.73154px); color: #FFF; }

.particle:nth-child(200):before { animation-delay: 0s, -3s; }

.particle:nth-child(201) { transform: translate3d(-95.78128px, 211.94723px, -116.20809px); color: #FFF; }

.particle:nth-child(201):before { animation-delay: 0s, -3.015s; }

.particle:nth-child(202) { transform: translate3d(-86.16869px, 229.27818px, -87.2151px); color: #FFF; }

.particle:nth-child(202):before { animation-delay: 0s, -3.03s; }

.particle:nth-child(203) { transform: translate3d(159.14815px, 193.8325px, -68.5626px); color: #FFF; }

.particle:nth-child(203):before { animation-delay: 0s, -3.045s; }

.particle:nth-child(204) { transform: translate3d(-207.84041px, -5.73866px, 156.10712px); color: #FFF; }

.particle:nth-child(204):before { animation-delay: 0s, -3.06s; }

.particle:nth-child(205) { transform: translate3d(-35.54175px, -212.82381px, 145.0614px); color: #FFF; }

.particle:nth-child(205):before { animation-delay: 0s, -3.075s; }

.particle:nth-child(206) { transform: translate3d(197.97867px, 168.53585px, 0.34011px); color: #FFF; }

.particle:nth-child(206):before { animation-delay: 0s, -3.09s; }

.particle:nth-child(207) { transform: translate3d(136.67095px, 216.4867px, 45.32729px); color: #FFF; }

.particle:nth-child(207):before { animation-delay: 0s, -3.105s; }

.particle:nth-child(208) { transform: translate3d(22.56975px, 179.95669px, -186.29599px); color: #FFF; }

.particle:nth-child(208):before { animation-delay: 0s, -3.12s; }

.particle:nth-child(209) { transform: translate3d(-163.01841px, -16.08005px, 201.90698px); color: #FFF; }

.particle:nth-child(209):before { animation-delay: 0s, -3.135s; }

.particle:nth-child(210) { transform: translate3d(210.64301px, -108.51781px, -107.0206px); color: #FFF; }

.particle:nth-child(210):before { animation-delay: 0s, -3.15s; }

.particle:nth-child(211) { transform: translate3d(215.60353px, 83.35464px, 119.02571px); color: #FFF; }

.particle:nth-child(211):before { animation-delay: 0s, -3.165s; }

.particle:nth-child(212) { transform: translate3d(-69.13752px, -95.40925px, 231.76945px); color: #FFF; }

.particle:nth-child(212):before { animation-delay: 0s, -3.18s; }

.particle:nth-child(213) { transform: translate3d(10.50447px, 258.81134px, -22.5021px); color: #FFF; }

.particle:nth-child(213):before { animation-delay: 0s, -3.195s; }

.particle:nth-child(214) { transform: translate3d(-170.34995px, -158.86863px, 115.50607px); color: #FFF; }

.particle:nth-child(214):before { animation-delay: 0s, -3.21s; }

.particle:nth-child(215) { transform: translate3d(137.40469px, -220.28089px, -14.01008px); color: #FFF; }

.particle:nth-child(215):before { animation-delay: 0s, -3.225s; }

.particle:nth-child(216) { transform: translate3d(-56.63123px, -163.21046px, -194.3071px); color: #FFF; }

.particle:nth-child(216):before { animation-delay: 0s, -3.24s; }

.particle:nth-child(217) { transform: translate3d(-184.31911px, 54.91747px, 174.95868px); color: #FFF; }

.particle:nth-child(217):before { animation-delay: 0s, -3.255s; }

.particle:nth-child(218) { transform: translate3d(149.52902px, 181.12302px, 111.51468px); color: #FFF; }

.particle:nth-child(218):before { animation-delay: 0s, -3.27s; }

.particle:nth-child(219) { transform: translate3d(59.30297px, 233.31104px, 98.22993px); color: #FFF; }

.particle:nth-child(219):before { animation-delay: 0s, -3.285s; }

.particle:nth-child(220) { transform: translate3d(17.15795px, -77.22343px, 247.67347px); color: #FFF; }

.particle:nth-child(220):before { animation-delay: 0s, -3.3s; }

.particle:nth-child(221) { transform: translate3d(-174.91573px, 28.55338px, 190.23457px); color: #FFF; }

.particle:nth-child(221):before { animation-delay: 0s, -3.315s; }

.particle:nth-child(222) { transform: translate3d(46.10244px, 195.93564px, 164.57153px); color: #FFF; }

.particle:nth-child(222):before { animation-delay: 0s, -3.33s; }

.particle:nth-child(223) { transform: translate3d(11.66242px, -227.95311px, -124.5045px); color: #FFF; }

.particle:nth-child(223):before { animation-delay: 0s, -3.345s; }

.particle:nth-child(224) { transform: translate3d(174.22855px, -142.59228px, -130.04559px); color: #FFF; }

.particle:nth-child(224):before { animation-delay: 0s, -3.36s; }

.particle:nth-child(225) { transform: translate3d(-51.46526px, -108.7516px, 230.48735px); color: #FFF; }

.particle:nth-child(225):before { animation-delay: 0s, -3.375s; }

.particle:nth-child(226) { transform: translate3d(-207.50252px, 155.02718px, 22.56714px); color: #FFF; }

.particle:nth-child(226):before { animation-delay: 0s, -3.39s; }

.particle:nth-child(227) { transform: translate3d(-64.36261px, -176.02099px, -180.20562px); color: #FFF; }

.particle:nth-child(227):before { animation-delay: 0s, -3.405s; }

.particle:nth-child(228) { transform: translate3d(-129.25947px, -219.31574px, -52.845px); color: #FFF; }

.particle:nth-child(228):before { animation-delay: 0s, -3.42s; }

.particle:nth-child(229) { transform: translate3d(-45.76512px, -159.98093px, 199.77901px); color: #FFF; }

.particle:nth-child(229):before { animation-delay: 0s, -3.435s; }

.particle:nth-child(230) { transform: translate3d(-18.16375px, -252.82685px, 57.86763px); color: #FFF; }

.particle:nth-child(230):before { animation-delay: 0s, -3.45s; }

.particle:nth-child(231) { transform: translate3d(134.99145px, 214.68606px, 57.33414px); color: #FFF; }

.particle:nth-child(231):before { animation-delay: 0s, -3.465s; }

.particle:nth-child(232) { transform: translate3d(125.41579px, 204.53055px, -100.19049px); color: #FFF; }

.particle:nth-child(232):before { animation-delay: 0s, -3.48s; }

.particle:nth-child(233) { transform: translate3d(16.01326px, -256.0384px, -42.28371px); color: #FFF; }

.particle:nth-child(233):before { animation-delay: 0s, -3.495s; }

.particle:nth-child(234) { transform: translate3d(-199.89158px, -95.14154px, 136.35045px); color: #FFF; }

.particle:nth-child(234):before { animation-delay: 0s, -3.51s; }

.particle:nth-child(235) { transform: translate3d(-197.58195px, 17.5685px, 168.08546px); color: #FFF; }

.particle:nth-child(235):before { animation-delay: 0s, -3.525s; }

.particle:nth-child(236) { transform: translate3d(193.67943px, 92.96903px, 146.44124px); color: #FFF; }

.particle:nth-child(236):before { animation-delay: 0s, -3.54s; }

.particle:nth-child(237) { transform: translate3d(-156.44408px, 120.93802px, -168.81719px); color: #FFF; }

.particle:nth-child(237):before { animation-delay: 0s, -3.555s; }

.particle:nth-child(238) { transform: translate3d(-145.46634px, -199.03796px, 82.60408px); color: #FFF; }

.particle:nth-child(238):before { animation-delay: 0s, -3.57s; }

.particle:nth-child(239) { transform: translate3d(-129.89546px, -192.6251px, -116.71651px); color: #FFF; }

.particle:nth-child(239):before { animation-delay: 0s, -3.585s; }

.particle:nth-child(240) { transform: translate3d(-235.40508px, -47.55531px, -99.61395px); color: #FFF; }

.particle:nth-child(240):before { animation-delay: 0s, -3.6s; }

.particle:nth-child(241) { transform: translate3d(-6.15336px, -259.72835px, -10.16477px); color: #FFF; }

.particle:nth-child(241):before { animation-delay: 0s, -3.615s; }

.particle:nth-child(242) { transform: translate3d(-53.87105px, -130.7377px, 218.18699px); color: #FFF; }

.particle:nth-child(242):before { animation-delay: 0s, -3.63s; }

.particle:nth-child(243) { transform: translate3d(-134.46506px, -40.46894px, -218.81822px); color: #FFF; }

.particle:nth-child(243):before { animation-delay: 0s, -3.645s; }

.particle:nth-child(244) { transform: translate3d(-162.86004px, -122.59161px, -161.39363px); color: #FFF; }

.particle:nth-child(244):before { animation-delay: 0s, -3.66s; }

.particle:nth-child(245) { transform: translate3d(-9.26013px, -259.6682px, 9.31001px); color: #FFF; }

.particle:nth-child(245):before { animation-delay: 0s, -3.675s; }

.particle:nth-child(246) { transform: translate3d(-19.9191px, 255.03356px, -46.48779px); color: #FFF; }

.particle:nth-child(246):before { animation-delay: 0s, -3.69s; }

.particle:nth-child(247) { transform: translate3d(-10.40241px, 246.00353px, 83.51079px); color: #FFF; }

.particle:nth-child(247):before { animation-delay: 0s, -3.705s; }

.particle:nth-child(248) { transform: translate3d(-218.15609px, 114.19688px, -83.46851px); color: #FFF; }

.particle:nth-child(248):before { animation-delay: 0s, -3.72s; }

.particle:nth-child(249) { transform: translate3d(-143.07947px, 135.01676px, -169.9963px); color: #FFF; }

.particle:nth-child(249):before { animation-delay: 0s, -3.735s; }

.particle:nth-child(250) { transform: translate3d(-44.39503px, 189.03067px, -172.90601px); color: #FFF; }

.particle:nth-child(250):before { animation-delay: 0s, -3.75s; }

.particle:nth-child(251) { transform: translate3d(55.09606px, -253.79312px, 12.38862px); color: #FFF; }

.particle:nth-child(251):before { animation-delay: 0s, -3.765s; }

.particle:nth-child(252) { transform: translate3d(68.56155px, 2.98908px, 250.77954px); color: #FFF; }

.particle:nth-child(252):before { animation-delay: 0s, -3.78s; }

.particle:nth-child(253) { transform: translate3d(-14.87447px, 254.75821px, -49.76949px); color: #FFF; }

.particle:nth-child(253):before { animation-delay: 0s, -3.795s; }

.particle:nth-child(254) { transform: translate3d(145.70754px, -211.15027px, 42.2478px); color: #FFF; }

.particle:nth-child(254):before { animation-delay: 0s, -3.81s; }

.particle:nth-child(255) { transform: translate3d(89.32656px, 228.99737px, -84.74061px); color: #FFF; }

.particle:nth-child(255):before { animation-delay: 0s, -3.825s; }

.particle:nth-child(256) { transform: translate3d(-23.98185px, 258.7567px, 8.35725px); color: #FFF; }

.particle:nth-child(256):before { animation-delay: 0s, -3.84s; }

.particle:nth-child(257) { transform: translate3d(-72.63032px, -245.98932px, -42.59214px); color: #FFF; }

.particle:nth-child(257):before { animation-delay: 0s, -3.855s; }

.particle:nth-child(258) { transform: translate3d(2.9161px, 258.80882px, 24.68789px); color: #FFF; }

.particle:nth-child(258):before { animation-delay: 0s, -3.87s; }

.particle:nth-child(259) { transform: translate3d(255.30021px, -33.05618px, -36.45673px); color: #FFF; }

.particle:nth-child(259):before { animation-delay: 0s, -3.885s; }

.particle:nth-child(260) { transform: translate3d(5.77507px, 259.84588px, -6.83863px); color: #FFF; }

.particle:nth-child(260):before { animation-delay: 0s, -3.9s; }

.particle:nth-child(261) { transform: translate3d(-32.29103px, 215.37823px, -142.0194px); color: #FFF; }

.particle:nth-child(261):before { animation-delay: 0s, -3.915s; }

.particle:nth-child(262) { transform: translate3d(-99.22733px, -164.32612px, -175.35923px); color: #FFF; }

.particle:nth-child(262):before { animation-delay: 0s, -3.93s; }

.particle:nth-child(263) { transform: translate3d(-26.67209px, -258.43911px, -9.89077px); color: #FFF; }

.particle:nth-child(263):before { animation-delay: 0s, -3.945s; }

.particle:nth-child(264) { transform: translate3d(71.16507px, 248.98322px, 23.29998px); color: #FFF; }

.particle:nth-child(264):before { animation-delay: 0s, -3.96s; }

.particle:nth-child(265) { transform: translate3d(-194.82301px, -97.08271px, 142.19332px); color: #FFF; }

.particle:nth-child(265):before { animation-delay: 0s, -3.975s; }

.particle:nth-child(266) { transform: translate3d(161.58827px, -133.45116px, 153.88313px); color: #FFF; }

.particle:nth-child(266):before { animation-delay: 0s, -3.99s; }

.particle:nth-child(267) { transform: translate3d(19.41873px, -258.74877px, 16.49202px); color: #FFF; }

.particle:nth-child(267):before { animation-delay: 0s, -4.005s; }

.particle:nth-child(268) { transform: translate3d(98.88163px, 224.20969px, 86.90477px); color: #FFF; }

.particle:nth-child(268):before { animation-delay: 0s, -4.02s; }

.particle:nth-child(269) { transform: translate3d(141.64555px, 17.61245px, -217.31622px); color: #FFF; }

.particle:nth-child(269):before { animation-delay: 0s, -4.035s; }

.particle:nth-child(270) { transform: translate3d(-113.96207px, 68.33295px, -223.47988px); color: #FFF; }

.particle:nth-child(270):before { animation-delay: 0s, -4.05s; }

.particle:nth-child(271) { transform: translate3d(6.37762px, -259.89669px, 3.61055px); color: #FFF; }

.particle:nth-child(271):before { animation-delay: 0s, -4.065s; }

.particle:nth-child(272) { transform: translate3d(18.38359px, 45.79853px, -255.27346px); color: #FFF; }

.particle:nth-child(272):before { animation-delay: 0s, -4.08s; }

.particle:nth-child(273) { transform: translate3d(255.28253px, 42.85449px, 24.37877px); color: #FFF; }

.particle:nth-child(273):before { animation-delay: 0s, -4.095s; }

.particle:nth-child(274) { transform: translate3d(31.98293px, -117.42275px, -229.75855px); color: #FFF; }

.particle:nth-child(274):before { animation-delay: 0s, -4.11s; }

.particle:nth-child(275) { transform: translate3d(209.14401px, 152.85116px, -22.25543px); color: #FFF; }

.particle:nth-child(275):before { animation-delay: 0s, -4.125s; }

.particle:nth-child(276) { transform: translate3d(119.19292px, 209.906px, 96.60496px); color: #FFF; }

.particle:nth-child(276):before { animation-delay: 0s, -4.14s; }

.particle:nth-child(277) { transform: translate3d(0.0052px, 260.0px, -0.00053px); color: #FFF; }

.particle:nth-child(277):before { animation-delay: 0s, -4.155s; }

.particle:nth-child(278) { transform: translate3d(-7.79676px, -253.33724px, -57.96081px); color: #FFF; }

.particle:nth-child(278):before { animation-delay: 0s, -4.17s; }

.particle:nth-child(279) { transform: translate3d(-180.24179px, 0.47324px, -187.38376px); color: #FFF; }

.particle:nth-child(279):before { animation-delay: 0s, -4.185s; }

.particle:nth-child(280) { transform: translate3d(187.57328px, -159.31618px, 83.87264px); color: #FFF; }

.particle:nth-child(280):before { animation-delay: 0s, -4.2s; }

.particle:nth-child(281) { transform: translate3d(-237.75098px, 27.38958px, -101.60847px); color: #FFF; }

.particle:nth-child(281):before { animation-delay: 0s, -4.215s; }

.particle:nth-child(282) { transform: translate3d(7.30505px, -246.56407px, -82.17538px); color: #FFF; }

.particle:nth-child(282):before { animation-delay: 0s, -4.23s; }

.particle:nth-child(283) { transform: translate3d(-144.25102px, -98.12553px, 192.77713px); color: #FFF; }

.particle:nth-child(283):before { animation-delay: 0s, -4.245s; }

.particle:nth-child(284) { transform: translate3d(11.35969px, -244.50368px, 87.68643px); color: #FFF; }

.particle:nth-child(284):before { animation-delay: 0s, -4.26s; }

.particle:nth-child(285) { transform: translate3d(18.36298px, -77.53102px, -247.49089px); color: #FFF; }

.particle:nth-child(285):before { animation-delay: 0s, -4.275s; }

.particle:nth-child(286) { transform: translate3d(59.09643px, -9.31068px, -253.02356px); color: #FFF; }

.particle:nth-child(286):before { animation-delay: 0s, -4.29s; }

.particle:nth-child(287) { transform: translate3d(238.68413px, 98.13326px, -31.61883px); color: #FFF; }

.particle:nth-child(287):before { animation-delay: 0s, -4.305s; }

.particle:nth-child(288) { transform: translate3d(120.64055px, 213.20115px, 87.12706px); color: #FFF; }

.particle:nth-child(288):before { animation-delay: 0s, -4.32s; }

.particle:nth-child(289) { transform: translate3d(53.31603px, -253.95677px, -16.22834px); color: #FFF; }

.particle:nth-child(289):before { animation-delay: 0s, -4.335s; }

.particle:nth-child(290) { transform: translate3d(-1.19237px, 259.90563px, 6.90234px); color: #FFF; }

.particle:nth-child(290):before { animation-delay: 0s, -4.35s; }

.particle:nth-child(291) { transform: translate3d(146.94592px, 102.46502px, -188.43518px); color: #FFF; }

.particle:nth-child(291):before { animation-delay: 0s, -4.365s; }

.particle:nth-child(292) { transform: translate3d(-227.03097px, -77.14982px, -100.52285px); color: #FFF; }

.particle:nth-child(292):before { animation-delay: 0s, -4.38s; }

.particle:nth-child(293) { transform: translate3d(227.46632px, 95.52903px, 82.05654px); color: #FFF; }

.particle:nth-child(293):before { animation-delay: 0s, -4.395s; }

.particle:nth-child(294) { transform: translate3d(-49.3684px, -142.20909px, 211.989px); color: #FFF; }

.particle:nth-child(294):before { animation-delay: 0s, -4.41s; }

.particle:nth-child(295) { transform: translate3d(-83.86329px, 244.84014px, 24.90487px); color: #FFF; }

.particle:nth-child(295):before { animation-delay: 0s, -4.425s; }

.particle:nth-child(296) { transform: translate3d(67.63892px, 201.69945px, 149.47344px); color: #FFF; }

.particle:nth-child(296):before { animation-delay: 0s, -4.44s; }

.particle:nth-child(297) { transform: translate3d(-210.81332px, 77.32583px, -131.06663px); color: #FFF; }

.particle:nth-child(297):before { animation-delay: 0s, -4.455s; }

.particle:nth-child(298) { transform: translate3d(-141.34308px, -216.09352px, -30.42569px); color: #FFF; }

.particle:nth-child(298):before { animation-delay: 0s, -4.47s; }

.particle:nth-child(299) { transform: translate3d(-7.10636px, -233.69549px, 113.73618px); color: #FFF; }

.particle:nth-child(299):before { animation-delay: 0s, -4.485s; }

.particle:nth-child(300) { transform: translate3d(-111.12988px, 230.08166px, 48.08929px); color: #FFF; }

.particle:nth-child(300):before { animation-delay: 0s, -4.5s; }

.particle:nth-child(301) { transform: translate3d(-47.09994px, 248.21418px, -61.41103px); color: #FFF; }

.particle:nth-child(301):before { animation-delay: 0s, -4.515s; }

.particle:nth-child(302) { transform: translate3d(125.78862px, -226.82506px, 18.10016px); color: #FFF; }

.particle:nth-child(302):before { animation-delay: 0s, -4.53s; }

.particle:nth-child(303) { transform: translate3d(185.06099px, -23.42301px, -181.11817px); color: #FFF; }

.particle:nth-child(303):before { animation-delay: 0s, -4.545s; }

.particle:nth-child(304) { transform: translate3d(-58.13004px, -153.63328px, 201.53836px); color: #FFF; }

.particle:nth-child(304):before { animation-delay: 0s, -4.56s; }

.particle:nth-child(305) { transform: translate3d(-232.32121px, -39.88446px, 109.7091px); color: #FFF; }

.particle:nth-child(305):before { animation-delay: 0s, -4.575s; }

.particle:nth-child(306) { transform: translate3d(151.02995px, -208.15381px, 38.23541px); color: #FFF; }

.particle:nth-child(306):before { animation-delay: 0s, -4.59s; }

.particle:nth-child(307) { transform: translate3d(230.21311px, 77.6754px, -92.56596px); color: #FFF; }

.particle:nth-child(307):before { animation-delay: 0s, -4.605s; }

.particle:nth-child(308) { transform: translate3d(-76.44485px, 222.85932px, -109.95411px); color: #FFF; }

.particle:nth-child(308):before { animation-delay: 0s, -4.62s; }

.particle:nth-child(309) { transform: translate3d(251.49117px, -14.54677px, -64.34737px); color: #FFF; }

.particle:nth-child(309):before { animation-delay: 0s, -4.635s; }

.particle:nth-child(310) { transform: translate3d(-53.91613px, -244.46846px, 70.20132px); color: #FFF; }

.particle:nth-child(310):before { animation-delay: 0s, -4.65s; }

.particle:nth-child(311) { transform: translate3d(111.076px, -91.98075px, -216.33692px); color: #FFF; }

.particle:nth-child(311):before { animation-delay: 0s, -4.665s; }

.particle:nth-child(312) { transform: translate3d(-242.42352px, 25.90473px, 90.3315px); color: #FFF; }

.particle:nth-child(312):before { animation-delay: 0s, -4.68s; }

.particle:nth-child(313) { transform: translate3d(-179.49099px, 144.31097px, -120.65376px); color: #FFF; }

.particle:nth-child(313):before { animation-delay: 0s, -4.695s; }

.particle:nth-child(314) { transform: translate3d(2.65434px, 259.42965px, -17.00628px); color: #FFF; }

.particle:nth-child(314):before { animation-delay: 0s, -4.71s; }

.particle:nth-child(315) { transform: translate3d(-189.90755px, 122.98685px, -128.09901px); color: #FFF; }

.particle:nth-child(315):before { animation-delay: 0s, -4.725s; }

.particle:nth-child(316) { transform: translate3d(19.1023px, -228.3196px, -122.90347px); color: #FFF; }

.particle:nth-child(316):before { animation-delay: 0s, -4.74s; }

.particle:nth-child(317) { transform: translate3d(193.72349px, 143.06488px, 97.99821px); color: #FFF; }

.particle:nth-child(317):before { animation-delay: 0s, -4.755s; }

.particle:nth-child(318) { transform: translate3d(8.2837px, -258.03061px, -30.84772px); color: #FFF; }

.particle:nth-child(318):before { animation-delay: 0s, -4.77s; }

.particle:nth-child(319) { transform: translate3d(-138.65629px, -188.12874px, 113.93863px); color: #FFF; }

.particle:nth-child(319):before { animation-delay: 0s, -4.785s; }

.particle:nth-child(320) { transform: translate3d(-259.56323px, -15.06418px, 0.02116px); color: #FFF; }

.particle:nth-child(320):before { animation-delay: 0s, -4.8s; }

.particle:nth-child(321) { transform: translate3d(-202.18793px, -66.85483px, 149.16592px); color: #FFF; }

.particle:nth-child(321):before { animation-delay: 0s, -4.815s; }

.particle:nth-child(322) { transform: translate3d(-201.89773px, 62.98067px, -151.23076px); color: #FFF; }

.particle:nth-child(322):before { animation-delay: 0s, -4.83s; }

.particle:nth-child(323) { transform: translate3d(118.19209px, 137.86495px, 186.07495px); color: #FFF; }

.particle:nth-child(323):before { animation-delay: 0s, -4.845s; }

.particle:nth-child(324) { transform: translate3d(103.25535px, 4.19012px, -238.58075px); color: #FFF; }

.particle:nth-child(324):before { animation-delay: 0s, -4.86s; }

.particle:nth-child(325) { transform: translate3d(97.54384px, 240.34733px, 17.84261px); color: #FFF; }

.particle:nth-child(325):before { animation-delay: 0s, -4.875s; }

.particle:nth-child(326) { transform: translate3d(255.5361px, -15.65825px, -45.34448px); color: #FFF; }

.particle:nth-child(326):before { animation-delay: 0s, -4.89s; }

.particle:nth-child(327) { transform: translate3d(-153.3836px, 169.19602px, -124.28265px); color: #FFF; }

.particle:nth-child(327):before { animation-delay: 0s, -4.905s; }

.particle:nth-child(328) { transform: translate3d(71.52617px, -47.16056px, -245.4789px); color: #FFF; }

.particle:nth-child(328):before { animation-delay: 0s, -4.92s; }

.particle:nth-child(329) { transform: translate3d(-51.36078px, -188.63287px, -171.40511px); color: #FFF; }

.particle:nth-child(329):before { animation-delay: 0s, -4.935s; }

.particle:nth-child(330) { transform: translate3d(90.11603px, 67.11998px, 234.46537px); color: #FFF; }

.particle:nth-child(330):before { animation-delay: 0s, -4.95s; }

.particle:nth-child(331) { transform: translate3d(40.14117px, -255.15732px, -29.72252px); color: #FFF; }

.particle:nth-child(331):before { animation-delay: 0s, -4.965s; }

.particle:nth-child(332) { transform: translate3d(9.89777px, -233.19217px, -114.55761px); color: #FFF; }

.particle:nth-child(332):before { animation-delay: 0s, -4.98s; }

.particle:nth-child(333) { transform: translate3d(-32.47261px, -257.89944px, -5.78011px); color: #FFF; }

.particle:nth-child(333):before { animation-delay: 0s, -4.995s; }

.particle:nth-child(334) { transform: translate3d(-216.42271px, 118.42775px, 82.07362px); color: #FFF; }

.particle:nth-child(334):before { animation-delay: 0s, -5.01s; }

.particle:nth-child(335) { transform: translate3d(94.28056px, 234.76098px, -59.98713px); color: #FFF; }

.particle:nth-child(335):before { animation-delay: 0s, -5.025s; }

.particle:nth-child(336) { transform: translate3d(-220.21613px, -112.47929px, 80.33224px); color: #FFF; }

.particle:nth-child(336):before { animation-delay: 0s, -5.04s; }

.particle:nth-child(337) { transform: translate3d(-193.27802px, 131.4804px, 113.82668px); color: #FFF; }

.particle:nth-child(337):before { animation-delay: 0s, -5.055s; }

.particle:nth-child(338) { transform: translate3d(17.5129px, 252.07222px, 61.26088px); color: #FFF; }

.particle:nth-child(338):before { animation-delay: 0s, -5.07s; }

.particle:nth-child(339) { transform: translate3d(110.02499px, 66.95512px, -225.85729px); color: #FFF; }

.particle:nth-child(339):before { animation-delay: 0s, -5.085s; }

.particle:nth-child(340) { transform: translate3d(-50.92231px, 243.75099px, -74.78218px); color: #FFF; }

.particle:nth-child(340):before { animation-delay: 0s, -5.1s; }

.particle:nth-child(341) { transform: translate3d(246.77863px, -80.80293px, -13.08414px); color: #FFF; }

.particle:nth-child(341):before { animation-delay: 0s, -5.115s; }

.particle:nth-child(342) { transform: translate3d(-218.22402px, -78.91493px, -117.26343px); color: #FFF; }

.particle:nth-child(342):before { animation-delay: 0s, -5.13s; }

.particle:nth-child(343) { transform: translate3d(66.17028px, -240.25605px, -74.15203px); color: #FFF; }

.particle:nth-child(343):before { animation-delay: 0s, -5.145s; }

.particle:nth-child(344) { transform: translate3d(-83.74086px, 243.34631px, -37.01405px); color: #FFF; }

.particle:nth-child(344):before { animation-delay: 0s, -5.16s; }

.particle:nth-child(345) { transform: translate3d(-55.24034px, -106.67569px, -230.58361px); color: #FFF; }

.particle:nth-child(345):before { animation-delay: 0s, -5.175s; }

.particle:nth-child(346) { transform: translate3d(1.26334px, 259.99447px, -1.13111px); color: #FFF; }

.particle:nth-child(346):before { animation-delay: 0s, -5.19s; }

.particle:nth-child(347) { transform: translate3d(-4.83612px, 47.36571px, -255.60341px); color: #FFF; }

.particle:nth-child(347):before { animation-delay: 0s, -5.205s; }

.particle:nth-child(348) { transform: translate3d(-65.62019px, 250.06156px, -27.62619px); color: #FFF; }

.particle:nth-child(348):before { animation-delay: 0s, -5.22s; }

.particle:nth-child(349) { transform: translate3d(35.99136px, -256.31989px, -24.59132px); color: #FFF; }

.particle:nth-child(349):before { animation-delay: 0s, -5.235s; }

.particle:nth-child(350) { transform: translate3d(-246.29876px, -51.12621px, 65.74978px); color: #FFF; }

.particle:nth-child(350):before { animation-delay: 0s, -5.25s; }

.particle:nth-child(351) { transform: translate3d(-178.93876px, -180.08436px, -56.12971px); color: #FFF; }

.particle:nth-child(351):before { animation-delay: 0s, -5.265s; }

.particle:nth-child(352) { transform: translate3d(19.33017px, -257.61641px, -29.32793px); color: #FFF; }

.particle:nth-child(352):before { animation-delay: 0s, -5.28s; }

.particle:nth-child(353) { transform: translate3d(114.49142px, -232.86195px, -16.34099px); color: #FFF; }

.particle:nth-child(353):before { animation-delay: 0s, -5.295s; }

.particle:nth-child(354) { transform: translate3d(-179.42524px, -142.8851px, 122.43541px); color: #FFF; }

.particle:nth-child(354):before { animation-delay: 0s, -5.31s; }

.particle:nth-child(355) { transform: translate3d(114.95295px, -230.48678px, 35.51991px); color: #FFF; }

.particle:nth-child(355):before { animation-delay: 0s, -5.325s; }

.particle:nth-child(356) { transform: translate3d(2.04898px, 254.99865px, 50.70988px); color: #FFF; }

.particle:nth-child(356):before { animation-delay: 0s, -5.34s; }

.particle:nth-child(357) { transform: translate3d(-64.63437px, 217.89796px, -126.26511px); color: #FFF; }

.particle:nth-child(357):before { animation-delay: 0s, -5.355s; }

.particle:nth-child(358) { transform: translate3d(-67.9218px, -199.66548px, -152.0537px); color: #FFF; }

.particle:nth-child(358):before { animation-delay: 0s, -5.37s; }

.particle:nth-child(359) { transform: translate3d(-186.05728px, 126.18645px, 130.61266px); color: #FFF; }

.particle:nth-child(359):before { animation-delay: 0s, -5.385s; }

.particle:nth-child(360) { transform: translate3d(143.75632px, -168.69061px, 135.93233px); color: #FFF; }

.particle:nth-child(360):before { animation-delay: 0s, -5.4s; }

.particle:nth-child(361) { transform: translate3d(-18.56388px, -259.31143px, -3.60063px); color: #FFF; }

.particle:nth-child(361):before { animation-delay: 0s, -5.415s; }

.particle:nth-child(362) { transform: translate3d(-236.10167px, 98.51657px, 46.37332px); color: #FFF; }

.particle:nth-child(362):before { animation-delay: 0s, -5.43s; }

.particle:nth-child(363) { transform: translate3d(113.64727px, -82.71151px, 218.73067px); color: #FFF; }

.particle:nth-child(363):before { animation-delay: 0s, -5.445s; }

.particle:nth-child(364) { transform: translate3d(16.04068px, 248.48115px, 74.83192px); color: #FFF; }

.particle:nth-child(364):before { animation-delay: 0s, -5.46s; }

.particle:nth-child(365) { transform: translate3d(86.4663px, -241.47932px, 42.55955px); color: #FFF; }

.particle:nth-child(365):before { animation-delay: 0s, -5.475s; }

.particle:nth-child(366) { transform: translate3d(-226.09212px, 14.25753px, -127.58948px); color: #FFF; }

.particle:nth-child(366):before { animation-delay: 0s, -5.49s; }

.particle:nth-child(367) { transform: translate3d(-24.69403px, -257.58139px, -25.33836px); color: #FFF; }

.particle:nth-child(367):before { animation-delay: 0s, -5.505s; }

.particle:nth-child(368) { transform: translate3d(153.69674px, -78.71924px, -194.37231px); color: #FFF; }

.particle:nth-child(368):before { animation-delay: 0s, -5.52s; }

.particle:nth-child(369) { transform: translate3d(-98.08135px, -182.77686px, 156.75671px); color: #FFF; }

.particle:nth-child(369):before { animation-delay: 0s, -5.535s; }

.particle:nth-child(370) { transform: translate3d(104.23504px, 227.60072px, -70.23509px); color: #FFF; }

.particle:nth-child(370):before { animation-delay: 0s, -5.55s; }

.particle:nth-child(371) { transform: translate3d(60.70075px, 234.66749px, 94.05631px); color: #FFF; }

.particle:nth-child(371):before { animation-delay: 0s, -5.565s; }

.particle:nth-child(372) { transform: translate3d(-244.93555px, -83.41083px, 25.47964px); color: #FFF; }

.particle:nth-child(372):before { animation-delay: 0s, -5.58s; }

.particle:nth-child(373) { transform: translate3d(-255.89204px, 43.9411px, -13.72738px); color: #FFF; }

.particle:nth-child(373):before { animation-delay: 0s, -5.595s; }

.particle:nth-child(374) { transform: translate3d(123.80124px, 221.97755px, -54.76513px); color: #FFF; }

.particle:nth-child(374):before { animation-delay: 0s, -5.61s; }

.particle:nth-child(375) { transform: translate3d(-67.95665px, 223.98458px, 113.19365px); color: #FFF; }

.particle:nth-child(375):before { animation-delay: 0s, -5.625s; }

.particle:nth-child(376) { transform: translate3d(-1.37476px, -256.87415px, 40.1719px); color: #FFF; }

.particle:nth-child(376):before { animation-delay: 0s, -5.64s; }

.particle:nth-child(377) { transform: translate3d(128.52067px, -27.95173px, -224.27915px); color: #FFF; }

.particle:nth-child(377):before { animation-delay: 0s, -5.655s; }

.particle:nth-child(378) { transform: translate3d(-8.476px, 205.08037px, -159.59386px); color: #FFF; }

.particle:nth-child(378):before { animation-delay: 0s, -5.67s; }

.particle:nth-child(379) { transform: translate3d(-228.70216px, -123.44983px, -7.44706px); color: #FFF; }

.particle:nth-child(379):before { animation-delay: 0s, -5.685s; }

.particle:nth-child(380) { transform: translate3d(-89.85662px, -232.74995px, -73.16589px); color: #FFF; }

.particle:nth-child(380):before { animation-delay: 0s, -5.7s; }

.particle:nth-child(381) { transform: translate3d(-176.91565px, 24.96776px, 188.88479px); color: #FFF; }

.particle:nth-child(381):before { animation-delay: 0s, -5.715s; }

.particle:nth-child(382) { transform: translate3d(-81.08083px, -223.5719px, 105.07855px); color: #FFF; }

.particle:nth-child(382):before { animation-delay: 0s, -5.73s; }

.particle:nth-child(383) { transform: translate3d(-44.4328px, 249.11231px, 59.7393px); color: #FFF; }

.particle:nth-child(383):before { animation-delay: 0s, -5.745s; }

.particle:nth-child(384) { transform: translate3d(-77.79838px, 247.26438px, -20.19257px); color: #FFF; }

.particle:nth-child(384):before { animation-delay: 0s, -5.76s; }

.particle:nth-child(385) { transform: translate3d(-231.77334px, 50.49945px, -106.44681px); color: #FFF; }

.particle:nth-child(385):before { animation-delay: 0s, -5.775s; }

.particle:nth-child(386) { transform: translate3d(26.70424px, 177.71869px, 187.8908px); color: #FFF; }

.particle:nth-child(386):before { animation-delay: 0s, -5.79s; }

.particle:nth-child(387) { transform: translate3d(41.30169px, 228.94803px, -116.09035px); color: #FFF; }

.particle:nth-child(387):before { animation-delay: 0s, -5.805s; }

.particle:nth-child(388) { transform: translate3d(-171.20705px, 61.05187px, -185.90539px); color: #FFF; }

.particle:nth-child(388):before { animation-delay: 0s, -5.82s; }

.particle:nth-child(389) { transform: translate3d(71.14574px, 249.45276px, -17.65225px); color: #FFF; }

.particle:nth-child(389):before { animation-delay: 0s, -5.835s; }

.particle:nth-child(390) { transform: translate3d(54.49699px, -254.18353px, -4.56168px); color: #FFF; }

.particle:nth-child(390):before { animation-delay: 0s, -5.85s; }

.particle:nth-child(391) { transform: translate3d(-79.13698px, 76.58763px, 235.52425px); color: #FFF; }

.particle:nth-child(391):before { animation-delay: 0s, -5.865s; }

.particle:nth-child(392) { transform: translate3d(117.90989px, 64.2162px, -222.65116px); color: #FFF; }

.particle:nth-child(392):before { animation-delay: 0s, -5.88s; }

.particle:nth-child(393) { transform: translate3d(133.60358px, 210.23719px, 74.50106px); color: #FFF; }

.particle:nth-child(393):before { animation-delay: 0s, -5.895s; }

.particle:nth-child(394) { transform: translate3d(46.28586px, -230.48291px, 111.06416px); color: #FFF; }

.particle:nth-child(394):before { animation-delay: 0s, -5.91s; }

.particle:nth-child(395) { transform: translate3d(-189.15144px, -136.0052px, 115.43101px); color: #FFF; }

.particle:nth-child(395):before { animation-delay: 0s, -5.925s; }

.particle:nth-child(396) { transform: translate3d(156.52425px, 198.31245px, 61.41932px); color: #FFF; }

.particle:nth-child(396):before { animation-delay: 0s, -5.94s; }

.particle:nth-child(397) { transform: translate3d(-167.82827px, 195.93301px, -32.30986px); color: #FFF; }

.particle:nth-child(397):before { animation-delay: 0s, -5.955s; }

.particle:nth-child(398) { transform: translate3d(32.64425px, -107.252px, -234.58764px); color: #FFF; }

.particle:nth-child(398):before { animation-delay: 0s, -5.97s; }

.particle:nth-child(399) { transform: translate3d(17.81616px, 234.69459px, -110.45829px); color: #FFF; }

.particle:nth-child(399):before { animation-delay: 0s, -5.985s; }

.particle:nth-child(400) { transform: translate3d(85.76485px, -216.56789px, 115.51078px); color: #FFF; }

.particle:nth-child(400):before { animation-delay: 0s, -6s; }

@keyframes spin { 0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); } }

@keyframes blink { 5% { box-shadow: 0 0 10px 6px currentColor; }
  10% { box-shadow: 0 0 10px 0px currentColor; } }

            
          
!
            
              const transform = (element, value) => {
  element.style.transform = value;
};

const height = 400,
  width = 300,
  greenColors = [
    '#9EE4B',
    '#0A6030',
    '#0C783C',
    '#0F964B',
    '#13BC5E',
    '#42C97E',
    '#68D498',
    '#86DDAD'
  ].reverse(),
  types = ['text'],
  stages = [
    'AWS développement',
    'Agile',
    "Agile : Développer l'agilité des équipes",
    'Android',
    'Angular',
    'Angular Material',
    'AngularJS',
    'AngularJS Material',
    'Ansible',
    'Apache Mahout',
    'Apache Solr',
    'BIRT',
    'Big Data',
    'Bootstrap 4',
    'C#',
    'C++',
    'CSS3',
    'Cassandra',
    'Certification Scrum Master',
    'Certification Scrum Product Owner',
    'Design Patterns',
    'DevOps',
    'Docker',
    'Drools',
    'EJB',
    'Eclipse RCP',
    'ElasticSearch Logstash',
    'Ext JS',
    'Git',
    'Go',
    'GraphQL',
    'HTML5',
    'Hadoop',
    'Hibernate',
    'Intégration continue',
    'JBoss Administration',
    'JMS',
    'JMeter',
    'JPA',
    'JSF',
    'JUnitLESS',
    'Java',
    'JavaEE',
    'JavaScript',
    'Jenkins',
    'Kanban',
    'Kibana ELK',
    'KnockoutJS',
    'Kotlin',
    'Kubernetes',
    'Langage R',
    'Langage SQL',
    'Machine Learning',
    'Masterclass Expertise Java',
    'Maven',
    'Microservices',
    'Microservices',
    'Modéliser des microservices',
    'MongoDB',
    'MySQL Administration',
    'Méthodes Agiles',
    'Neo4J',
    'NoSQL',
    'Node.js',
    'OSGi',
    'OpenStack',
    'POO',
    'PWA',
    'PrimeFaces',
    'Python',
    'ReST APIs',
    'React Native',
    'ReactJS',
    'RxJS',
    'SASS',
    'SEO',
    'SOA',
    'Smalltalk',
    'SoapUI',
    'Software Craftsmanship',
    'Spark',
    'Spring Batch',
    'Spring Boot',
    'Spring Core',
    'Spring MVC',
    'Spring Security',
    'Spring WebFlow',
    'Struts',
    'Subversion',
    'Swift',
    'Sécurité des applications Web',
    'Tapestry',
    'Test Driven Developpement',
    'Tomcat Administration',
    'TypeScript',
    'UML2',
    'Vue.js',
    'Web Oriented Architecture',
    'Web Services en Java',
    'WebLogic 12c',
    'Webpack4',
    'Wildfly',
    'XML',
    'XML',
    'XPath',
    'XQuery',
    'XSLT 3.0',
    'Xamarin',
    'jQuery'
  ];
const quantity = stages.length;
const orderedStages = stages.sort((a, b) => a.length - b.length);
const heigthStack = height / quantity;
const colorStack = quantity / greenColors.length;

const tree = document.querySelector('.tree'),
  treeRotation = 0;

tree.style.width = width + 'px';
tree.style.height = height + 'px';

window.addEventListener('resize', resize, false);

// The tree
for (let i = 0; i < quantity; i++) {
  let element = null,
    type = types[Math.floor(Math.random() * types.length)],
    stage = orderedStages[i]; //stages[Math.floor(Math.random() * stages.length)];

  let x = width / 2,
    //y = Math.round(Math.random() * height);
    y = i * heigthStack;
  let backcolor = greenColors[Math.floor(i / colorStack)];

  let rx = 0,
    ry = Math.random() * 360,
    rz = -Math.random() * 15;

  let elemenWidth = 5 + ((y / height) * width) / 2,
    elemenHeight = 26;

  switch (type) {
    case 'progress':
      element = document.createElement('progress');
      element.style.width = elemenWidth + 'px';
      break;
    case 'text':
    default:
      element = document.createElement('div');
      element.innerHTML = stage;
      element.style.width = elemenWidth + 'px';
      element.style.height = elemenHeight + 'px';
      element.style.backgroundColor = backcolor;
  }

  element.className = 'branch';
  transform(
    element,
    'translate3d(' +
      x +
      'px, ' +
      y +
      'px, 0px) rotateX(' +
      rx +
      'deg) rotateY(' +
      ry +
      'deg) rotateZ(' +
      rz +
      'deg)'
  );

  tree.appendChild(element);
}

function resize() {
  tree.style.top = (window.innerHeight - height - 50) / 2 + 'px';
}

resize();

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console