@charset "utf-8";
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
}

canvas {
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(#B7B0E3, #FFD3D6);
}

@-webkit-keyframes anim {
  from {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-200%);
  }
}

@keyframes anim {
  from {
    transform: translateX(200%);
  }
  to {
    transform: translateX(-200%);
  }
}
@-webkit-keyframes anime {
  from {
    transform: translateX(0);
  }
  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("../img/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 {
  -webkit-animation: anime 1000s linear infinite forwards;
          animation: anime 1000s linear infinite forwards;
}

.c2 {
  transform: translateX(200%);
  -webkit-animation: anim 1000s linear infinite forwards;
          animation: anim 1000s linear infinite forwards;
}