:root {
    --offset-x: -50%;
}

.tree-box {
    animation-timing-function: linear;
}

.tree-box.l1 {
    animation-duration: 30s;
}

.tree-box.l2 {
    animation-duration: 90s;
}

.tree-box.l3 {
    animation-duration: 180s;
}

.anim-tree-0 {
    animation-name: anim-tree-0;
}

.anim-tree-1 {
    animation-name: anim-tree-1;
}

.anim-tree-2 {
    animation-name: anim-tree-2;
}

.anim-tree-3 {
    animation-name: anim-tree-3;
}

.anim-tree-4 {
    animation-name: anim-tree-4;
}

.anim-tree-5 {
    animation-name: anim-tree-5;
}

.anim-tree-6 {
    animation-name: anim-tree-6;
}

.anim-tree-7 {
    animation-name: anim-tree-7;
}

.anim-tree-8 {
    animation-name: anim-tree-8;
}

.anim-tree-9 {
    animation-name: anim-tree-9;
}

@keyframes anim-tree-0 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(-200%, 0);
    }
}

@keyframes anim-tree-1 {
    0% { transform: translate(-10%, 0); }
    100% { transform: translate(-210%, 0); }
}

@keyframes anim-tree-2 {
    0% { transform: translate(-20%, 0); }
    100% { transform: translate(-220%, 0); }
}

@keyframes anim-tree-3 {
    0% { transform: translate(-30%, 0); }
    100% { transform: translate(-230%, 0); }
}

@keyframes anim-tree-4 {
    0% { transform: translate(-40%, 0); }
    100% { transform: translate(-240%, 0); }
}

@keyframes anim-tree-5 {
    0% { transform: translate(-50%, 0); }
    100% { transform: translate(-250%, 0); }
}

@keyframes anim-tree-6 {
    0% { transform: translate(-60%, 0); }
    100% { transform: translate(-260%, 0); }
}

@keyframes anim-tree-7 {
    0% { transform: translate(-70%, 0); }
    100% { transform: translate(-270%, 0); }
}

@keyframes anim-tree-8 {
    0% { transform: translate(-80%, 0); }
    100% { transform: translate(-280%, 0); }
}

@keyframes anim-tree-9 {
    0% { transform: translate(-90%, 0); }
    100% { transform: translate(-290%, 0); }
}

@keyframes anim-tree-10 {
    0% { transform: translate(-100%, 0); }
    100% { transform: translate(-300%, 0); }
}

@keyframes anim-tree-11 {
    0% { transform: translate(-110%, 0); }
    100% { transform: translate(-310%, 0); }
}

@keyframes anim-tree-12 {
    0% { transform: translate(-120%, 0); }
    100% { transform: translate(-320%, 0); }
}

@keyframes anim-tree-13 {
    0% { transform: translate(-130%, 0); }
    100% { transform: translate(-330%, 0); }
}

@keyframes anim-tree-14 {
    0% { transform: translate(-140%, 0); }
    100% { transform: translate(-340%, 0); }
}

@keyframes anim-tree-15 {
    0% { transform: translate(-150%, 0); }
    100% { transform: translate(-350%, 0); }
}

@keyframes anim-tree-16 {
    0% { transform: translate(-160%, 0); }
    100% { transform: translate(-360%, 0); }
}

@keyframes anim-tree-17 {
    0% { transform: translate(-170%, 0); }
    100% { transform: translate(-370%, 0); }
}

@keyframes anim-tree-18 {
    0% { transform: translate(-180%, 0); }
    100% { transform: translate(-380%, 0); }
}

@keyframes anim-tree-19 {
    0% { transform: translate(-190%, 0); }
    100% { transform: translate(-390%, 0); }
}

