svg {
  display: block;
  margin: 2rem auto;
  width: 75%;
}

/* decrease the size of the svg for devices larger than a tablet */
@media screen and (min-width: 768px) {
  svg {
    margin-top: 2rem;
    width: 50%;
  }
}

@media screen and (min-width: 1024px) {
  svg {
    margin-top: 3rem;
  }
}

/* svg classes */
.cls-1 {
  fill: #d8568b;
}

.cls-2 {
  fill: #d9d9fe;
}

.cls-3,
.cls-4 {
  fill: none;
  stroke: #494982;
  stroke-linecap: round;
  stroke-width: 2px;
}

.cls-3 {
  stroke-linejoin: round;
}

.cls-4 {
  stroke-miterlimit: 10;
}

.cls-5 {
  fill: #494982;
}

/* svg elements */
#floatingIsland {
  animation: hideshow 4s ease-in;
}

#Turbine {
  animation: rotate 8s linear infinite 2s;
  transform-origin: 145px 92.5px;
}

.cloud {
  stroke-linejoin: round;
}

/* individual cloud animations */
.cloud-1 {
  animation: moveRight 12.5s linear infinite 0.5s;
}

.cloud-2 {
  animation: moveRight 9.5s linear infinite 1s;
}

.cloud-3 {
  animation: moveRight 11s linear infinite 1.5s;
}

.cloud-4 {
  animation: moveRight 10s linear infinite 2s;
}

.cloud-5 {
  animation: moveRight 12s linear infinite 2.5s;
}

.cloud-6 {
  animation: moveRight 10.5s linear infinite 3s;
}

.cloud-7 {
  animation: moveRight 9s linear infinite 3.5s;
}

.cloud-8 {
  animation: moveRight 11.5s linear infinite 1s;
}

.water path {
  stroke-linejoin: round;
}

/* individual water drop animations */
.drop-1 {
  animation: fall 3.5s linear infinite 0.1s;
}

.drop-2 {
  animation: fall 2.5s linear infinite 0.2s;
}

.drop-3 {
  animation: fall 3s linear infinite 0.3s;
}

.drop-4 {
  animation: fall 2s linear infinite 0.4s;
}

.drop-5 {
  animation: fall 1.5s linear infinite 0.5s;
}

.drop-6 {
  animation: fall 2.5s linear infinite 0.2s;
}

.drop-7 {
  animation: fall 3s linear infinite 0.3s;
}

.drop-8 {
  animation: fall 1.5s linear infinite 0.4s;
}

@keyframes hideshow {
  from {
    opacity: 0;
    transform: translateY(-15em);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* cloud animation */
@keyframes moveRight {
  0%,
  10% {
    transform: translateX(0);
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  90%,
  100% {
    transform: translateX(10em);
    opacity: 0;
  }
}

/* turbine animation */
@keyframes rotate {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

/* waterfall animation */
@keyframes fall {
  0%,
  10% {
    transform: translateY(0);
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  90%,
  100% {
    transform: translateY(11em);
    opacity: 0;
  }
}