.cloud-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}

.cloud {
  position: absolute;
  width: auto;
  height: auto;
  opacity: 0.7;
}

.cloud1 {
  width: 500px;
  top: -2%;
  left: -5%;
  opacity: 0.5;
  transform: scaleX(-1);
}

.cloud2 {
  width: 550px;
  top: -3%;
  right: 5%;
  opacity: 0.4;
}

.cloud3 {
  width: 480px;
  bottom: 15%;
  left: -8%;
  opacity: 0.6;
}

.cloud4 {
  width: 450px;
  bottom: 20%;
  right: -10%;
  opacity: 0.7;
}

.cloud5 {
  width: 420px;
  top: 5%;
  left: -12%;
  opacity: 0.2;
  transform: scaleX(-1);
}

.cloud6 {
  width: 500px;
  top: 5%;
  right: -15%;
  opacity: 0.2;
}

.cloud7 {
  width: 500px;
  bottom: -40%;
  left: 20%;
  opacity: 0.5;
}

.cloud8 {
  width: 550px;
  bottom: 45%;
  right: -12%;
  opacity: 0.2;
}

.cloud9 {
  width: 380px;
  top: 10%;
  left: 20%;
  opacity: 0.3;
}

.cloud10 {
  width: 420px;
  top: -5%;
  left: 35%;
  opacity: 0.3;
  transform: scaleX(-1);
}

.cloud11 {
  width: 480px;
  top: 5%;
  left: 50%;
  transform: translate(-50%, -80%);
  opacity: 0.1;
}

.cloud12 {
  width: 520px;
  top: -4%;
  left: 60%;
  opacity: 0.3;
}

.cloud13 {
  width: 580px;
  top: 10%;
  right: -18%;
  opacity: 0.25;
}

.cloud14 {
  width: 500px;
  top: -10%;
  left: 5%;
  opacity: 0.4;
}

.cloud15 {
  width: 450px;
  top: 70%;
  right: 15%;
  opacity: 0.3;
  transform: scaleX(-1);
}

.cloud16 {
  width: 550px;
  bottom: -5%;
  left: -10%;
  opacity: 0.25;
}

.cloud17 {
  width: 800px;
  bottom: -40%;
  right: -15%;
  opacity: 0.35;
}

.cloud18 {
  width: 620px;
  bottom: 0%;
  left: 8%;
  opacity: 0.15;
}

.cloud19 {
  width: 480px;
  bottom: 8%;
  right: 20%;
  opacity: 0.2;
}

.cloud20 {
  width: 550px;
  bottom: 25%;
  left: 40%;
  opacity: 0.1;
}

.cloud21 {
  width: 650px;
  bottom: -25%;
  left: 0%;
  opacity: 0.3;
  transform: scaleX(-1);
}

.cloud22 {
  width: 250px;
  top: 10%;
  left: 10%;
  opacity: 0.7;
}

.cloud23 {
  width: 250px;
  top: 15%;
  left: 5%;
  opacity: 0.6;
}

.cloud24 {
  width: 250px;
  top: 0%;
  right: 5%;
  opacity: 0.8;
}

.cloud25 {
  width: 150px;
  top: 30%;
  right: 10%;
  opacity: 0.9;
}

.cloud26 {
  width: 350px;
  bottom: 14%;
  right: 0%;
  opacity: 0.2;
}

.cloud27 {
  width: 450px;
  bottom: -8%;
  right: -1%;
  opacity: 0.4;
}

.cloud28 {
  width: 950px;
  bottom: -50%;
  left: -20%;
  opacity: 0.3;
  transform: scaleX(-1);
}

.cloud29 {
  width: 170px;
  bottom: 20%;
  left: 11%;
  opacity: 0.65;
}

.cloud30 {
  width: 200px;
  bottom: 6%;
  left: 21%;
  opacity: 0.65;
}

