.wave {
    --c:#ceafff;   /* Color */
    --t:5px;   /* Thickness */
    --h:30px;  /* Height  */
    --w:150px; /* Width  */
    --p:13px;  /* adjust this to correct the position when changing the other values*/
    
    margin:5px auto;
    width:calc(var(--w)*4);
    height:calc(var(--h) + 10px);
    overflow:hidden;
    position:relative;
  }
  .wave.cor2{
    --c:#ffafb3 !important;   /* Color */
}
  .wave:before {
    content:"";
    position:absolute;
    padding:5px 0;
    top:0;
    left:0;
    width:200%;
    bottom:0;
    
    background:
      radial-gradient(farthest-side at 50% calc(100% + var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t))),
      radial-gradient(farthest-side at 50% calc(0%   - var(--p)), transparent 47%, var(--c) 50% calc(50% + var(--t)),transparent calc(52% + var(--t)));
      
    background-size:var(--w) var(--h);
    background-position:calc(var(--w)/2) calc(-1*(var(--h)/2)),0px calc(var(--h)/2);
    background-repeat:repeat-x;
    background-origin:content-box;
    
    animation:move 12s infinite linear;
  }
  
  @keyframes move {
    to {
     transform:translateX(-50%);
    }
  }



  /* -- */
  .drone-animated {
    display: inline-block;
    animation: floatDrone 5s ease-in-out infinite;
  }
  
  @keyframes floatDrone {
    0% {
      transform: translateY(0) rotate(0deg);
    }
    25% {
      transform: translateY(-6px) rotate(-2deg);
    }
    50% {
      transform: translateY(0) rotate(0deg);
    }
    75% {
      transform: translateY(6px) rotate(2deg);
    }
    100% {
      transform: translateY(0) rotate(0deg);
    }
  }