HTML5 CSS3傍晚时分森林动画背景

animated background forest，比较复杂的一个CSS动画。性能一般。

css3, background

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 4197
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Let's define the required varibles such as the number of particles to be created and an array to hold the particles
const particleContainer = document.getElementById('particles');
const Nparticles = 100;
let particles = [];

// function to return a random number from a given min and max
function rand(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}

// This constructor will generate the required information for each particle and it's html structure to be added to the document
function createParticle(i) {
	this.id = i;
	this.width = rand(1,20) + 'px';
	this.height = this.width;
	this.x = rand(10,90) + '%';
	this.delay = rand(1,60) + 's';
	this.duration = rand(10,60) + 's';
	this.html = '<span style=" width: '+this.width+'; height: '+this.height+'; left: '+this.x+'; animation-delay: '+this.duration+'; animation-duration: '+this.duration+'; "></span>';
}

// Let's loop through till we reach the max number of particles and save them to the array and append them to the document
while ( particles.length <= Nparticles ) {
	let Particle = new createParticle(particles.length);
	particles.push(Particle);
	particleContainer.innerHTML += Particle.html;
}

编译

CSS

@-webkit-keyframes particle-1 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-22px) translateY(-10vh);
        transform: translateX(-22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-4px) translateY(-20vh);
        transform: translateX(-4px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-37px) translateY(-30vh);
        transform: translateX(-37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(0px) translateY(-40vh);
        transform: translateX(0px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(4px) translateY(-100vh);
        transform: translateX(4px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-1 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-22px) translateY(-10vh);
        transform: translateX(-22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-4px) translateY(-20vh);
        transform: translateX(-4px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-37px) translateY(-30vh);
        transform: translateX(-37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(0px) translateY(-40vh);
        transform: translateX(0px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(4px) translateY(-100vh);
        transform: translateX(4px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(1) {
    -webkit-animation-name: particle-1;
    animation-name: particle-1;
}
@-webkit-keyframes particle-2 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-1px) translateY(-10vh);
        transform: translateX(-1px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(9px) translateY(-40vh);
        transform: translateX(9px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-12px) translateY(-50vh);
        transform: translateX(-12px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-2 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-1px) translateY(-10vh);
        transform: translateX(-1px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(9px) translateY(-40vh);
        transform: translateX(9px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-12px) translateY(-50vh);
        transform: translateX(-12px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(2) {
    -webkit-animation-name: particle-2;
    animation-name: particle-2;
}
@-webkit-keyframes particle-3 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-39px) translateY(-10vh);
        transform: translateX(-39px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-9px) translateY(-20vh);
        transform: translateX(-9px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-4px) translateY(-30vh);
        transform: translateX(-4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-3px) translateY(-40vh);
        transform: translateX(-3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(36px) translateY(-50vh);
        transform: translateX(36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-19px) translateY(-100vh);
        transform: translateX(-19px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-3 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-39px) translateY(-10vh);
        transform: translateX(-39px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-9px) translateY(-20vh);
        transform: translateX(-9px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-4px) translateY(-30vh);
        transform: translateX(-4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-3px) translateY(-40vh);
        transform: translateX(-3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(36px) translateY(-50vh);
        transform: translateX(36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-19px) translateY(-100vh);
        transform: translateX(-19px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(3) {
    -webkit-animation-name: particle-3;
    animation-name: particle-3;
}
@-webkit-keyframes particle-4 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-34px) translateY(-10vh);
        transform: translateX(-34px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(39px) translateY(-30vh);
        transform: translateX(39px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(30px) translateY(-40vh);
        transform: translateX(30px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-31px) translateY(-100vh);
        transform: translateX(-31px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-4 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-34px) translateY(-10vh);
        transform: translateX(-34px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(39px) translateY(-30vh);
        transform: translateX(39px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(30px) translateY(-40vh);
        transform: translateX(30px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-31px) translateY(-100vh);
        transform: translateX(-31px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(4) {
    -webkit-animation-name: particle-4;
    animation-name: particle-4;
}
@-webkit-keyframes particle-5 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-29px) translateY(-10vh);
        transform: translateX(-29px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(14px) translateY(-20vh);
        transform: translateX(14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-11px) translateY(-30vh);
        transform: translateX(-11px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-38px) translateY(-40vh);
        transform: translateX(-38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(0px) translateY(-50vh);
        transform: translateX(0px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(4px) translateY(-100vh);
        transform: translateX(4px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-5 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-29px) translateY(-10vh);
        transform: translateX(-29px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(14px) translateY(-20vh);
        transform: translateX(14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-11px) translateY(-30vh);
        transform: translateX(-11px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-38px) translateY(-40vh);
        transform: translateX(-38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(0px) translateY(-50vh);
        transform: translateX(0px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(4px) translateY(-100vh);
        transform: translateX(4px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(5) {
    -webkit-animation-name: particle-5;
    animation-name: particle-5;
}
@-webkit-keyframes particle-6 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-37px) translateY(-10vh);
        transform: translateX(-37px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-10px) translateY(-20vh);
        transform: translateX(-10px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(12px) translateY(-30vh);
        transform: translateX(12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-14px) translateY(-40vh);
        transform: translateX(-14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(27px) translateY(-50vh);
        transform: translateX(27px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-7px) translateY(-100vh);
        transform: translateX(-7px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-6 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-37px) translateY(-10vh);
        transform: translateX(-37px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-10px) translateY(-20vh);
        transform: translateX(-10px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(12px) translateY(-30vh);
        transform: translateX(12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-14px) translateY(-40vh);
        transform: translateX(-14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(27px) translateY(-50vh);
        transform: translateX(27px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-7px) translateY(-100vh);
        transform: translateX(-7px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(6) {
    -webkit-animation-name: particle-6;
    animation-name: particle-6;
}
@-webkit-keyframes particle-7 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-22px) translateY(-10vh);
        transform: translateX(-22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-34px) translateY(-30vh);
        transform: translateX(-34px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(11px) translateY(-40vh);
        transform: translateX(11px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(3px) translateY(-50vh);
        transform: translateX(3px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-19px) translateY(-100vh);
        transform: translateX(-19px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-7 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-22px) translateY(-10vh);
        transform: translateX(-22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-34px) translateY(-30vh);
        transform: translateX(-34px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(11px) translateY(-40vh);
        transform: translateX(11px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(3px) translateY(-50vh);
        transform: translateX(3px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-19px) translateY(-100vh);
        transform: translateX(-19px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(7) {
    -webkit-animation-name: particle-7;
    animation-name: particle-7;
}
@-webkit-keyframes particle-8 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-10px) translateY(-10vh);
        transform: translateX(-10px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-28px) translateY(-20vh);
        transform: translateX(-28px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(14px) translateY(-30vh);
        transform: translateX(14px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-35px) translateY(-40vh);
        transform: translateX(-35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(8px) translateY(-50vh);
        transform: translateX(8px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-8 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-10px) translateY(-10vh);
        transform: translateX(-10px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-28px) translateY(-20vh);
        transform: translateX(-28px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(14px) translateY(-30vh);
        transform: translateX(14px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-35px) translateY(-40vh);
        transform: translateX(-35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(8px) translateY(-50vh);
        transform: translateX(8px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(8) {
    -webkit-animation-name: particle-8;
    animation-name: particle-8;
}
@-webkit-keyframes particle-9 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(24px) translateY(-10vh);
        transform: translateX(24px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-15px) translateY(-20vh);
        transform: translateX(-15px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-34px) translateY(-40vh);
        transform: translateX(-34px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-5px) translateY(-50vh);
        transform: translateX(-5px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-9 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(24px) translateY(-10vh);
        transform: translateX(24px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-15px) translateY(-20vh);
        transform: translateX(-15px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-34px) translateY(-40vh);
        transform: translateX(-34px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-5px) translateY(-50vh);
        transform: translateX(-5px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(9) {
    -webkit-animation-name: particle-9;
    animation-name: particle-9;
}
@-webkit-keyframes particle-10 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-33px) translateY(-10vh);
        transform: translateX(-33px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-31px) translateY(-20vh);
        transform: translateX(-31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(3px) translateY(-40vh);
        transform: translateX(3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-10px) translateY(-50vh);
        transform: translateX(-10px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-10 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-33px) translateY(-10vh);
        transform: translateX(-33px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-31px) translateY(-20vh);
        transform: translateX(-31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(3px) translateY(-40vh);
        transform: translateX(3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-10px) translateY(-50vh);
        transform: translateX(-10px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(10) {
    -webkit-animation-name: particle-10;
    animation-name: particle-10;
}
@-webkit-keyframes particle-11 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-25px) translateY(-10vh);
        transform: translateX(-25px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(33px) translateY(-20vh);
        transform: translateX(33px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-4px) translateY(-30vh);
        transform: translateX(-4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(9px) translateY(-40vh);
        transform: translateX(9px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-24px) translateY(-50vh);
        transform: translateX(-24px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-11 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-25px) translateY(-10vh);
        transform: translateX(-25px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(33px) translateY(-20vh);
        transform: translateX(33px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-4px) translateY(-30vh);
        transform: translateX(-4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(9px) translateY(-40vh);
        transform: translateX(9px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-24px) translateY(-50vh);
        transform: translateX(-24px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(11) {
    -webkit-animation-name: particle-11;
    animation-name: particle-11;
}
@-webkit-keyframes particle-12 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-20px) translateY(-10vh);
        transform: translateX(-20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(4px) translateY(-20vh);
        transform: translateX(4px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-21px) translateY(-30vh);
        transform: translateX(-21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-27px) translateY(-40vh);
        transform: translateX(-27px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-31px) translateY(-100vh);
        transform: translateX(-31px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-12 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-20px) translateY(-10vh);
        transform: translateX(-20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(4px) translateY(-20vh);
        transform: translateX(4px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-21px) translateY(-30vh);
        transform: translateX(-21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-27px) translateY(-40vh);
        transform: translateX(-27px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-31px) translateY(-100vh);
        transform: translateX(-31px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(12) {
    -webkit-animation-name: particle-12;
    animation-name: particle-12;
}
@-webkit-keyframes particle-13 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(13px) translateY(-10vh);
        transform: translateX(13px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(38px) translateY(-20vh);
        transform: translateX(38px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(31px) translateY(-30vh);
        transform: translateX(31px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(25px) translateY(-40vh);
        transform: translateX(25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(12px) translateY(-50vh);
        transform: translateX(12px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-37px) translateY(-100vh);
        transform: translateX(-37px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-13 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(13px) translateY(-10vh);
        transform: translateX(13px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(38px) translateY(-20vh);
        transform: translateX(38px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(31px) translateY(-30vh);
        transform: translateX(31px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(25px) translateY(-40vh);
        transform: translateX(25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(12px) translateY(-50vh);
        transform: translateX(12px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-37px) translateY(-100vh);
        transform: translateX(-37px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(13) {
    -webkit-animation-name: particle-13;
    animation-name: particle-13;
}
@-webkit-keyframes particle-14 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(18px) translateY(-10vh);
        transform: translateX(18px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-24px) translateY(-30vh);
        transform: translateX(-24px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-27px) translateY(-40vh);
        transform: translateX(-27px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-25px) translateY(-50vh);
        transform: translateX(-25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-32px) translateY(-100vh);
        transform: translateX(-32px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-14 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(18px) translateY(-10vh);
        transform: translateX(18px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-24px) translateY(-30vh);
        transform: translateX(-24px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-27px) translateY(-40vh);
        transform: translateX(-27px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-25px) translateY(-50vh);
        transform: translateX(-25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-32px) translateY(-100vh);
        transform: translateX(-32px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(14) {
    -webkit-animation-name: particle-14;
    animation-name: particle-14;
}
@-webkit-keyframes particle-15 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(7px) translateY(-10vh);
        transform: translateX(7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(30px) translateY(-20vh);
        transform: translateX(30px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-37px) translateY(-40vh);
        transform: translateX(-37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(36px) translateY(-50vh);
        transform: translateX(36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(27px) translateY(-100vh);
        transform: translateX(27px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-15 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(7px) translateY(-10vh);
        transform: translateX(7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(30px) translateY(-20vh);
        transform: translateX(30px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-37px) translateY(-40vh);
        transform: translateX(-37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(36px) translateY(-50vh);
        transform: translateX(36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(27px) translateY(-100vh);
        transform: translateX(27px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(15) {
    -webkit-animation-name: particle-15;
    animation-name: particle-15;
}
@-webkit-keyframes particle-16 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-27px) translateY(-10vh);
        transform: translateX(-27px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-3px) translateY(-20vh);
        transform: translateX(-3px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-28px) translateY(-30vh);
        transform: translateX(-28px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(37px) translateY(-40vh);
        transform: translateX(37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(13px) translateY(-50vh);
        transform: translateX(13px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(16px) translateY(-100vh);
        transform: translateX(16px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-16 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-27px) translateY(-10vh);
        transform: translateX(-27px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-3px) translateY(-20vh);
        transform: translateX(-3px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-28px) translateY(-30vh);
        transform: translateX(-28px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(37px) translateY(-40vh);
        transform: translateX(37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(13px) translateY(-50vh);
        transform: translateX(13px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(16px) translateY(-100vh);
        transform: translateX(16px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(16) {
    -webkit-animation-name: particle-16;
    animation-name: particle-16;
}
@-webkit-keyframes particle-17 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-2px) translateY(-10vh);
        transform: translateX(-2px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-26px) translateY(-20vh);
        transform: translateX(-26px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(7px) translateY(-40vh);
        transform: translateX(7px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(28px) translateY(-50vh);
        transform: translateX(28px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(22px) translateY(-100vh);
        transform: translateX(22px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-17 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-2px) translateY(-10vh);
        transform: translateX(-2px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-26px) translateY(-20vh);
        transform: translateX(-26px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(7px) translateY(-40vh);
        transform: translateX(7px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(28px) translateY(-50vh);
        transform: translateX(28px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(22px) translateY(-100vh);
        transform: translateX(22px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(17) {
    -webkit-animation-name: particle-17;
    animation-name: particle-17;
}
@-webkit-keyframes particle-18 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-11px) translateY(-10vh);
        transform: translateX(-11px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(2px) translateY(-20vh);
        transform: translateX(2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(27px) translateY(-30vh);
        transform: translateX(27px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-19px) translateY(-40vh);
        transform: translateX(-19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(25px) translateY(-50vh);
        transform: translateX(25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-18 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-11px) translateY(-10vh);
        transform: translateX(-11px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(2px) translateY(-20vh);
        transform: translateX(2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(27px) translateY(-30vh);
        transform: translateX(27px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-19px) translateY(-40vh);
        transform: translateX(-19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(25px) translateY(-50vh);
        transform: translateX(25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(18) {
    -webkit-animation-name: particle-18;
    animation-name: particle-18;
}
@-webkit-keyframes particle-19 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(12px) translateY(-10vh);
        transform: translateX(12px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(13px) translateY(-30vh);
        transform: translateX(13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(22px) translateY(-40vh);
        transform: translateX(22px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(25px) translateY(-50vh);
        transform: translateX(25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-17px) translateY(-100vh);
        transform: translateX(-17px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-19 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(12px) translateY(-10vh);
        transform: translateX(12px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(13px) translateY(-30vh);
        transform: translateX(13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(22px) translateY(-40vh);
        transform: translateX(22px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(25px) translateY(-50vh);
        transform: translateX(25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-17px) translateY(-100vh);
        transform: translateX(-17px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(19) {
    -webkit-animation-name: particle-19;
    animation-name: particle-19;
}
@-webkit-keyframes particle-20 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-3px) translateY(-10vh);
        transform: translateX(-3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(31px) translateY(-20vh);
        transform: translateX(31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-36px) translateY(-30vh);
        transform: translateX(-36px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(20px) translateY(-40vh);
        transform: translateX(20px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(39px) translateY(-50vh);
        transform: translateX(39px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(1px) translateY(-100vh);
        transform: translateX(1px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-20 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-3px) translateY(-10vh);
        transform: translateX(-3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(31px) translateY(-20vh);
        transform: translateX(31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-36px) translateY(-30vh);
        transform: translateX(-36px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(20px) translateY(-40vh);
        transform: translateX(20px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(39px) translateY(-50vh);
        transform: translateX(39px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(1px) translateY(-100vh);
        transform: translateX(1px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(20) {
    -webkit-animation-name: particle-20;
    animation-name: particle-20;
}
@-webkit-keyframes particle-21 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-2px) translateY(-10vh);
        transform: translateX(-2px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(27px) translateY(-20vh);
        transform: translateX(27px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(35px) translateY(-40vh);
        transform: translateX(35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(21px) translateY(-100vh);
        transform: translateX(21px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-21 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-2px) translateY(-10vh);
        transform: translateX(-2px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(27px) translateY(-20vh);
        transform: translateX(27px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(35px) translateY(-40vh);
        transform: translateX(35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(21px) translateY(-100vh);
        transform: translateX(21px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(21) {
    -webkit-animation-name: particle-21;
    animation-name: particle-21;
}
@-webkit-keyframes particle-22 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(20px) translateY(-10vh);
        transform: translateX(20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(25px) translateY(-20vh);
        transform: translateX(25px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(21px) translateY(-30vh);
        transform: translateX(21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(18px) translateY(-40vh);
        transform: translateX(18px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(25px) translateY(-100vh);
        transform: translateX(25px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-22 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(20px) translateY(-10vh);
        transform: translateX(20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(25px) translateY(-20vh);
        transform: translateX(25px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(21px) translateY(-30vh);
        transform: translateX(21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(18px) translateY(-40vh);
        transform: translateX(18px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(25px) translateY(-100vh);
        transform: translateX(25px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(22) {
    -webkit-animation-name: particle-22;
    animation-name: particle-22;
}
@-webkit-keyframes particle-23 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-9px) translateY(-10vh);
        transform: translateX(-9px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(29px) translateY(-20vh);
        transform: translateX(29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(33px) translateY(-30vh);
        transform: translateX(33px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(40px) translateY(-40vh);
        transform: translateX(40px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(27px) translateY(-50vh);
        transform: translateX(27px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(25px) translateY(-100vh);
        transform: translateX(25px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-23 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-9px) translateY(-10vh);
        transform: translateX(-9px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(29px) translateY(-20vh);
        transform: translateX(29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(33px) translateY(-30vh);
        transform: translateX(33px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(40px) translateY(-40vh);
        transform: translateX(40px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(27px) translateY(-50vh);
        transform: translateX(27px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(25px) translateY(-100vh);
        transform: translateX(25px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(23) {
    -webkit-animation-name: particle-23;
    animation-name: particle-23;
}
@-webkit-keyframes particle-24 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-3px) translateY(-20vh);
        transform: translateX(-3px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-14px) translateY(-50vh);
        transform: translateX(-14px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(21px) translateY(-100vh);
        transform: translateX(21px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-24 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-3px) translateY(-20vh);
        transform: translateX(-3px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-14px) translateY(-50vh);
        transform: translateX(-14px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(21px) translateY(-100vh);
        transform: translateX(21px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(24) {
    -webkit-animation-name: particle-24;
    animation-name: particle-24;
}
@-webkit-keyframes particle-25 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(10px) translateY(-10vh);
        transform: translateX(10px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(13px) translateY(-30vh);
        transform: translateX(13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-5px) translateY(-100vh);
        transform: translateX(-5px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-25 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(10px) translateY(-10vh);
        transform: translateX(10px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(13px) translateY(-30vh);
        transform: translateX(13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-5px) translateY(-100vh);
        transform: translateX(-5px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(25) {
    -webkit-animation-name: particle-25;
    animation-name: particle-25;
}
@-webkit-keyframes particle-26 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-28px) translateY(-10vh);
        transform: translateX(-28px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-10px) translateY(-20vh);
        transform: translateX(-10px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(5px) translateY(-30vh);
        transform: translateX(5px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(6px) translateY(-40vh);
        transform: translateX(6px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(20px) translateY(-100vh);
        transform: translateX(20px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-26 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-28px) translateY(-10vh);
        transform: translateX(-28px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-10px) translateY(-20vh);
        transform: translateX(-10px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(5px) translateY(-30vh);
        transform: translateX(5px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(6px) translateY(-40vh);
        transform: translateX(6px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(20px) translateY(-100vh);
        transform: translateX(20px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(26) {
    -webkit-animation-name: particle-26;
    animation-name: particle-26;
}
@-webkit-keyframes particle-27 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(8px) translateY(-10vh);
        transform: translateX(8px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-29px) translateY(-20vh);
        transform: translateX(-29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-1px) translateY(-40vh);
        transform: translateX(-1px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(18px) translateY(-50vh);
        transform: translateX(18px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-11px) translateY(-100vh);
        transform: translateX(-11px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-27 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(8px) translateY(-10vh);
        transform: translateX(8px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-29px) translateY(-20vh);
        transform: translateX(-29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-1px) translateY(-40vh);
        transform: translateX(-1px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(18px) translateY(-50vh);
        transform: translateX(18px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-11px) translateY(-100vh);
        transform: translateX(-11px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(27) {
    -webkit-animation-name: particle-27;
    animation-name: particle-27;
}
@-webkit-keyframes particle-28 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-13px) translateY(-10vh);
        transform: translateX(-13px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-34px) translateY(-20vh);
        transform: translateX(-34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-32px) translateY(-30vh);
        transform: translateX(-32px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(39px) translateY(-50vh);
        transform: translateX(39px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-28 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-13px) translateY(-10vh);
        transform: translateX(-13px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-34px) translateY(-20vh);
        transform: translateX(-34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-32px) translateY(-30vh);
        transform: translateX(-32px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(39px) translateY(-50vh);
        transform: translateX(39px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(28) {
    -webkit-animation-name: particle-28;
    animation-name: particle-28;
}
@-webkit-keyframes particle-29 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(22px) translateY(-10vh);
        transform: translateX(22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-19px) translateY(-30vh);
        transform: translateX(-19px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-37px) translateY(-40vh);
        transform: translateX(-37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(36px) translateY(-50vh);
        transform: translateX(36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-29 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(22px) translateY(-10vh);
        transform: translateX(22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-19px) translateY(-30vh);
        transform: translateX(-19px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-37px) translateY(-40vh);
        transform: translateX(-37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(36px) translateY(-50vh);
        transform: translateX(36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(29) {
    -webkit-animation-name: particle-29;
    animation-name: particle-29;
}
@-webkit-keyframes particle-30 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(14px) translateY(-10vh);
        transform: translateX(14px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-14px) translateY(-20vh);
        transform: translateX(-14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(9px) translateY(-30vh);
        transform: translateX(9px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-26px) translateY(-50vh);
        transform: translateX(-26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-10px) translateY(-100vh);
        transform: translateX(-10px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-30 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(14px) translateY(-10vh);
        transform: translateX(14px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-14px) translateY(-20vh);
        transform: translateX(-14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(9px) translateY(-30vh);
        transform: translateX(9px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-26px) translateY(-50vh);
        transform: translateX(-26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-10px) translateY(-100vh);
        transform: translateX(-10px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(30) {
    -webkit-animation-name: particle-30;
    animation-name: particle-30;
}
@-webkit-keyframes particle-31 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(33px) translateY(-10vh);
        transform: translateX(33px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(32px) translateY(-20vh);
        transform: translateX(32px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(21px) translateY(-30vh);
        transform: translateX(21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(0px) translateY(-40vh);
        transform: translateX(0px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-31 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(33px) translateY(-10vh);
        transform: translateX(33px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(32px) translateY(-20vh);
        transform: translateX(32px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(21px) translateY(-30vh);
        transform: translateX(21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(0px) translateY(-40vh);
        transform: translateX(0px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(31) {
    -webkit-animation-name: particle-31;
    animation-name: particle-31;
}
@-webkit-keyframes particle-32 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-17px) translateY(-10vh);
        transform: translateX(-17px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-20px) translateY(-20vh);
        transform: translateX(-20px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-24px) translateY(-30vh);
        transform: translateX(-24px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(36px) translateY(-40vh);
        transform: translateX(36px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(34px) translateY(-100vh);
        transform: translateX(34px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-32 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-17px) translateY(-10vh);
        transform: translateX(-17px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-20px) translateY(-20vh);
        transform: translateX(-20px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-24px) translateY(-30vh);
        transform: translateX(-24px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(36px) translateY(-40vh);
        transform: translateX(36px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(34px) translateY(-100vh);
        transform: translateX(34px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(32) {
    -webkit-animation-name: particle-32;
    animation-name: particle-32;
}
@-webkit-keyframes particle-33 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(30px) translateY(-10vh);
        transform: translateX(30px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-22px) translateY(-20vh);
        transform: translateX(-22px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(24px) translateY(-40vh);
        transform: translateX(24px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(19px) translateY(-100vh);
        transform: translateX(19px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-33 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(30px) translateY(-10vh);
        transform: translateX(30px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-22px) translateY(-20vh);
        transform: translateX(-22px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(24px) translateY(-40vh);
        transform: translateX(24px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(19px) translateY(-100vh);
        transform: translateX(19px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(33) {
    -webkit-animation-name: particle-33;
    animation-name: particle-33;
}
@-webkit-keyframes particle-34 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-29px) translateY(-10vh);
        transform: translateX(-29px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(27px) translateY(-20vh);
        transform: translateX(27px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(2px) translateY(-30vh);
        transform: translateX(2px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(26px) translateY(-40vh);
        transform: translateX(26px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-29px) translateY(-50vh);
        transform: translateX(-29px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-34 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-29px) translateY(-10vh);
        transform: translateX(-29px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(27px) translateY(-20vh);
        transform: translateX(27px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(2px) translateY(-30vh);
        transform: translateX(2px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(26px) translateY(-40vh);
        transform: translateX(26px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-29px) translateY(-50vh);
        transform: translateX(-29px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(34) {
    -webkit-animation-name: particle-34;
    animation-name: particle-34;
}
@-webkit-keyframes particle-35 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-38px) translateY(-20vh);
        transform: translateX(-38px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-17px) translateY(-30vh);
        transform: translateX(-17px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(37px) translateY(-40vh);
        transform: translateX(37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-6px) translateY(-50vh);
        transform: translateX(-6px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-35 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-38px) translateY(-20vh);
        transform: translateX(-38px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-17px) translateY(-30vh);
        transform: translateX(-17px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(37px) translateY(-40vh);
        transform: translateX(37px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-6px) translateY(-50vh);
        transform: translateX(-6px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(35) {
    -webkit-animation-name: particle-35;
    animation-name: particle-35;
}
@-webkit-keyframes particle-36 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(5px) translateY(-10vh);
        transform: translateX(5px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-31px) translateY(-20vh);
        transform: translateX(-31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-10px) translateY(-30vh);
        transform: translateX(-10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-36px) translateY(-40vh);
        transform: translateX(-36px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-1px) translateY(-50vh);
        transform: translateX(-1px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(27px) translateY(-100vh);
        transform: translateX(27px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-36 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(5px) translateY(-10vh);
        transform: translateX(5px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-31px) translateY(-20vh);
        transform: translateX(-31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-10px) translateY(-30vh);
        transform: translateX(-10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-36px) translateY(-40vh);
        transform: translateX(-36px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-1px) translateY(-50vh);
        transform: translateX(-1px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(27px) translateY(-100vh);
        transform: translateX(27px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(36) {
    -webkit-animation-name: particle-36;
    animation-name: particle-36;
}
@-webkit-keyframes particle-37 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-18px) translateY(-10vh);
        transform: translateX(-18px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-22px) translateY(-20vh);
        transform: translateX(-22px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(12px) translateY(-30vh);
        transform: translateX(12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-17px) translateY(-40vh);
        transform: translateX(-17px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-19px) translateY(-50vh);
        transform: translateX(-19px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-17px) translateY(-100vh);
        transform: translateX(-17px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-37 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-18px) translateY(-10vh);
        transform: translateX(-18px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-22px) translateY(-20vh);
        transform: translateX(-22px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(12px) translateY(-30vh);
        transform: translateX(12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-17px) translateY(-40vh);
        transform: translateX(-17px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-19px) translateY(-50vh);
        transform: translateX(-19px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-17px) translateY(-100vh);
        transform: translateX(-17px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(37) {
    -webkit-animation-name: particle-37;
    animation-name: particle-37;
}
@-webkit-keyframes particle-38 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(40px) translateY(-10vh);
        transform: translateX(40px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(10px) translateY(-20vh);
        transform: translateX(10px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-10px) translateY(-40vh);
        transform: translateX(-10px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(16px) translateY(-50vh);
        transform: translateX(16px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(0px) translateY(-100vh);
        transform: translateX(0px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-38 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(40px) translateY(-10vh);
        transform: translateX(40px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(10px) translateY(-20vh);
        transform: translateX(10px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-10px) translateY(-40vh);
        transform: translateX(-10px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(16px) translateY(-50vh);
        transform: translateX(16px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(0px) translateY(-100vh);
        transform: translateX(0px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(38) {
    -webkit-animation-name: particle-38;
    animation-name: particle-38;
}
@-webkit-keyframes particle-39 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(36px) translateY(-10vh);
        transform: translateX(36px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-1px) translateY(-30vh);
        transform: translateX(-1px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(19px) translateY(-40vh);
        transform: translateX(19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-17px) translateY(-50vh);
        transform: translateX(-17px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-39 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(36px) translateY(-10vh);
        transform: translateX(36px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-1px) translateY(-30vh);
        transform: translateX(-1px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(19px) translateY(-40vh);
        transform: translateX(19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-17px) translateY(-50vh);
        transform: translateX(-17px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(39) {
    -webkit-animation-name: particle-39;
    animation-name: particle-39;
}
@-webkit-keyframes particle-40 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-2px) translateY(-10vh);
        transform: translateX(-2px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(29px) translateY(-20vh);
        transform: translateX(29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-25px) translateY(-40vh);
        transform: translateX(-25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-26px) translateY(-100vh);
        transform: translateX(-26px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-40 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-2px) translateY(-10vh);
        transform: translateX(-2px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(29px) translateY(-20vh);
        transform: translateX(29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-25px) translateY(-40vh);
        transform: translateX(-25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(33px) translateY(-50vh);
        transform: translateX(33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-26px) translateY(-100vh);
        transform: translateX(-26px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(40) {
    -webkit-animation-name: particle-40;
    animation-name: particle-40;
}
@-webkit-keyframes particle-41 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-28px) translateY(-10vh);
        transform: translateX(-28px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-28px) translateY(-20vh);
        transform: translateX(-28px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(40px) translateY(-30vh);
        transform: translateX(40px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-33px) translateY(-40vh);
        transform: translateX(-33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(11px) translateY(-50vh);
        transform: translateX(11px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-41 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-28px) translateY(-10vh);
        transform: translateX(-28px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-28px) translateY(-20vh);
        transform: translateX(-28px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(40px) translateY(-30vh);
        transform: translateX(40px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-33px) translateY(-40vh);
        transform: translateX(-33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(11px) translateY(-50vh);
        transform: translateX(11px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(41) {
    -webkit-animation-name: particle-41;
    animation-name: particle-41;
}
@-webkit-keyframes particle-42 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-23px) translateY(-10vh);
        transform: translateX(-23px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(21px) translateY(-20vh);
        transform: translateX(21px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-15px) translateY(-30vh);
        transform: translateX(-15px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(28px) translateY(-40vh);
        transform: translateX(28px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-37px) translateY(-50vh);
        transform: translateX(-37px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-11px) translateY(-100vh);
        transform: translateX(-11px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-42 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-23px) translateY(-10vh);
        transform: translateX(-23px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(21px) translateY(-20vh);
        transform: translateX(21px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-15px) translateY(-30vh);
        transform: translateX(-15px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(28px) translateY(-40vh);
        transform: translateX(28px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-37px) translateY(-50vh);
        transform: translateX(-37px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-11px) translateY(-100vh);
        transform: translateX(-11px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(42) {
    -webkit-animation-name: particle-42;
    animation-name: particle-42;
}
@-webkit-keyframes particle-43 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-34px) translateY(-10vh);
        transform: translateX(-34px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(29px) translateY(-20vh);
        transform: translateX(29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-8px) translateY(-30vh);
        transform: translateX(-8px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(4px) translateY(-40vh);
        transform: translateX(4px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-15px) translateY(-50vh);
        transform: translateX(-15px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-43 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-34px) translateY(-10vh);
        transform: translateX(-34px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(29px) translateY(-20vh);
        transform: translateX(29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-8px) translateY(-30vh);
        transform: translateX(-8px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(4px) translateY(-40vh);
        transform: translateX(4px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-15px) translateY(-50vh);
        transform: translateX(-15px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(43) {
    -webkit-animation-name: particle-43;
    animation-name: particle-43;
}
@-webkit-keyframes particle-44 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(26px) translateY(-10vh);
        transform: translateX(26px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-23px) translateY(-20vh);
        transform: translateX(-23px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-30px) translateY(-30vh);
        transform: translateX(-30px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(23px) translateY(-40vh);
        transform: translateX(23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-37px) translateY(-50vh);
        transform: translateX(-37px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-44 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(26px) translateY(-10vh);
        transform: translateX(26px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-23px) translateY(-20vh);
        transform: translateX(-23px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-30px) translateY(-30vh);
        transform: translateX(-30px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(23px) translateY(-40vh);
        transform: translateX(23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-37px) translateY(-50vh);
        transform: translateX(-37px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(44) {
    -webkit-animation-name: particle-44;
    animation-name: particle-44;
}
@-webkit-keyframes particle-45 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(15px) translateY(-10vh);
        transform: translateX(15px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-31px) translateY(-20vh);
        transform: translateX(-31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(21px) translateY(-30vh);
        transform: translateX(21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(32px) translateY(-40vh);
        transform: translateX(32px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-26px) translateY(-50vh);
        transform: translateX(-26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-9px) translateY(-100vh);
        transform: translateX(-9px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-45 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(15px) translateY(-10vh);
        transform: translateX(15px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-31px) translateY(-20vh);
        transform: translateX(-31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(21px) translateY(-30vh);
        transform: translateX(21px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(32px) translateY(-40vh);
        transform: translateX(32px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-26px) translateY(-50vh);
        transform: translateX(-26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-9px) translateY(-100vh);
        transform: translateX(-9px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(45) {
    -webkit-animation-name: particle-45;
    animation-name: particle-45;
}
@-webkit-keyframes particle-46 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(0px) translateY(-20vh);
        transform: translateX(0px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(32px) translateY(-30vh);
        transform: translateX(32px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(29px) translateY(-50vh);
        transform: translateX(29px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-46 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(0px) translateY(-20vh);
        transform: translateX(0px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(32px) translateY(-30vh);
        transform: translateX(32px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-23px) translateY(-40vh);
        transform: translateX(-23px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(29px) translateY(-50vh);
        transform: translateX(29px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(24px) translateY(-100vh);
        transform: translateX(24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(46) {
    -webkit-animation-name: particle-46;
    animation-name: particle-46;
}
@-webkit-keyframes particle-47 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-23px) translateY(-10vh);
        transform: translateX(-23px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(26px) translateY(-40vh);
        transform: translateX(26px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-21px) translateY(-50vh);
        transform: translateX(-21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(3px) translateY(-100vh);
        transform: translateX(3px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-47 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-23px) translateY(-10vh);
        transform: translateX(-23px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(26px) translateY(-40vh);
        transform: translateX(26px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-21px) translateY(-50vh);
        transform: translateX(-21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(3px) translateY(-100vh);
        transform: translateX(3px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(47) {
    -webkit-animation-name: particle-47;
    animation-name: particle-47;
}
@-webkit-keyframes particle-48 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-20px) translateY(-10vh);
        transform: translateX(-20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(5px) translateY(-20vh);
        transform: translateX(5px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-6px) translateY(-30vh);
        transform: translateX(-6px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-15px) translateY(-40vh);
        transform: translateX(-15px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-2px) translateY(-50vh);
        transform: translateX(-2px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(29px) translateY(-100vh);
        transform: translateX(29px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-48 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-20px) translateY(-10vh);
        transform: translateX(-20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(5px) translateY(-20vh);
        transform: translateX(5px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-6px) translateY(-30vh);
        transform: translateX(-6px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-15px) translateY(-40vh);
        transform: translateX(-15px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-2px) translateY(-50vh);
        transform: translateX(-2px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(29px) translateY(-100vh);
        transform: translateX(29px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(48) {
    -webkit-animation-name: particle-48;
    animation-name: particle-48;
}
@-webkit-keyframes particle-49 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(24px) translateY(-10vh);
        transform: translateX(24px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-9px) translateY(-30vh);
        transform: translateX(-9px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(17px) translateY(-40vh);
        transform: translateX(17px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-22px) translateY(-50vh);
        transform: translateX(-22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(30px) translateY(-100vh);
        transform: translateX(30px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-49 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(24px) translateY(-10vh);
        transform: translateX(24px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-9px) translateY(-30vh);
        transform: translateX(-9px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(17px) translateY(-40vh);
        transform: translateX(17px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-22px) translateY(-50vh);
        transform: translateX(-22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(30px) translateY(-100vh);
        transform: translateX(30px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(49) {
    -webkit-animation-name: particle-49;
    animation-name: particle-49;
}
@-webkit-keyframes particle-50 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(13px) translateY(-30vh);
        transform: translateX(13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(18px) translateY(-40vh);
        transform: translateX(18px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(23px) translateY(-50vh);
        transform: translateX(23px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-21px) translateY(-100vh);
        transform: translateX(-21px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-50 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(13px) translateY(-30vh);
        transform: translateX(13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(18px) translateY(-40vh);
        transform: translateX(18px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(23px) translateY(-50vh);
        transform: translateX(23px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-21px) translateY(-100vh);
        transform: translateX(-21px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(50) {
    -webkit-animation-name: particle-50;
    animation-name: particle-50;
}
@-webkit-keyframes particle-51 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(4px) translateY(-10vh);
        transform: translateX(4px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(17px) translateY(-20vh);
        transform: translateX(17px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-37px) translateY(-30vh);
        transform: translateX(-37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-35px) translateY(-40vh);
        transform: translateX(-35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-20px) translateY(-50vh);
        transform: translateX(-20px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(38px) translateY(-100vh);
        transform: translateX(38px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-51 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(4px) translateY(-10vh);
        transform: translateX(4px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(17px) translateY(-20vh);
        transform: translateX(17px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-37px) translateY(-30vh);
        transform: translateX(-37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-35px) translateY(-40vh);
        transform: translateX(-35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-20px) translateY(-50vh);
        transform: translateX(-20px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(38px) translateY(-100vh);
        transform: translateX(38px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(51) {
    -webkit-animation-name: particle-51;
    animation-name: particle-51;
}
@-webkit-keyframes particle-52 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(27px) translateY(-10vh);
        transform: translateX(27px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-20px) translateY(-20vh);
        transform: translateX(-20px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-13px) translateY(-30vh);
        transform: translateX(-13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(11px) translateY(-40vh);
        transform: translateX(11px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(9px) translateY(-50vh);
        transform: translateX(9px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(38px) translateY(-100vh);
        transform: translateX(38px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-52 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(27px) translateY(-10vh);
        transform: translateX(27px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-20px) translateY(-20vh);
        transform: translateX(-20px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-13px) translateY(-30vh);
        transform: translateX(-13px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(11px) translateY(-40vh);
        transform: translateX(11px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(9px) translateY(-50vh);
        transform: translateX(9px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(38px) translateY(-100vh);
        transform: translateX(38px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(52) {
    -webkit-animation-name: particle-52;
    animation-name: particle-52;
}
@-webkit-keyframes particle-53 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-22px) translateY(-10vh);
        transform: translateX(-22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-34px) translateY(-30vh);
        transform: translateX(-34px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(13px) translateY(-40vh);
        transform: translateX(13px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-18px) translateY(-50vh);
        transform: translateX(-18px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(16px) translateY(-100vh);
        transform: translateX(16px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-53 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-22px) translateY(-10vh);
        transform: translateX(-22px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-34px) translateY(-30vh);
        transform: translateX(-34px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(13px) translateY(-40vh);
        transform: translateX(13px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-18px) translateY(-50vh);
        transform: translateX(-18px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(16px) translateY(-100vh);
        transform: translateX(16px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(53) {
    -webkit-animation-name: particle-53;
    animation-name: particle-53;
}
@-webkit-keyframes particle-54 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(32px) translateY(-10vh);
        transform: translateX(32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-25px) translateY(-20vh);
        transform: translateX(-25px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-9px) translateY(-30vh);
        transform: translateX(-9px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-14px) translateY(-40vh);
        transform: translateX(-14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(13px) translateY(-50vh);
        transform: translateX(13px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-9px) translateY(-100vh);
        transform: translateX(-9px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-54 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(32px) translateY(-10vh);
        transform: translateX(32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-25px) translateY(-20vh);
        transform: translateX(-25px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-9px) translateY(-30vh);
        transform: translateX(-9px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-14px) translateY(-40vh);
        transform: translateX(-14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(13px) translateY(-50vh);
        transform: translateX(13px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-9px) translateY(-100vh);
        transform: translateX(-9px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(54) {
    -webkit-animation-name: particle-54;
    animation-name: particle-54;
}
@-webkit-keyframes particle-55 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(14px) translateY(-10vh);
        transform: translateX(14px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(15px) translateY(-20vh);
        transform: translateX(15px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-34px) translateY(-30vh);
        transform: translateX(-34px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-6px) translateY(-40vh);
        transform: translateX(-6px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-37px) translateY(-50vh);
        transform: translateX(-37px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(35px) translateY(-100vh);
        transform: translateX(35px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-55 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(14px) translateY(-10vh);
        transform: translateX(14px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(15px) translateY(-20vh);
        transform: translateX(15px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-34px) translateY(-30vh);
        transform: translateX(-34px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-6px) translateY(-40vh);
        transform: translateX(-6px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-37px) translateY(-50vh);
        transform: translateX(-37px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(35px) translateY(-100vh);
        transform: translateX(35px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(55) {
    -webkit-animation-name: particle-55;
    animation-name: particle-55;
}
@-webkit-keyframes particle-56 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(32px) translateY(-10vh);
        transform: translateX(32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(39px) translateY(-20vh);
        transform: translateX(39px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-1px) translateY(-30vh);
        transform: translateX(-1px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(26px) translateY(-40vh);
        transform: translateX(26px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-30px) translateY(-50vh);
        transform: translateX(-30px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(30px) translateY(-100vh);
        transform: translateX(30px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-56 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(32px) translateY(-10vh);
        transform: translateX(32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(39px) translateY(-20vh);
        transform: translateX(39px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-1px) translateY(-30vh);
        transform: translateX(-1px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(26px) translateY(-40vh);
        transform: translateX(26px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-30px) translateY(-50vh);
        transform: translateX(-30px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(30px) translateY(-100vh);
        transform: translateX(30px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(56) {
    -webkit-animation-name: particle-56;
    animation-name: particle-56;
}
@-webkit-keyframes particle-57 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-25px) translateY(-10vh);
        transform: translateX(-25px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(3px) translateY(-20vh);
        transform: translateX(3px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-10px) translateY(-30vh);
        transform: translateX(-10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(14px) translateY(-40vh);
        transform: translateX(14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-6px) translateY(-50vh);
        transform: translateX(-6px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-38px) translateY(-100vh);
        transform: translateX(-38px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-57 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-25px) translateY(-10vh);
        transform: translateX(-25px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(3px) translateY(-20vh);
        transform: translateX(3px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-10px) translateY(-30vh);
        transform: translateX(-10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(14px) translateY(-40vh);
        transform: translateX(14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-6px) translateY(-50vh);
        transform: translateX(-6px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-38px) translateY(-100vh);
        transform: translateX(-38px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(57) {
    -webkit-animation-name: particle-57;
    animation-name: particle-57;
}
@-webkit-keyframes particle-58 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-19px) translateY(-30vh);
        transform: translateX(-19px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-12px) translateY(-40vh);
        transform: translateX(-12px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-21px) translateY(-50vh);
        transform: translateX(-21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(3px) translateY(-100vh);
        transform: translateX(3px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-58 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-19px) translateY(-30vh);
        transform: translateX(-19px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-12px) translateY(-40vh);
        transform: translateX(-12px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-21px) translateY(-50vh);
        transform: translateX(-21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(3px) translateY(-100vh);
        transform: translateX(3px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(58) {
    -webkit-animation-name: particle-58;
    animation-name: particle-58;
}
@-webkit-keyframes particle-59 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-23px) translateY(-10vh);
        transform: translateX(-23px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-4px) translateY(-40vh);
        transform: translateX(-4px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-25px) translateY(-50vh);
        transform: translateX(-25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-59 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-23px) translateY(-10vh);
        transform: translateX(-23px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-4px) translateY(-40vh);
        transform: translateX(-4px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-25px) translateY(-50vh);
        transform: translateX(-25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(59) {
    -webkit-animation-name: particle-59;
    animation-name: particle-59;
}
@-webkit-keyframes particle-60 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-29px) translateY(-20vh);
        transform: translateX(-29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(24px) translateY(-30vh);
        transform: translateX(24px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-3px) translateY(-40vh);
        transform: translateX(-3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(29px) translateY(-50vh);
        transform: translateX(29px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(3px) translateY(-100vh);
        transform: translateX(3px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-60 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-29px) translateY(-20vh);
        transform: translateX(-29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(24px) translateY(-30vh);
        transform: translateX(24px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-3px) translateY(-40vh);
        transform: translateX(-3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(29px) translateY(-50vh);
        transform: translateX(29px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(3px) translateY(-100vh);
        transform: translateX(3px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(60) {
    -webkit-animation-name: particle-60;
    animation-name: particle-60;
}
@-webkit-keyframes particle-61 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(7px) translateY(-10vh);
        transform: translateX(7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(5px) translateY(-20vh);
        transform: translateX(5px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-30px) translateY(-30vh);
        transform: translateX(-30px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(33px) translateY(-40vh);
        transform: translateX(33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(26px) translateY(-50vh);
        transform: translateX(26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-34px) translateY(-100vh);
        transform: translateX(-34px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-61 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(7px) translateY(-10vh);
        transform: translateX(7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(5px) translateY(-20vh);
        transform: translateX(5px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-30px) translateY(-30vh);
        transform: translateX(-30px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(33px) translateY(-40vh);
        transform: translateX(33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(26px) translateY(-50vh);
        transform: translateX(26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-34px) translateY(-100vh);
        transform: translateX(-34px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(61) {
    -webkit-animation-name: particle-61;
    animation-name: particle-61;
}
@-webkit-keyframes particle-62 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(35px) translateY(-10vh);
        transform: translateX(35px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-24px) translateY(-20vh);
        transform: translateX(-24px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-37px) translateY(-30vh);
        transform: translateX(-37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(40px) translateY(-40vh);
        transform: translateX(40px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(20px) translateY(-100vh);
        transform: translateX(20px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-62 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(35px) translateY(-10vh);
        transform: translateX(35px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-24px) translateY(-20vh);
        transform: translateX(-24px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-37px) translateY(-30vh);
        transform: translateX(-37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(40px) translateY(-40vh);
        transform: translateX(40px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(20px) translateY(-100vh);
        transform: translateX(20px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(62) {
    -webkit-animation-name: particle-62;
    animation-name: particle-62;
}
@-webkit-keyframes particle-63 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(32px) translateY(-10vh);
        transform: translateX(32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(40px) translateY(-20vh);
        transform: translateX(40px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-29px) translateY(-30vh);
        transform: translateX(-29px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-30px) translateY(-40vh);
        transform: translateX(-30px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-2px) translateY(-50vh);
        transform: translateX(-2px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-15px) translateY(-100vh);
        transform: translateX(-15px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-63 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(32px) translateY(-10vh);
        transform: translateX(32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(40px) translateY(-20vh);
        transform: translateX(40px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-29px) translateY(-30vh);
        transform: translateX(-29px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-30px) translateY(-40vh);
        transform: translateX(-30px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-2px) translateY(-50vh);
        transform: translateX(-2px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-15px) translateY(-100vh);
        transform: translateX(-15px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(63) {
    -webkit-animation-name: particle-63;
    animation-name: particle-63;
}
@-webkit-keyframes particle-64 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(6px) translateY(-10vh);
        transform: translateX(6px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(2px) translateY(-20vh);
        transform: translateX(2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-14px) translateY(-40vh);
        transform: translateX(-14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-3px) translateY(-100vh);
        transform: translateX(-3px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-64 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(6px) translateY(-10vh);
        transform: translateX(6px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(2px) translateY(-20vh);
        transform: translateX(2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(22px) translateY(-30vh);
        transform: translateX(22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-14px) translateY(-40vh);
        transform: translateX(-14px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-3px) translateY(-100vh);
        transform: translateX(-3px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(64) {
    -webkit-animation-name: particle-64;
    animation-name: particle-64;
}
@-webkit-keyframes particle-65 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(20px) translateY(-10vh);
        transform: translateX(20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-35px) translateY(-20vh);
        transform: translateX(-35px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(29px) translateY(-30vh);
        transform: translateX(29px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(25px) translateY(-40vh);
        transform: translateX(25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-1px) translateY(-50vh);
        transform: translateX(-1px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-65 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(20px) translateY(-10vh);
        transform: translateX(20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-35px) translateY(-20vh);
        transform: translateX(-35px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(29px) translateY(-30vh);
        transform: translateX(29px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(25px) translateY(-40vh);
        transform: translateX(25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-1px) translateY(-50vh);
        transform: translateX(-1px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(65) {
    -webkit-animation-name: particle-65;
    animation-name: particle-65;
}
@-webkit-keyframes particle-66 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(25px) translateY(-10vh);
        transform: translateX(25px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(33px) translateY(-20vh);
        transform: translateX(33px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(23px) translateY(-30vh);
        transform: translateX(23px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-19px) translateY(-40vh);
        transform: translateX(-19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(26px) translateY(-50vh);
        transform: translateX(26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(8px) translateY(-100vh);
        transform: translateX(8px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-66 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(25px) translateY(-10vh);
        transform: translateX(25px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(33px) translateY(-20vh);
        transform: translateX(33px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(23px) translateY(-30vh);
        transform: translateX(23px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-19px) translateY(-40vh);
        transform: translateX(-19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(26px) translateY(-50vh);
        transform: translateX(26px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(8px) translateY(-100vh);
        transform: translateX(8px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(66) {
    -webkit-animation-name: particle-66;
    animation-name: particle-66;
}
@-webkit-keyframes particle-67 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(35px) translateY(-20vh);
        transform: translateX(35px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(10px) translateY(-30vh);
        transform: translateX(10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(38px) translateY(-40vh);
        transform: translateX(38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-2px) translateY(-100vh);
        transform: translateX(-2px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-67 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(3px) translateY(-10vh);
        transform: translateX(3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(35px) translateY(-20vh);
        transform: translateX(35px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(10px) translateY(-30vh);
        transform: translateX(10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(38px) translateY(-40vh);
        transform: translateX(38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-2px) translateY(-100vh);
        transform: translateX(-2px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(67) {
    -webkit-animation-name: particle-67;
    animation-name: particle-67;
}
@-webkit-keyframes particle-68 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(39px) translateY(-10vh);
        transform: translateX(39px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(4px) translateY(-20vh);
        transform: translateX(4px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-28px) translateY(-30vh);
        transform: translateX(-28px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(38px) translateY(-40vh);
        transform: translateX(38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-15px) translateY(-50vh);
        transform: translateX(-15px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(6px) translateY(-100vh);
        transform: translateX(6px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-68 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(39px) translateY(-10vh);
        transform: translateX(39px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(4px) translateY(-20vh);
        transform: translateX(4px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-28px) translateY(-30vh);
        transform: translateX(-28px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(38px) translateY(-40vh);
        transform: translateX(38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-15px) translateY(-50vh);
        transform: translateX(-15px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(6px) translateY(-100vh);
        transform: translateX(6px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(68) {
    -webkit-animation-name: particle-68;
    animation-name: particle-68;
}
@-webkit-keyframes particle-69 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-11px) translateY(-10vh);
        transform: translateX(-11px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(14px) translateY(-20vh);
        transform: translateX(14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-35px) translateY(-30vh);
        transform: translateX(-35px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-38px) translateY(-40vh);
        transform: translateX(-38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(16px) translateY(-50vh);
        transform: translateX(16px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(28px) translateY(-100vh);
        transform: translateX(28px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-69 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-11px) translateY(-10vh);
        transform: translateX(-11px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(14px) translateY(-20vh);
        transform: translateX(14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-35px) translateY(-30vh);
        transform: translateX(-35px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-38px) translateY(-40vh);
        transform: translateX(-38px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(16px) translateY(-50vh);
        transform: translateX(16px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(28px) translateY(-100vh);
        transform: translateX(28px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(69) {
    -webkit-animation-name: particle-69;
    animation-name: particle-69;
}
@-webkit-keyframes particle-70 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-20px) translateY(-10vh);
        transform: translateX(-20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-23px) translateY(-20vh);
        transform: translateX(-23px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(16px) translateY(-30vh);
        transform: translateX(16px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(22px) translateY(-40vh);
        transform: translateX(22px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(1px) translateY(-50vh);
        transform: translateX(1px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(4px) translateY(-100vh);
        transform: translateX(4px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-70 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-20px) translateY(-10vh);
        transform: translateX(-20px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-23px) translateY(-20vh);
        transform: translateX(-23px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(16px) translateY(-30vh);
        transform: translateX(16px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(22px) translateY(-40vh);
        transform: translateX(22px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(1px) translateY(-50vh);
        transform: translateX(1px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(4px) translateY(-100vh);
        transform: translateX(4px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(70) {
    -webkit-animation-name: particle-70;
    animation-name: particle-70;
}
@-webkit-keyframes particle-71 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(28px) translateY(-10vh);
        transform: translateX(28px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(30px) translateY(-20vh);
        transform: translateX(30px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-27px) translateY(-30vh);
        transform: translateX(-27px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-15px) translateY(-40vh);
        transform: translateX(-15px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-10px) translateY(-50vh);
        transform: translateX(-10px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(8px) translateY(-100vh);
        transform: translateX(8px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-71 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(28px) translateY(-10vh);
        transform: translateX(28px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(30px) translateY(-20vh);
        transform: translateX(30px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-27px) translateY(-30vh);
        transform: translateX(-27px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-15px) translateY(-40vh);
        transform: translateX(-15px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-10px) translateY(-50vh);
        transform: translateX(-10px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(8px) translateY(-100vh);
        transform: translateX(8px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(71) {
    -webkit-animation-name: particle-71;
    animation-name: particle-71;
}
@-webkit-keyframes particle-72 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-33px) translateY(-10vh);
        transform: translateX(-33px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(23px) translateY(-20vh);
        transform: translateX(23px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-15px) translateY(-30vh);
        transform: translateX(-15px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-32px) translateY(-40vh);
        transform: translateX(-32px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(19px) translateY(-50vh);
        transform: translateX(19px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(38px) translateY(-100vh);
        transform: translateX(38px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-72 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-33px) translateY(-10vh);
        transform: translateX(-33px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(23px) translateY(-20vh);
        transform: translateX(23px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-15px) translateY(-30vh);
        transform: translateX(-15px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-32px) translateY(-40vh);
        transform: translateX(-32px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(19px) translateY(-50vh);
        transform: translateX(19px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(38px) translateY(-100vh);
        transform: translateX(38px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(72) {
    -webkit-animation-name: particle-72;
    animation-name: particle-72;
}
@-webkit-keyframes particle-73 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-26px) translateY(-10vh);
        transform: translateX(-26px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-8px) translateY(-20vh);
        transform: translateX(-8px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-22px) translateY(-30vh);
        transform: translateX(-22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-17px) translateY(-40vh);
        transform: translateX(-17px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(32px) translateY(-50vh);
        transform: translateX(32px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(19px) translateY(-100vh);
        transform: translateX(19px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-73 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-26px) translateY(-10vh);
        transform: translateX(-26px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-8px) translateY(-20vh);
        transform: translateX(-8px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-22px) translateY(-30vh);
        transform: translateX(-22px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-17px) translateY(-40vh);
        transform: translateX(-17px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(32px) translateY(-50vh);
        transform: translateX(32px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(19px) translateY(-100vh);
        transform: translateX(19px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(73) {
    -webkit-animation-name: particle-73;
    animation-name: particle-73;
}
@-webkit-keyframes particle-74 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(16px) translateY(-10vh);
        transform: translateX(16px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(0px) translateY(-20vh);
        transform: translateX(0px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(7px) translateY(-30vh);
        transform: translateX(7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(19px) translateY(-40vh);
        transform: translateX(19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(3px) translateY(-50vh);
        transform: translateX(3px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-11px) translateY(-100vh);
        transform: translateX(-11px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-74 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(16px) translateY(-10vh);
        transform: translateX(16px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(0px) translateY(-20vh);
        transform: translateX(0px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(7px) translateY(-30vh);
        transform: translateX(7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(19px) translateY(-40vh);
        transform: translateX(19px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(3px) translateY(-50vh);
        transform: translateX(3px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-11px) translateY(-100vh);
        transform: translateX(-11px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(74) {
    -webkit-animation-name: particle-74;
    animation-name: particle-74;
}
@-webkit-keyframes particle-75 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(14px) translateY(-10vh);
        transform: translateX(14px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-32px) translateY(-40vh);
        transform: translateX(-32px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(18px) translateY(-50vh);
        transform: translateX(18px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(35px) translateY(-100vh);
        transform: translateX(35px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-75 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(14px) translateY(-10vh);
        transform: translateX(14px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-12px) translateY(-30vh);
        transform: translateX(-12px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-32px) translateY(-40vh);
        transform: translateX(-32px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(18px) translateY(-50vh);
        transform: translateX(18px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(35px) translateY(-100vh);
        transform: translateX(35px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(75) {
    -webkit-animation-name: particle-75;
    animation-name: particle-75;
}
@-webkit-keyframes particle-76 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(10px) translateY(-10vh);
        transform: translateX(10px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(26px) translateY(-20vh);
        transform: translateX(26px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(37px) translateY(-30vh);
        transform: translateX(37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-24px) translateY(-40vh);
        transform: translateX(-24px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-15px) translateY(-50vh);
        transform: translateX(-15px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-76 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(10px) translateY(-10vh);
        transform: translateX(10px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(26px) translateY(-20vh);
        transform: translateX(26px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(37px) translateY(-30vh);
        transform: translateX(37px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-24px) translateY(-40vh);
        transform: translateX(-24px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-15px) translateY(-50vh);
        transform: translateX(-15px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(37px) translateY(-100vh);
        transform: translateX(37px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(76) {
    -webkit-animation-name: particle-76;
    animation-name: particle-76;
}
@-webkit-keyframes particle-77 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(29px) translateY(-10vh);
        transform: translateX(29px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-2px) translateY(-20vh);
        transform: translateX(-2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-34px) translateY(-40vh);
        transform: translateX(-34px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-20px) translateY(-50vh);
        transform: translateX(-20px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(25px) translateY(-100vh);
        transform: translateX(25px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-77 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(29px) translateY(-10vh);
        transform: translateX(29px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-2px) translateY(-20vh);
        transform: translateX(-2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-34px) translateY(-40vh);
        transform: translateX(-34px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-20px) translateY(-50vh);
        transform: translateX(-20px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(25px) translateY(-100vh);
        transform: translateX(25px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(77) {
    -webkit-animation-name: particle-77;
    animation-name: particle-77;
}
@-webkit-keyframes particle-78 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(18px) translateY(-20vh);
        transform: translateX(18px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-4px) translateY(-30vh);
        transform: translateX(-4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-27px) translateY(-50vh);
        transform: translateX(-27px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-7px) translateY(-100vh);
        transform: translateX(-7px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-78 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(31px) translateY(-10vh);
        transform: translateX(31px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(18px) translateY(-20vh);
        transform: translateX(18px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-4px) translateY(-30vh);
        transform: translateX(-4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-27px) translateY(-50vh);
        transform: translateX(-27px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-7px) translateY(-100vh);
        transform: translateX(-7px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(78) {
    -webkit-animation-name: particle-78;
    animation-name: particle-78;
}
@-webkit-keyframes particle-79 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-5px) translateY(-10vh);
        transform: translateX(-5px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-16px) translateY(-20vh);
        transform: translateX(-16px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(39px) translateY(-30vh);
        transform: translateX(39px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-25px) translateY(-40vh);
        transform: translateX(-25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(18px) translateY(-100vh);
        transform: translateX(18px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-79 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-5px) translateY(-10vh);
        transform: translateX(-5px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-16px) translateY(-20vh);
        transform: translateX(-16px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(39px) translateY(-30vh);
        transform: translateX(39px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-25px) translateY(-40vh);
        transform: translateX(-25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-36px) translateY(-50vh);
        transform: translateX(-36px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(18px) translateY(-100vh);
        transform: translateX(18px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(79) {
    -webkit-animation-name: particle-79;
    animation-name: particle-79;
}
@-webkit-keyframes particle-80 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(35px) translateY(-10vh);
        transform: translateX(35px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-15px) translateY(-20vh);
        transform: translateX(-15px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(4px) translateY(-30vh);
        transform: translateX(4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-35px) translateY(-40vh);
        transform: translateX(-35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(30px) translateY(-50vh);
        transform: translateX(30px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(36px) translateY(-100vh);
        transform: translateX(36px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-80 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(35px) translateY(-10vh);
        transform: translateX(35px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-15px) translateY(-20vh);
        transform: translateX(-15px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(4px) translateY(-30vh);
        transform: translateX(4px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-35px) translateY(-40vh);
        transform: translateX(-35px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(30px) translateY(-50vh);
        transform: translateX(30px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(36px) translateY(-100vh);
        transform: translateX(36px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(80) {
    -webkit-animation-name: particle-80;
    animation-name: particle-80;
}
@-webkit-keyframes particle-81 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-7px) translateY(-10vh);
        transform: translateX(-7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(37px) translateY(-20vh);
        transform: translateX(37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-3px) translateY(-30vh);
        transform: translateX(-3px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-3px) translateY(-40vh);
        transform: translateX(-3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-22px) translateY(-50vh);
        transform: translateX(-22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(2px) translateY(-100vh);
        transform: translateX(2px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-81 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-7px) translateY(-10vh);
        transform: translateX(-7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(37px) translateY(-20vh);
        transform: translateX(37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-3px) translateY(-30vh);
        transform: translateX(-3px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-3px) translateY(-40vh);
        transform: translateX(-3px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-22px) translateY(-50vh);
        transform: translateX(-22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(2px) translateY(-100vh);
        transform: translateX(2px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(81) {
    -webkit-animation-name: particle-81;
    animation-name: particle-81;
}
@-webkit-keyframes particle-82 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-13px) translateY(-10vh);
        transform: translateX(-13px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-19px) translateY(-20vh);
        transform: translateX(-19px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(19px) translateY(-30vh);
        transform: translateX(19px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(13px) translateY(-40vh);
        transform: translateX(13px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(11px) translateY(-50vh);
        transform: translateX(11px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-30px) translateY(-100vh);
        transform: translateX(-30px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-82 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-13px) translateY(-10vh);
        transform: translateX(-13px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-19px) translateY(-20vh);
        transform: translateX(-19px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(19px) translateY(-30vh);
        transform: translateX(19px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(13px) translateY(-40vh);
        transform: translateX(13px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(11px) translateY(-50vh);
        transform: translateX(11px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-30px) translateY(-100vh);
        transform: translateX(-30px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(82) {
    -webkit-animation-name: particle-82;
    animation-name: particle-82;
}
@-webkit-keyframes particle-83 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(35px) translateY(-10vh);
        transform: translateX(35px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-38px) translateY(-20vh);
        transform: translateX(-38px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(16px) translateY(-30vh);
        transform: translateX(16px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-33px) translateY(-40vh);
        transform: translateX(-33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(15px) translateY(-100vh);
        transform: translateX(15px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-83 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(35px) translateY(-10vh);
        transform: translateX(35px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-38px) translateY(-20vh);
        transform: translateX(-38px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(16px) translateY(-30vh);
        transform: translateX(16px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-33px) translateY(-40vh);
        transform: translateX(-33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(15px) translateY(-100vh);
        transform: translateX(15px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(83) {
    -webkit-animation-name: particle-83;
    animation-name: particle-83;
}
@-webkit-keyframes particle-84 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-15px) translateY(-10vh);
        transform: translateX(-15px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(14px) translateY(-30vh);
        transform: translateX(14px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(31px) translateY(-40vh);
        transform: translateX(31px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-33px) translateY(-50vh);
        transform: translateX(-33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(16px) translateY(-100vh);
        transform: translateX(16px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-84 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-15px) translateY(-10vh);
        transform: translateX(-15px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(14px) translateY(-30vh);
        transform: translateX(14px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(31px) translateY(-40vh);
        transform: translateX(31px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-33px) translateY(-50vh);
        transform: translateX(-33px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(16px) translateY(-100vh);
        transform: translateX(16px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(84) {
    -webkit-animation-name: particle-84;
    animation-name: particle-84;
}
@-webkit-keyframes particle-85 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-6px) translateY(-10vh);
        transform: translateX(-6px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(2px) translateY(-20vh);
        transform: translateX(2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(27px) translateY(-30vh);
        transform: translateX(27px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(34px) translateY(-50vh);
        transform: translateX(34px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-28px) translateY(-100vh);
        transform: translateX(-28px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-85 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-6px) translateY(-10vh);
        transform: translateX(-6px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(2px) translateY(-20vh);
        transform: translateX(2px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(27px) translateY(-30vh);
        transform: translateX(27px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(34px) translateY(-50vh);
        transform: translateX(34px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-28px) translateY(-100vh);
        transform: translateX(-28px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(85) {
    -webkit-animation-name: particle-85;
    animation-name: particle-85;
}
@-webkit-keyframes particle-86 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-32px) translateY(-10vh);
        transform: translateX(-32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-14px) translateY(-20vh);
        transform: translateX(-14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-2px) translateY(-30vh);
        transform: translateX(-2px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(12px) translateY(-40vh);
        transform: translateX(12px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-9px) translateY(-50vh);
        transform: translateX(-9px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(5px) translateY(-100vh);
        transform: translateX(5px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-86 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-32px) translateY(-10vh);
        transform: translateX(-32px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-14px) translateY(-20vh);
        transform: translateX(-14px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-2px) translateY(-30vh);
        transform: translateX(-2px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(12px) translateY(-40vh);
        transform: translateX(12px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-9px) translateY(-50vh);
        transform: translateX(-9px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(5px) translateY(-100vh);
        transform: translateX(5px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(86) {
    -webkit-animation-name: particle-86;
    animation-name: particle-86;
}
@-webkit-keyframes particle-87 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(4px) translateY(-10vh);
        transform: translateX(4px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(40px) translateY(-20vh);
        transform: translateX(40px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(26px) translateY(-30vh);
        transform: translateX(26px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(25px) translateY(-40vh);
        transform: translateX(25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(23px) translateY(-100vh);
        transform: translateX(23px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-87 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(4px) translateY(-10vh);
        transform: translateX(4px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(40px) translateY(-20vh);
        transform: translateX(40px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(26px) translateY(-30vh);
        transform: translateX(26px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(25px) translateY(-40vh);
        transform: translateX(25px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(22px) translateY(-50vh);
        transform: translateX(22px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(23px) translateY(-100vh);
        transform: translateX(23px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(87) {
    -webkit-animation-name: particle-87;
    animation-name: particle-87;
}
@-webkit-keyframes particle-88 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-3px) translateY(-10vh);
        transform: translateX(-3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-27px) translateY(-20vh);
        transform: translateX(-27px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-23px) translateY(-30vh);
        transform: translateX(-23px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(0px) translateY(-40vh);
        transform: translateX(0px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-88 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-3px) translateY(-10vh);
        transform: translateX(-3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-27px) translateY(-20vh);
        transform: translateX(-27px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-23px) translateY(-30vh);
        transform: translateX(-23px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(0px) translateY(-40vh);
        transform: translateX(0px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(88) {
    -webkit-animation-name: particle-88;
    animation-name: particle-88;
}
@-webkit-keyframes particle-89 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-4px) translateY(-10vh);
        transform: translateX(-4px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(33px) translateY(-20vh);
        transform: translateX(33px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-39px) translateY(-30vh);
        transform: translateX(-39px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-29px) translateY(-40vh);
        transform: translateX(-29px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(9px) translateY(-100vh);
        transform: translateX(9px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-89 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-4px) translateY(-10vh);
        transform: translateX(-4px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(33px) translateY(-20vh);
        transform: translateX(33px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-39px) translateY(-30vh);
        transform: translateX(-39px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-29px) translateY(-40vh);
        transform: translateX(-29px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(9px) translateY(-100vh);
        transform: translateX(9px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(89) {
    -webkit-animation-name: particle-89;
    animation-name: particle-89;
}
@-webkit-keyframes particle-90 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(21px) translateY(-10vh);
        transform: translateX(21px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(36px) translateY(-30vh);
        transform: translateX(36px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-7px) translateY(-40vh);
        transform: translateX(-7px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-17px) translateY(-50vh);
        transform: translateX(-17px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-90 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(21px) translateY(-10vh);
        transform: translateX(21px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(36px) translateY(-30vh);
        transform: translateX(36px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-7px) translateY(-40vh);
        transform: translateX(-7px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-17px) translateY(-50vh);
        transform: translateX(-17px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(90) {
    -webkit-animation-name: particle-90;
    animation-name: particle-90;
}
@-webkit-keyframes particle-91 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(12px) translateY(-10vh);
        transform: translateX(12px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(40px) translateY(-30vh);
        transform: translateX(40px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-8px) translateY(-40vh);
        transform: translateX(-8px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-25px) translateY(-50vh);
        transform: translateX(-25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(21px) translateY(-100vh);
        transform: translateX(21px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-91 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(12px) translateY(-10vh);
        transform: translateX(12px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-37px) translateY(-20vh);
        transform: translateX(-37px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(40px) translateY(-30vh);
        transform: translateX(40px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-8px) translateY(-40vh);
        transform: translateX(-8px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-25px) translateY(-50vh);
        transform: translateX(-25px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(21px) translateY(-100vh);
        transform: translateX(21px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(91) {
    -webkit-animation-name: particle-91;
    animation-name: particle-91;
}
@-webkit-keyframes particle-92 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-3px) translateY(-10vh);
        transform: translateX(-3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(31px) translateY(-20vh);
        transform: translateX(31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(23px) translateY(-30vh);
        transform: translateX(23px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(7px) translateY(-40vh);
        transform: translateX(7px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-6px) translateY(-50vh);
        transform: translateX(-6px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-92 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-3px) translateY(-10vh);
        transform: translateX(-3px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(31px) translateY(-20vh);
        transform: translateX(31px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(23px) translateY(-30vh);
        transform: translateX(23px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(7px) translateY(-40vh);
        transform: translateX(7px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-6px) translateY(-50vh);
        transform: translateX(-6px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(92) {
    -webkit-animation-name: particle-92;
    animation-name: particle-92;
}
@-webkit-keyframes particle-93 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-24px) translateY(-10vh);
        transform: translateX(-24px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-12px) translateY(-20vh);
        transform: translateX(-12px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(10px) translateY(-30vh);
        transform: translateX(10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-11px) translateY(-40vh);
        transform: translateX(-11px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(17px) translateY(-50vh);
        transform: translateX(17px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-7px) translateY(-100vh);
        transform: translateX(-7px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-93 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-24px) translateY(-10vh);
        transform: translateX(-24px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-12px) translateY(-20vh);
        transform: translateX(-12px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(10px) translateY(-30vh);
        transform: translateX(10px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-11px) translateY(-40vh);
        transform: translateX(-11px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(17px) translateY(-50vh);
        transform: translateX(17px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-7px) translateY(-100vh);
        transform: translateX(-7px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(93) {
    -webkit-animation-name: particle-93;
    animation-name: particle-93;
}
@-webkit-keyframes particle-94 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(26px) translateY(-10vh);
        transform: translateX(26px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-39px) translateY(-20vh);
        transform: translateX(-39px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-28px) translateY(-30vh);
        transform: translateX(-28px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-15px) translateY(-40vh);
        transform: translateX(-15px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-13px) translateY(-50vh);
        transform: translateX(-13px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-94 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(26px) translateY(-10vh);
        transform: translateX(26px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-39px) translateY(-20vh);
        transform: translateX(-39px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-28px) translateY(-30vh);
        transform: translateX(-28px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-15px) translateY(-40vh);
        transform: translateX(-15px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-13px) translateY(-50vh);
        transform: translateX(-13px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(94) {
    -webkit-animation-name: particle-94;
    animation-name: particle-94;
}
@-webkit-keyframes particle-95 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-27px) translateY(-10vh);
        transform: translateX(-27px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(17px) translateY(-30vh);
        transform: translateX(17px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-95 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-27px) translateY(-10vh);
        transform: translateX(-27px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(34px) translateY(-20vh);
        transform: translateX(34px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(17px) translateY(-30vh);
        transform: translateX(17px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-18px) translateY(-100vh);
        transform: translateX(-18px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(95) {
    -webkit-animation-name: particle-95;
    animation-name: particle-95;
}
@-webkit-keyframes particle-96 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(19px) translateY(-10vh);
        transform: translateX(19px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-29px) translateY(-20vh);
        transform: translateX(-29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-15px) translateY(-30vh);
        transform: translateX(-15px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-31px) translateY(-40vh);
        transform: translateX(-31px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-34px) translateY(-100vh);
        transform: translateX(-34px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-96 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(19px) translateY(-10vh);
        transform: translateX(19px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-29px) translateY(-20vh);
        transform: translateX(-29px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-15px) translateY(-30vh);
        transform: translateX(-15px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-31px) translateY(-40vh);
        transform: translateX(-31px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(21px) translateY(-50vh);
        transform: translateX(21px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-34px) translateY(-100vh);
        transform: translateX(-34px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(96) {
    -webkit-animation-name: particle-96;
    animation-name: particle-96;
}
@-webkit-keyframes particle-97 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-21px) translateY(-10vh);
        transform: translateX(-21px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-28px) translateY(-20vh);
        transform: translateX(-28px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(14px) translateY(-30vh);
        transform: translateX(14px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-34px) translateY(-40vh);
        transform: translateX(-34px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(23px) translateY(-50vh);
        transform: translateX(23px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-97 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-21px) translateY(-10vh);
        transform: translateX(-21px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-28px) translateY(-20vh);
        transform: translateX(-28px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(14px) translateY(-30vh);
        transform: translateX(14px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-34px) translateY(-40vh);
        transform: translateX(-34px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(23px) translateY(-50vh);
        transform: translateX(23px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-1px) translateY(-100vh);
        transform: translateX(-1px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(97) {
    -webkit-animation-name: particle-97;
    animation-name: particle-97;
}
@-webkit-keyframes particle-98 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(7px) translateY(-10vh);
        transform: translateX(7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(27px) translateY(-40vh);
        transform: translateX(27px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-39px) translateY(-50vh);
        transform: translateX(-39px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-98 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(7px) translateY(-10vh);
        transform: translateX(7px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(36px) translateY(-20vh);
        transform: translateX(36px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(-7px) translateY(-30vh);
        transform: translateX(-7px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(27px) translateY(-40vh);
        transform: translateX(27px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-39px) translateY(-50vh);
        transform: translateX(-39px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(12px) translateY(-100vh);
        transform: translateX(12px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(98) {
    -webkit-animation-name: particle-98;
    animation-name: particle-98;
}
@-webkit-keyframes particle-99 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-38px) translateY(-10vh);
        transform: translateX(-38px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-6px) translateY(-20vh);
        transform: translateX(-6px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(2px) translateY(-30vh);
        transform: translateX(2px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(8px) translateY(-100vh);
        transform: translateX(8px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-99 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-38px) translateY(-10vh);
        transform: translateX(-38px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(-6px) translateY(-20vh);
        transform: translateX(-6px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(2px) translateY(-30vh);
        transform: translateX(2px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-39px) translateY(-40vh);
        transform: translateX(-39px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-7px) translateY(-50vh);
        transform: translateX(-7px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(8px) translateY(-100vh);
        transform: translateX(8px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(99) {
    -webkit-animation-name: particle-99;
    animation-name: particle-99;
}
@-webkit-keyframes particle-100 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(40px) translateY(-10vh);
        transform: translateX(40px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(1px) translateY(-30vh);
        transform: translateX(1px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-33px) translateY(-40vh);
        transform: translateX(-33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-23px) translateY(-50vh);
        transform: translateX(-23px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
@keyframes particle-100 {
    0% {
        -webkit-transform: translateX(0px) translateY(0vh);
        transform: translateX(0px) translateY(0vh);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(40px) translateY(-10vh);
        transform: translateX(40px) translateY(-10vh);
        opacity: 0.9;
    }
    40% {
        -webkit-transform: translateX(13px) translateY(-20vh);
        transform: translateX(13px) translateY(-20vh);
        opacity: 0.8;
    }
    50% {
        -webkit-transform: translateX(1px) translateY(-30vh);
        transform: translateX(1px) translateY(-30vh);
        opacity: 0.7;
    }
    60% {
        -webkit-transform: translateX(-33px) translateY(-40vh);
        transform: translateX(-33px) translateY(-40vh);
        opacity: 0.6;
    }
    70% {
        -webkit-transform: translateX(-23px) translateY(-50vh);
        transform: translateX(-23px) translateY(-50vh);
        opacity: 0.5;
    }
    100% {
        -webkit-transform: translateX(-24px) translateY(-100vh);
        transform: translateX(-24px) translateY(-100vh);
        opacity: 0;
    }
}
.container #particles span:nth-child(100) {
    -webkit-animation-name: particle-100;
    animation-name: particle-100;
}
html,
body {
    position: relative;
    height: 100%;
    background-color: #224154;
    text-align: center;
    overflow: hidden;
    min-width: 768px;
}
.container {
    position: relative;
    width: 100%;
    height: 100%;
}
.container .background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-background.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 0;
}
.container #particles {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.container #particles span {
    display: inline-block;
    position: absolute;
    bottom: 0%;
    border-radius: 50%;
    background-color: #a42b52;
    opacity: 1;
    box-shadow: 0px 0px 10px 5px #a42b52;
    -webkit-transform: translateX(0%) translateY(0%);
    transform: translateX(0%) translateY(0%);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}
.container .foreground {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/751678/my-illustration-foreground.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 2;
}

HTML

animated background forest，比较复杂的一个CSS动画。性能一般。

css3, background

编辑器支持Emmet

快捷键

animated background forest，比较复杂的一个CSS动画。性能一般。

css3, background

HTML5 CSS3滑动对角线背景动画特效

HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：