body{
    width:100%;
    min-height:100%;
    margin:0;
  }
  .sky {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
  }
  canvas{
    z-index: -2;
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#B7B0E3, #FFD3D6);  
  }
  
  
  @keyframes anim {
    from {
      transform: translateX(200%);
    }
    to {
      transform: translateX(-200%);
    }
  }
  
  @keyframes anime {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-200%);
    }
  }
  .c1, .c2 {
    width: 800px;
    height: 700px;
    position: absolute;
    background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/131045/clouds.png") 0 0 no-repeat;
    background-size: 100%;
    z-index:999;
  }
  .c1.one, .c2.one {
    top: -260px;
    left: 0px;
  }
  .c1.two, .c2.two {
    top: -200px;
    left: 100px;
  }
  .c1.three, .c2.three {
    top: -240px;
    right: 100px;
  }
  .c1.four, .c22.four {
    top: -180px;
    right: 0px;
  }
  
  .c2 .one {
    top: -209px;
  }
  @media (max-width: 1023px) {
    .c2.one {left: -80px;}
    .c2.two {left: -120px;}
    .c2.three {right: 220px;}
    .c2.four {right: 220px;}
  }
  
  .c1 {
    animation: anime 1000s linear infinite forwards;
  }
  
  .c2 {
    transform: translateX(200%);
    animation: anim 1000s linear infinite forwards;
  }