:root {
  --blue: #1e90ff;
  --white: #ffffff;
  --darkblue: #324364;
  --tan: #cfd6a7;
  --golden: #e0c864;
  --peach: #e8a173;
  --aqua: #6ccac0;
  --black:#333333;
    
}


body {
        background-color: var(--white);
        color: var(--darkblue);
        font-family: Arial, sans-serif;
        padding-top:10%;
        padding-bottom:0%;
        margin-top:5%;
        margin-bottom:5%;
}

h1, h2, h3 {
        color: var(--darkblue);
}

@keyframes fadeIn {
    0% {
        opacity: 1; /* Fully black */
    }
    100% {
        opacity: 0; /* Fully transparent */
    }
}

.clearfix {
    clear: both; /* Clears any floating elements */
}

.overlay {
    position: fixed; /* Covers the whole screen */
    pointer-events: none; /* Prevents clicks or interactions during animation */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white); /* Black overlay */
    z-index: 9999; /* Ensures it sits above all other content */
    animation: fadeIn 2s ease-out forwards; /* Apply fadeIn animation */
}
/*----------------------------------------Navbar-----------------------------------------------*/

/* Navigation Container */
.navigation {
  display: flex;
  justify-content: center; /* Horizontally centers the nav items */
  align-items: flex-end; /* Aligns the bottoms of the icons */
  gap: 5%; /* Space between icons */
  margin-top: 0px;
  margin-bottom: 0px;
  /* Position the navbar fixed to the viewport */
  position: fixed;
  /* Align it to the bottom */
  /*bottom: 0*/
  top:0;
  /* Make it span the full width of the page */
  width: 100%;
  height:5%;
  /* Add a background color */
  background-color: rgba(255,255,255,0.97);
  /* Add some padding */
  padding-top: 60px;
  /* Center the text */
  text-align: center;
  /* Add a z-index to ensure it stays on top */
  z-index: 5;
}

/* Individual Navigation Item */
.nav-item {
    display: flex; /* Enables flexbox for inner alignment */
    flex-direction: column; /* Stack icon and text vertically */
    justify-content: flex-end; /* Aligns the icon and text to the bottom */
    align-items: center; /* Centers icon and text horizontally */
    text-align: center;
    text-decoration: none; /* Removes underline from links */
    color: var(--darkblue);
    font-family: Arial, sans-serif;
    padding-top:10%;
}


.nav-item p {
    margin-top: 10px; /* Space between icon and text */
    font-size: 18px; /* Adjust font size for labels */
    transition: transform 0.3s;
}

/* Icon Styling */
.nav-item img {
    max-width: 480px; /* Sets consistent maximum width */
    max-height: 480px; /* Ensures icons don’t exceed this height */
    /*width: auto; /* Maintains aspect ratio */
    width: auto;
    height: 50%; /* Maintains aspect ratio */
    filter: brightness(0.25);
    transition: transform 0.3s; /* Set timing of effect transitions */
}

/* Hover Effect for Icons */
.nav-item:hover img {
    transform: translate(0,50%) scale(2.0); /* Slightly enlarge icon on hover */
    border-radius: 15%; /* Round corners */
    filter:brightness(0.0);
}

.nav-item:hover p {
    color: var(--darkblue); /* Change text color on hover */
    transform: translate(0,1.0em);
    #font-size: 22pt; /* Slightly enlarge icon on hover */
}

/*border: 2px solid var(--darkblue);
border-radius: 10px;
*/

/* --------------------Image frames for each page's animated image -----------------------*/


/* Frame around the parrotfish image */
.image-frame-parrotfish {
    position: relative;
    width: 100%; /* Use the full width of the container */
    max-width: 800px; /* Optional: Set a max-width for the image */
    height: 400px; /* Define the visible height of the image */
    overflow: hidden; /* Clips anything outside the container */
    margin: 0 auto; /* Center the frame horizontally */
    border-radius: 5%;
}

/* Frame around the reef research image */
.image-frame-reef-research {
    position: relative;
    width: 100%; /* Use the full width of the container */
    max-width: 800px; /* Optional: Set a max-width for the image */
    height: 400px; /* Define the visible height of the image */
    overflow: hidden; /* Clips anything outside the container */
    margin: 0 auto; /* Center the frame horizontally */
    border-radius: 5%; /* Round corners */
}

/* Frame around the octopus image */
.image-frame-octopus {
    position: relative;
    width: 100%; /* Use the full width of the container */
    max-width: 800px; /* Optional: Set a max-width for the image */
    height: 400px; /* Define the visible height of the image */
    overflow: hidden; /* Clips anything outside the container */
    margin: 0 auto; /* Center the frame horizontally */
    border-radius: 5%; /* round corners of image (50% = circle) */
}

/* Frame around the parrotfish image */
.image-frame-paragraph {
    position: relative;
    align: left;
    width: 20%; /* Use the full width of the container */
    max-width: 200px; /* Optional: Set a max-width for the image */
    height: 100px; /* Define the visible height of the image */
    overflow: hidden; /* Clips anything outside the container */
    border-radius: 5%;
}


