/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

html {
  scroll-snap-type: y mandatory; /* Y axis for vertical, MANDATORY forces snap */
  overflow-y: scroll; /* Ensures scrolling is enabled */
  height: 100vh; /* Optional: forces full height */
}

section {
  scroll-snap-align: start; /* Aligns child to top of container */
  height: 100vh; /* Usually needed to make each section fit the screen */
}

body {
  background-color: white;
  color: black;
  font-family: Helvetica;
}  

/* Container styles (optional, for positioning the image within a specific area) */
.float-container {
    height: 18vh; /* Example height to center the image on the page */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Image styles and animation properties */
.floating-img {
    width: 800px; /* Adjust size as needed */
    height: auto;
    /* Apply the animation */
    animation-name: floating;
    animation-duration: 2s; /* Duration of one animation cycle */
    animation-iteration-count: infinite; /* Loop indefinitely */
    animation-timing-function: ease-in-out; /* Smooth start and end for natural movement */
    /* Set initial position */
    transform: translateY(0);
}

/* Keyframes define the animation sequence */
@keyframes floating {
    0% {
        /* Start position (or original position) */
        transform: translateY(0);
    }
    50% {
        /* Move 20 pixels up in the middle of the cycle */
        transform: translateY(-5px);
    }
    100% {
        /* Return to the start position */
        transform: translateY(0);
    }
}

  
a {
  color: black;
  text-decoration: none; /* optional: removes underline */
  transition: color 0.3s ease; /* smooth color change */
}

a:hover {
  color: green;
}

a:visited {
  color: black;
}


.carousel {
  display: flex;
  overflow-x: auto;
  gap: 16px;
  padding: 0px;
}

.carousel img {
  flex: 0 0 auto;
  width: 300px;
  height: auto;
  border-radius: 12px;
  cursor: pointer; /* Make images clickable */
  transition: 0.2s ease;
}

.carousel img:hover {
  opacity: 0.8;
  transform: scale(1.05);
}

/* Popup background */
#imagePopup {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

/* Larger preview image */
#imagePopup img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 12px;
}

/* Navigation arrows */
      .arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 3rem;
        cursor: pointer;
        user-select: none;
        padding: 0 15px;
      }

      .arrow-left { left: 10px; }
      .arrow-right { right: 10px; }

      /* Close button */
      #closePopup {
        position: absolute;
        top: 20px;
        right: 30px;
        color: white;
        font-size: 2rem;
        cursor: pointer;
        user-select: none;
      }

/* Applies to all images */
img {
  max-width: 100%;  /* Image will not exceed its container width */
  height: auto;     /* Maintain aspect ratio */
  display: block;   /* Removes inline spacing issues */
}

.button-container {
  text-align: center; /* Centers inline elements (like buttons) horizontally */
  padding: 0px; /* Adds space around the buttons */
}