*   {
    margin:0;
    padding:0;
    box-sizing: border-box;
    }
 
    body{
    width: 100%;
    height: 100vh;
    background-color: rgba(99, 180, 246, 0.4);
    }


    .mountblue{
width: 1000%;
height: 600px;
background-image:url("wgmount.png");
/* background-size: cover; */
background-repeat: repeat-x;
animation: mount 120s  infinite linear;
position: absolute;
top:300px;

    }

    .mount{
      width: 1000%;
      height: 300px;
      background-image:url("mount2.png");
      background-repeat: repeat-x;
      animation: mount 110s  infinite linear;
      position: absolute;
      left:600px;
      top:270px;
      
          }

      .r{
      background-image:url("mount22.png");
      animation: mount 100s  infinite linear;
      position: absolute;
      left:300px;
      top:350px;


          }

    .cloud{
      width: 1000%;
      height: 800px;
      background-image:url("cloud 1.png");
      position: absolute;
      top:-200px;      
      background-repeat: repeat-x;
      animation: 40s cloud infinite linear;
          }


    .sea{
      width: 1000%;
      height: 700px;
      background-image: url("light\ sea.png");
      position: absolute;
      top:360px;      
      background-repeat: repeat-x;
      animation: 60s riv infinite linear;
          }


          .ship{
            width: 205px;
            height: 95px;
            background-image: url(ship.png);
            background-size: cover;
            position:absolute;
            top:510px;
            animation: 50s ship infinite linear;
      
          }
      
          .shipp{
            width: 140px;
            height: 120px;
            background-image: url(ship1.png);
            background-size: cover;
            position:absolute;
            top:500px;
            animation: 50s shipp infinite linear;
      
          }
      
      
          .tree1{
            width: 1000%;
            height: 520px;
            background-image:url('tree222.png'); 
            position: absolute;
            top:500px;      
            background-repeat: repeat-x;
            animation: 170s tree1 infinite linear;
            z-index: 2;
                }
            .tree2{
            width: 1000%;
            height: 340px;
            background-image: url('tree1.png');
            position: absolute;
            top:720px;      
            background-repeat: repeat-x;
            animation: 80s tree1 infinite linear;
            z-index: 2;
                }
          
            


    @keyframes mount{ 
      

      from{    
        left:-5000px;              
      }
 
        to{    
        left:-2800px;
        }
    }     
  
    @keyframes cloud{ 
      

      from{    
        left:-5000px;              
      }
 
        to{    
        left:-3200px;
        }
    }     


    @keyframes riv{ 
      

      from{    
        left:-5000px;              
      }
 
        to{    
        left:-2800px;
        }
    }  
    
    
    @keyframes ship{ 
      

      from{    
        left:-200px;    
      }
 
        to{    
        left:3000px;
        }
    }     



    
    @keyframes shipp{ 
      

      from{    
        left:-400px;              
      }
 
        to{    
        left:2400px;
        }
    }     

   


    @keyframes tree1{ 
      

      from{    
        left:-500px;              
      }
 
        to{    
        left:-4000px;
        }
    }