main {
  position: relative;
  z-index: 1;         /* In front of clouds */
}

body {
  background-color: #3fbfff;
  overflow-x: hidden; /* Prevent horizontal scrollbar from clouds */
}

footer {
  margin-top: 40px;
  padding: 20px 0;
  border-top: 1px solid #ccc;
}

footer h3 {
  margin-bottom: 10px;
}

footer nav {
  display: flex;
  gap: 20px;
}

/* Align icon and text side by side */
footer nav a {
  text-decoration: none;
  color: #0070f3;
  display: flex;          /* Puts icon and text in a row */
  align-items: center;    /* Vertically centers icon with text */
  gap: 6px;               /* Space between icon and text */
}

footer nav a:hover {
  text-decoration: underline;
}

/* Contact icons */
.contact-icon {
  height: 24px;           /* Match your link text height (~24px) */
  width: auto;            /* Scale width naturally */
  display: inline-block;
  vertical-align: middle;
}

/* ===================== */
/*   CLOUD ANIMATIONS    */
/* ===================== */

.cloud {
  position: fixed;        /* Fixed so clouds float over the page */
  top: 0;
  right: -300px;          /* Start off-screen to the right */
  width: 200px;           /* Adjust to fit your cloud image sizes */
  height: auto;         /* Use the image's natural height */
  width: auto;          /* Use the image's natural width */
  pointer-events: none;   /* Visitors cannot interact with clouds */
  z-index: -1;             /* Behind page content */
  animation: floatCloud linear forwards;
}

@keyframes floatCloud {
  from {
    transform: translateX(0);
  }
  to {
    /* Move far enough left to go fully off the left side of the screen */
    transform: translateX(calc(-100vw - 300px));
  }
}