body {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    height: 100vh;  
}

svg {
    width: 1280px;
    height: 700px;
}


 

  @keyframes moveCloudLeft {
    0% {
      transform: translateY(0px); 
    }
    100% {
      transform: translateY(10px);
    }
  }

  .nuage-left {
    animation: moveCloudLeft 4s infinite alternate; 
  }

  .nuage-right-white {
    animation: moveCloudLeft 4s infinite alternate; 
  }

  .nuage-right {
    animation: moveCloudLeft 4s infinite alternate; 
  }

  .nuage-rigth-black {
    animation: moveCloudLeft 4s infinite alternate; 
  }

  .nuage-left-white {
    animation: moveCloudLeft 4s infinite alternate; 
  }

  @keyframes movelitlleCloud {
    0% {
      transform: translateX(0%); 
    }
    33% {
      transform: translateX(-50%);
    }
    66% {
        transform: translateX(100%);
      }
    100% {
        transform: translateX(0%);
      }
  }

  .little-nuage {
    animation: movelitlleCloud 150s linear infinite; 
  }


  @keyframes moveXCloud {
    0% {
      transform: translateX(0%); 
    }
    33% {
      transform: translateX(-100%);
    }
    66% {
      transform: translateX(50%);
    }
    100% {
        transform: translateX(0%);
      }
  }
  
  .nuage-right-black-white {
    animation: moveXCloud 170s linear infinite; 
  }