* {
  box-sizing: border-box;
}

body {
  background: #6dd3e7;
  padding: 100px;
  overflow-x: hidden;
}

.cloud {
  position: absolute;
  /* Absolute positioning for static placement */
  border-radius: 10px;
  width: 54px;
  height: 5px;
  background: #4B4D5F;
}
.cloud.small {
  transform: scale(1);
}
.cloud.normal {
  transform: scale(2);
}
.cloud.large {
  transform: scale(3);
  /* Adjusted large size */
}
.cloud div {
  box-shadow: inset -2px -3px 0 0 #4B4D5F;
  position: absolute;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  left: -3px;
  bottom: 0;
  background: #5A5C70;
  z-index: 10;
}
.cloud div:first-child + div {
  transform: scale(1.6, 1.6);
  margin: 0 0 4px 13px;
  z-index: 9;
}
.cloud div:first-child + div + div {
  transform: scale(2.4, 2.4);
  margin: 0 0 9px 32px;
  z-index: 8;
}
.cloud div:first-child + div + div + div {
  transform: scale(1.3, 1.3);
  margin: 0 0 2px 50px;
  z-index: 7;
}

/* Updated cloud positioning for higher density */
.cloud-1 {
  top: 15%;
  left: 4%;
  z-index: 2;
}

.cloud-2 {
  top: 7%;
  left: 4%;
  z-index: 1;
}

.cloud-3 {
  top: 5%;
  left: 20%;
  z-index: 1;
}

.cloud-4 {
  top: 4%;
  left: 28%;
  z-index: 1;
}

.cloud-5 {
  top: 15%;
  left: 28%;
  z-index: 2;
}

.cloud-6 {
  top: 7%;
  left: 34%;
  z-index: 1;
}

.cloud-7 {
  top: 15%;
  left: 50%;
  z-index: 2;
}

.cloud-8 {
  top: 8%;
  left: 49%;
  z-index: 1;
}

.cloud-9 {
  top: 4%;
  left: 54%;
  z-index: 1;
}

.cloud-10 {
  top: 9%;
  left: 23%;
  z-index: 1;
}

.cloud-11 {
  top: 15%;
  left: 70%;
  z-index: 2;
}

.cloud-12 {
  top: 4%;
  left: 45%;
  z-index: 1;
}

/* Additional clouds for denser appearance */
.cloud-13 {
  top: 10%;
  left: 13%;
  z-index: 1;
}

.cloud-14 {
  top: 15%;
  left: 18%;
  z-index: 2;
}

.cloud-15 {
  top: 15.5%;
  left: 36.5%;
  z-index: 1;
}

.cloud-16 {
  top: 15.5%;
  left: 42%;
  z-index: 1;
}

.cloud-17 {
  top: 11%;
  left: 40%;
  z-index: 1;
}

.cloud-18 {
  top: 7%;
  left: 68%;
  z-index: 1;
}

.cloud-19 {
  top: 10%;
  left: 59%;
  z-index: 1;
}

.cloud-20 {
  top: 7%;
  left: 89%;
  z-index: 1;
}

.cloud-21 {
  top: 15%;
  left: 96%;
  z-index: 1;
}

.cloud-22 {
  top: 15%;
  left: 79%;
  z-index: 2;
}

.cloud-23 {
  top: 15%;
  left: 88.5%;
  z-index: 2;
}

.cloud-24 {
  top: 5%;
  left: 74%;
  z-index: 1;
}

.cloud-25 {
  top: 10%;
  left: 80%;
  z-index: 1;
}

.cloud-26 {
  top: 15%;
  left: 60%;
  z-index: 1;
}

#cloud-container {
  transition: opacity 0.5s ease; /* Smooth transition */
}

.clouds-visible {
  opacity: 1; /* Visible state */
}

.clouds-hidden {
  opacity: 0; /* Hidden state */
}