.cloud31 {
  width: 200px;
  bottom: 8%;
  right: 19%;
  opacity: 0.65;
}

.cloud32 {
  width: 900px;
  bottom: -50%;
  right: 19%;
  opacity: 0.25;
}

.cloud33 {
  width: 700px;
  top: 9%;
  left: -13%;
  opacity: 0.55;
  transform: scaleX(-1);
}

.cloud34 {
  width: 400px;
  top: 4%;
  right: -13%;
  opacity: 0.65;
  transform: scaleX(-1);
}

.cloud35 {
  width: 500px;
  top: -11%;
  right: 23%;
  opacity: 0.55;
}

.cloud36 {
  width: 500px;
  top: -15%;
  left: 18%;
  opacity: 0.70;
}

.cloud37 {
  width: 200px;
  top: 11%;
  right: 24%;
  opacity: 0.70;
}

@media (max-width: 800px) {

  .cloud2,
  .cloud5,
  .cloud11,
  .cloud13,
  .cloud15,
  .cloud17,
  .cloud18,
  .cloud20,
  .cloud23 {
    display: none;
  }

  .cloud1 {
    width: 240px;
    top: 10%;
    left: -10%;
  }

  .cloud3 {
    width: 160px;
    bottom: -2%;
    left: -25%;
  }

  .cloud4 {
    width: 150px;
    bottom: -5%;
    right: -10%;
  }

  .cloud6 {
    width: 260px;
    top: 5%;
    right: -15%;
  }

  .cloud7 {
    width: 120px;
    bottom: -4%;
    left: -15%;
  }

  .cloud8 {
    width: 220px;
    top: 5%;
    right: -10%;
  }

  .cloud9 {
    width: 90px;
    top: 15%;
    left: 75%;
  }

  .cloud10 {
    width: 130px;
    top: 10%;
    left: 55%;
  }

  .cloud12 {
    width: 200px;
    top: 3%;
    left: 30%;
  }

  .cloud14 {
    width: 120px;
    bottom: -5%;
    left: 30%;
  }

  .cloud16 {
    width: 180px;
    bottom: -15%;
    left: 20%;
  }

  .cloud19 {
    width: 340px;
    bottom: -10%;
    left: -15%;
    opacity: 0.5;
  }

  .cloud20 {
    width: 400px;
    bottom: 1%;
    left: -32%;
    opacity: 0.45;
  }

  .cloud21 {
    opacity: 0.15;
  }

  .cloud22 {
    width: 480px;
    top: 60%;
    left: 25%;
    opacity: 0.7;
  }

  .cloud24 {
    width: 270px;
    top: -1%;
    right: 2%;
    opacity: 0.6;
  }

  .cloud25 {
    width: 270px;
    top: -1%;
    left: -10%;
    opacity: 0.7;
  }

  .cloud26 {
    width: 180px;
    bottom: -8%;
    right: 0%;
  }

  .cloud27 {
    width: 200px;
    bottom: -5%;
    right: -5%;
  }

  .cloud28 {
    width: 250px;
    bottom: -12%;
    left: -15%;
  }

  .cloud29 {
    width: 170px;
    bottom: 9%;
    left: -5%;
    opacity: 0.6;
  }

  .cloud30 {
    width: 120px;
    bottom: -5%;
    left: 20%;
  }

  .cloud31 {
    width: 120px;
    bottom: -7%;
    right: 15%;
  }

  .cloud32 {
    width: 280px;
    bottom: -12%;
    right: 10%;
  }

  .cloud33 {
    width: 200px;
    top: 5%;
    left: -12%;
  }

  .cloud34 {
    width: 180px;
    top: 6%;
    right: -10%;
  }

  .cloud35 {
    width: 220px;
    top: -5%;
    right: 15%;
  }

  .cloud36 {
    width: 240px;
    top: -7%;
    left: 18%;
  }

  .cloud37 {
    width: 150px;
    top: 15%;
    right: 5%;
  }
}