animation {
width: 100%;
height: 100%;

display: block;
overflow: hidden;

top: 0; left: 0;
position: absolute;
}

animation>* {
height: 100%;
width: 6000px;
display: block;

top: 0;
z-index: 0;
position: absolute;
}

animation svg, animation img {
height: 420px;
width: 6000px; 
display: block;

top: 0;
left: 0;
position:absolute;

transform: scale(-1,1);
}

animation-sun {
width: 4.5rem;
height: 4.5rem;
display: block;

top: .2rem;
z-index: 0;
position:absolute;
right: calc((100% - var(--width))/2 + 1rem);

border-radius: 50%;
background-color: #ff797c;
}

animation-rear {
top: -3rem;
z-index: 11;
}

animation-front {
top: -2rem;
z-index: 12;
}

animation-land {
top: 11rem;
z-index: 13;
background: linear-gradient(#f4f4f0, #a0a0a0);
}

animation-trees {
top: 2rem;
z-index: 14;
}



svg .m {
fill: #d7d3d3;
}

svg .m_shading {
fill: rgba(0,0,0,.06)
}

svg .m_trees {
fill: #b0c0b0;
}

svg .h {
fill: #f4f4f0;
}

svg .h_shading {
fill: rgba(0,0,0,.06)
}

svg .t {
fill: #b0d0b0;
}

svg .t_shading {
fill: rgba(0,0,0,.09)
}



animation-rear {
animation: Scroll 900s linear infinite forwards;
}

animation-front {
animation: Scroll 600s linear infinite forwards;
}

animation-trees {
animation: Scroll 300s linear infinite forwards;
}

@keyframes Scroll {
  100% { 
    transform: translateX(-66.666%);  
  }
}