/* --------------------Image classes for each frame ---------------------------*/

/* Left aligned images for paragraphs */
.left-image {
    float: left; /* Ensures the image floats to the left */
    margin: 0 15px 15px 0; /* Adds space around the image: right and bottom */
    width: 30%; 
    max-width: 300px; /* Optional: Limits image width for consistency */
    height: auto; /* Maintains aspect ratio */
    border-radius: 5%; /* Optional: Adds rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/* Ken Burns Effect on the image */
.image-frame-reef-research img {
    position: absolute; /* Allows panning effect */
    width: 120%; /* Slightly larger than the frame for zoom */
    height: auto; /* Maintain aspect ratio */
    top: 20%; /* Start panning from the top */
    left: -20%; /* Start panning from the left */
    border-radius: 5%; /* Round corners */
    animation: kenBurnsReefResearch 40s ease-in-out infinite alternate; /* Slow pan/zoom */
}

/* Ken Burns Effect on the parrotfish image */
.image-frame-parrotfish img {
    position: absolute; /* Allows panning effect */
    width: 120%; /* Slightly larger than the frame for zoom */
    height: auto; /* Maintain aspect ratio */
    top: -50%; /* Start panning from the top */
    left: 0%; /* Start panning from the left */
    border-radius: 5%; /*round corners of image (50% = circle) */
    animation: kenBurnsParrotfish 40s ease-in-out infinite alternate; /* Slow pan/zoom */
}

/* Ken Burns Effect on the image */
.image-frame-octopus img {
    position: absolute; /* Allows panning effect */
    width: 120%; /* Slightly larger than the frame for zoom */
    height: auto; /* Maintain aspect ratio */
    top: 0%; /* Start panning from the top */
    left: 0%; /* Start panning from the left */
    border-radius: 5%;
    animation: kenBurnsOctopus 20s ease-in-out infinite alternate; /* Slow pan/zoom */
}


/* Keyframes for Ken Burns Reef Research Effect 
translate(x,y)  -- negative x is "to the right" (pushing image to the left)
                -- negative y is "down" (pushing image up)
*/
@keyframes kenBurnsReefResearch {
    0% {
        transform: scale(1.7) translate(-5%, 3%) rotate(0deg); /* Slight zoom in, top-left */
    }
    70% {
        transform: scale(1.5) translate(20%, -10%) rotate(-5deg); /* Midpoint zoom + slight pan */
    }
    100% {
        transform: scale(1.7) translate(-5%, -50%) rotate(0deg); /* More zoom + pan bottom-right */
    }
}



/* Keyframes for Ken Burns Effect */
@keyframes kenBurnsParrotfish {
    0% {
        transform: scale(1.0) translate(0%, 0%) rotate(0deg); /* Slight zoom in, top-left */
    }
    70% {
        transform: scale(1.5) translate(-10%, 10%) rotate(-5deg); /* Midpoint zoom + slight pan */
    }
    100% {
        transform: scale(1.7) translate(-15%, -3%) rotate(0deg); /* More zoom + pan bottom-right */
    }
}


/* Keyframes for Octopus animation */
@keyframes kenBurnsOctopus {
    0%  {
        transform:scale(1.1) translate(-5%,5%) rotate(0deg); 
    }
    50% {
        transform: scale(1.7) translate(-15%, 15%) rotate(-15deg); /* Midpoint zoom + slight pan */
    }
    70% {
        transform: scale(1.7) translate(5%, -5%) rotate(0deg); /* Slight zoom in, top-left */
    }
    100% {
        transform: scale(1.3) translate(-10%, 5%) rotate(15deg); /* More zoom + pan bottom-right */
    }
}



/* Default settings for laptops or landscape mode phones */

.container {        
        padding: 20px;
        background-color: var(--white);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        max-width: 100%;
        width:100%
        margin: 20px auto;
}

.container > img {
    display: block; /* Makes the image behave like a block element */
    margin: 0 auto; /* Horizontally centers the block element */
    max-width: 100%; /* Ensures the image scales responsively */
    border-radius: 5%;
}



/* Responsive Adjustments for Portrait Phones */
@media screen and (max-width: 768px) and (orientation: portrait) {
    /* Reduce the image-frame height */
    .image-frame-parrotfish {
        height: 250px; /* Shrink the image frame */
    }

    /* Reduce the gap between elements */
    .container {
        padding: 5px; /* Reduce padding */
    }

    /* Adjust heading spacing */
    h1 {
        margin-top: 10px; /* Pull the heading closer to the image */
        font-size: 1.8rem; /* Slightly reduce font size for headings */
    }

    /* Adjust paragraph spacing */
    p {
        font-size: 1rem; /* Slightly reduce font size for paragraphs */
        line-height: 1.4; /* Adjust line spacing */
    }
}