body{
background-color:whitesmoke; /* Page background color to white*/
background-image:url('dog%20paws%20white.png');
background-repeat: no-repeat;
background-size:cover;
margin:0%; /*Margin of page 0%*/
bottom:0% /*Bottom of page 0%*/
}

.poster-container {
    max-width: 900px; /* Set a maximum width for your poster container */
    width: 100%;      /* This makes it responsive: it will take 100% width up to 900px */
    
    /* --- Centering part --- */
    /* Or the shorthand: */
    /* 20px for top/bottom margin, 'auto' for left/right centering */
    margin: 20px auto;
    /* --------------------- */

    border: 1px solid #070707;
    background-color: #070707;
    height: auto; /* Good for responsiveness, let content define height */
}

.poster-image {
    width: 100%; /* This ensures the image fills the *centered* container */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Removes any extra space below the image that can occur with inline elements */
}

h1{
    color:black;
}

.h3-alignment{
    text-align:center;
}

/* Initial state: Hidden and slightly moved down */
.hidden-content {
    opacity: 0;
    transform: translateY(20px); /* Starts 20px lower than its final position */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out; /* Smooth transition for 0.6 seconds */
    /* Add more transitions for other properties if desired, e.g., scale */
}

/* State when revealed: Fully visible and in original position */
.reveal-content {
    opacity: 1;
    transform: translateY(0); /* Moves to its original position */
}



/* If you want the slideshow container to have its own space even when hidden */
.slideshow-container {
    min-height: 300px; /* Example: Ensure it takes up some space even when hidden */
    /* Adjust this based on the expected height of your slides */
}

.nav-bar {
    list-style: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: flex; /* Enable flexbox for the list */
    align-items: center; /* Vertically align items in the center */
    background-color: black;
}

.nav-bar img{
    margin-right: auto;
    width:100px;
    height:50px;
}

.nav-bar h1 {
    margin-right: auto; /* Push the title to the left */
    color:white;
    
}

.nav-bar li {
    margin-left: 20px; /* Add some space between the links */
    float:left;
}

.nav-bar a {
    text-decoration: none; /* Remove underlines from links */
    color: white; /* Set link color */
}

 /* Style the hamburger menu */
.hamburger-menu {
    cursor: pointer;
    display: none; /* Hidden by default */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 21px;
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: #fff; /* Or your desired color */
    border-radius: 10px;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.slideshow-container {
    max-width: 500px; /* Adjust as needed */
    position: relative;
    margin: 30px auto; /* Center horizontally and add some top margin */
}

.slide {
    display: none; /* Initially hide all slides */
    width: 100%;
}

.slide img {
    width: 100%;
    height: auto;
    display: block; /* Prevent extra space below image */
}

/* Fade in/out animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

.button-style {
    /* Existing styles for the button's appearance */
    height: 50px;
    border-radius: 10px;
    font-size: 20px;
    background-color: #ffff00; /* Yellow */
    cursor: pointer;
    margin-bottom: 10px; /* Keep your existing bottom margin */

    /* Centering the button itself */
    display: block; /* Ensure it behaves as a block-level element */
    width: fit-content; /* Or a specific width, e.g., 200px */
    margin: 0 auto 10px auto; /* Top: 0, Right: auto, Bottom: 10px, Left: auto */

    /* Centering the text/content INSIDE the button (optional, if text is shorter than width) */
    /* If you set a fixed width, you might still want these for internal text centering */
    text-align: center; /* For inline content like text */
    line-height: 50px; /* To vertically center single line of text if height is fixed */
    /* OR, if you really want to use flex for internal centering with specific width */
    /*
    display: flex;
    justify-content: center;
    align-items: center;
    */
    padding: 0 20px; /* Add some horizontal padding for content to make button wider */
}

img {
    display: block; /* Make the image a block-level element */
    margin: 20px auto; /* Center horizontally with auto margins and add vertical spacing */
    max-width: 80%; /* Optional: Make the image responsive */
    height: 480px; /* Maintain aspect ratio */
}

.block-text {
    font-size: large;
    text-align: center;   /* Centers the text and inline content *within* the block */
    width: 80%;           /* Define a width for the block (e.g., 80% or 600px).
                             This is crucial for horizontal centering. */
    max-width: 800px;     /* (Optional) Prevent the block from becoming too wide on large screens */
    margin: 100px auto;   /* Centers the block horizontally AND sets 100px top/bottom margin */
    /* You can also use padding within the block for internal spacing if needed */
    padding: 20px;
    background-color: #f0f0f0; /* Example: to visualize the block */
    border-radius: 30px; /* Example: rounded corners */
}
.center-textcontent{
    color:black;
    text-align:center;
}

footer {
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%;
    bottom: 0;
}

footer p {
    margin: 0; /* Remove default paragraph margins */
}

footer p span.copyright {
    font-weight: bold; /* Emphasize the copyright symbol */
}

/* Styles for the main gallery container */
.gallery-container {
    display: flex; /* Use flexbox for item arrangement */
    flex-wrap: wrap; /* Allow items to wrap to the next line */
    justify-content: center; /* Center items horizontally within the container */
    gap: 25px; /* Space between gallery items */
    max-width: fit-content; /* Limit the overall width of the gallery */
    width: 100%; /* Make it responsive */
    padding: 10px;
}

/* Styles for each individual gallery item */
.gallery-fact-item {
    flex: 0 0 auto; /* Don't grow, don't shrink, base size determined by content */
    width: 480px; /* Fixed width for each item (adjust as desired) */
    
    background-color: #fff; /* White background for the item card */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    overflow: hidden; /* Ensures rounded corners apply to the image */
    text-align: center; /* Center the text content */
    cursor: pointer; /* Indicate it's interactive */
    
    position: relative; /* Needed for z-index on hover effect */
    transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0.3s ease; /* Smooth transitions for the whole item */
}

/* Styles for the images within each item */
.gallery-fact-item img {
    width: 100%; /* Image takes full width of its container */
    height: 200px; /* Fixed height for consistent image size */
    object-fit: contain; /* Ensures images cover the area without distortion */
    display: block; /* Removes extra space below the image */
    border-radius: 10px 10px 0 0; /* Top corners rounded */
    transition: transform 0.3s ease; /* Smooth transition for image scaling */
    transform-origin: center center; /* Ensures scaling is from the center */
}

/* Styles for the facts text */
.gallery-fact-item .fact {
    padding: 15px;
    font-size: 0.95em;
    color: #555;
    line-height: 1.4;
    min-height: 80px; /* Optional: Ensures consistent fact box height */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Hover effect for the entire gallery item */
.gallery-fact-item:hover {
    transform: translateY(-8px); /* Lifts the item slightly */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Stronger shadow on hover */
    z-index: 10; /* Brings the hovered item to the front so it overlaps correctly */
}

/* Hover effect for the image inside the hovered item */
.gallery-fact-item:hover img {
    transform: scale(1.1); /* Enlarges the image by 10% */
}

/* Ensure the parent container aligns as needed */
.animate-textcontent {
    text-align: center; /* Keep your original centering */
    color: black; /* Default text color, though colors will animate */
    /* If you still want the outline, keep your text-shadow here */
    text-shadow: 
        1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,
        0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
}

/* Styles for each individual animated letter */
.animate-textcontent span {
    display: inline-block; /* Crucial for transforms like translateY to work */
    font-family: 'Arial Black', sans-serif; /* Example: A bold font works well */
    font-size: 3.5em; /* Adjust the size as needed */
    font-weight: bold;
    line-height: 1; /* Helps with vertical alignment */
    text-transform: uppercase; /* Example: Make letters uppercase */
    
    /* Animation properties */
    animation-name: colorful-text-animation; /* Name of our animation */
    animation-duration: 3s; /* Duration of one animation cycle */
    animation-timing-function: ease-in-out; /* Smooth start and end */
    animation-iteration-count: infinite; /* Repeat indefinitely */
    animation-fill-mode: forwards; /* Maintain the final state of the animation */
}

/* Define the animation steps */
@keyframes colorful-text-animation {
    0% {
        color: #ff0000; /* Red */
        transform: translateY(0) scale(1); /* Start at original position and size */
    }
    20% {
        color: #ffa500; /* Orange */
        transform: translateY(-5px) scale(1.05); /* Lift slightly and enlarge */
    }
    40% {
        color: #ffff00; /* Yellow */
        transform: translateY(0) scale(1); /* Back down */
    }
    60% {
        color: #00ff00; /* Green */
        transform: translateY(-5px) scale(1.05); /* Lift slightly and enlarge */
    }
    80% {
        color: #0000ff; /* Blue */
        transform: translateY(0) scale(1); /* Back down */
    }
    100% {
        color: #800080; /* Purple */
        transform: translateY(0) scale(1); /* Back to original position and size */
    }
}

.privacy-block {
    /* 1. Set a maximum width to prevent it from stretching across the entire page */
    max-width: 800px; /* Adjust this value as needed for your content */
    width: 100%;      /* Ensures it's responsive and takes full width on smaller screens */

    /* 2. Center the block horizontally */
    margin: 20px auto; /* 20px for top/bottom margin, 'auto' for left/right to center */

    /* 3. Apply the grayish background color */
    background-color: #f5f5f5; /* A light grayish color, you can use any shade of gray */

    /* 4. Add padding inside the block for content spacing */
    padding: 30px; /* Adjust padding as needed */

    /* 5. Optional: Add some styling for visual appeal */
    border-radius: 8px; /* Slightly rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    line-height: 1.6; /* Improve readability of paragraphs */
    color: #333; /* Darker text for contrast against light gray background */
}

/* Optional: Basic styling for elements inside the privacy block for better readability */
.privacy-block h1,
.privacy-block h2,
.privacy-block h3 {
    color: #222; /* Slightly darker headings */
    text-align: center; /* Center your main heading */
    margin-bottom: 15px;
    margin-top: 30px; /* Add some space above headings */
}

.privacy-block h1 {
    font-size: 2.5em;
}

.privacy-block p {
    margin-bottom: 1em;
}

.privacy-block ul {
    margin-bottom: 1em;
    padding-left: 25px; /* Indent list items */
}

.privacy-block a {
    color: #007bff; /* Example link color */
    text-decoration: none;
}

.privacy-block a:hover {
    text-decoration: underline;
}

.screenshot-gallery {
  display: flex; /* Enable flexbox for horizontal layout */
  flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
  gap: 10px; /* Spacing between gallery items */
  width: 100%;
}

.gallery-item {
  flex: 0 0 auto; /* Don't grow or shrink, maintain automatic width */
  width: calc(33.33% - 10px); /* Example: 3 items per row with spacing */
  margin-bottom: 15px;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  display: block; /* Remove extra space below inline images */
  width: 100%;
  height: auto;
  cursor: pointer; /* Indicate it's clickable */
}

.caption {
  padding: 10px;
  text-align: center;
  background-color: #f9f9f9;
  font-size: 0.9em;
  color: #555;
}

/* Modal Styles */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}

.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#captionText {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px; /* Adjust as needed */
}

.modal-content, #captionText {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* Responsive adjustments (optional) */
@media (max-width: 768px) {
  .gallery-item {
    width: calc(50% - 10px); /* Two items per row on smaller screens */
  }
}

input[type=text], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 6px;
  margin-bottom: 16px;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width:50%;
  margin-left:500px;
}

/* Media Query for Mobile Devices (e.g., screens up to 768px wide) */
@media (max-width: 768px) {
    
    .poster-container {
            width: 100%; /* Adjust as needed */
            height: auto;
            margin: 20px;
            border: 1px solid #ccc; /* Optional styling */
        }

        .poster-image {
            width: 100%;
            height: auto;
            display: block;
        }


    .nav-bar {
        /* Adjustments for mobile nav-bar if needed, e.g., different padding */
        padding: 0 15px; /* Slightly less padding on mobile */
    }

    

    .nav-links {
        display: none; /* Hide the navigation links by default on mobile */
        flex-direction: column; /* Stack links vertically */
        position: absolute;
        top: 60px; /* Position below the nav-bar (adjust if nav-bar height changes) */
        left: 0;
        width: 100%;
        background-color: #333; /* Background for the dropdown menu */
        text-align: center;
        padding: 20px 0;
        box-shadow: 0 8px 16px rgba(0,0,0,0.2);
        z-index: 1; /* Ensure it's below the hamburger icon */
        transition: all 0.3s ease-in-out; /* Smooth transition for menu appearance */
    }

    /* Class added by JavaScript to show the menu */
    .nav-links.active {
        display: flex; /* Show the menu when active */
    }

    .nav-links li {
        margin: 10px 0; /* Adjust vertical spacing for mobile links */
    }

     /* Show the hamburger menu on mobile */
    .hamburger-menu {
        display: flex;
    }
}

/* Hamburger icon animation when open */
.hamburger-menu.open .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.hamburger-menu.open .bar:nth-child(2) {
    opacity: 0; /* Hide the middle bar */
}

.hamburger-menu.open .bar:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Your existing CSS from here on, no changes needed unless specified */

.slideshow-container {
    max-width: 500px; /* Adjust as needed */
    position: relative;
    margin: 30px auto; /* Center horizontally and add some top margin */
}

.slide {
    display: none; /* Initially hide all slides */
    width: 100%;
}

.slide img {
    width: 100%;
    height: auto;
    display: block; /* Prevent extra space below image */
}

/* Fade in/out animation */
.fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {opacity: .4}
    to {opacity: 1}
}

img { /* General image styling - might conflict with specific img styles if not careful */
    display: block; /* Make the image a block-level element */
    margin: 20px auto; /* Center horizontally with auto margins and add vertical spacing */
    max-width: 80%; /* Optional: Make the image responsive */
    height: auto; /* Maintain aspect ratio */
}


.block-text {
    font-size: large;
    text-align: center;
    width: 80%;
    max-width: 800px;
    margin: 100px auto;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
}
.center-textcontent{
    color:black;
    text-align:center;
}


.gallery-item {
    /* Calculate width for two items per row:
       - 50% of the container's width
       - Minus half of the 'gap' defined on the .gallery-container
       Since the gap is 25px, half of it is 12.5px.
       This ensures two items and the gap fit within the available space.
    */
    width: calc(50% - 12.5px);
    
    /* You might also want to adjust other styles for smaller screens, e.g.: */
    /* padding: 10px; */
    /* font-size: 0.9em; */
}

.animate-textcontent span {
    font-size: 2.2em; /* Reduce the font size for smaller screens */
    /* You might need to adjust this value (e.g., 2em, 2.5em) 
       depending on the length of your text and how it appears. */
}

/* Optional: For even smaller phone screens (e.g., less than 480px),
   you might want an even smaller font size. */

.gallery-item img {
  width: 50%; /* Each image takes up 50% of the container width */
  flex-wrap:wrap;
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  padding: 5px; /* Add some spacing between images (optional) */
  cursor: pointer; /* Indicate it's clickable */
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width:50%;
}
@media (max-width: 480px) {
    .animate-textcontent span {
        font-size: 1.5em; /* Further reduction for very small screens */
    }
}

/* Optional: Further breakpoint for very small screens (e.g., typical portrait phone)
   to display only one item per row if two become too small. */
@media (max-width: 480px) {

.nav-bar img{
    margin-right: auto;
    width:100px;
    height:50px;
}

 .poster-container {
 width: 362px; /* Adjust as needed */
 height: auto;
 margin: 20px;
 border: 1px solid #ccc; /* Optional styling */
 }

.poster-image {
 width: 80%;
 height: auto;
 display: block;
}

.block-text {
    font-size: large;
    text-align: center;
    width: 80%;
    max-width: 800px;
    margin: 100px auto;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
}
.center-textcontent{
    color:black;
    text-align:center;
}
 
.slide img {
    width: 50%;
    height: auto;
    display: block; /* Prevent extra space below image */
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  width:55%;
  margin-left:48px;
}

.screenshot-gallery {
  display: flex; /* Enable flexbox for horizontal layout */
  flex-wrap: wrap; /* Allow items to wrap to the next line if needed */
  gap: 10px; /* Spacing between gallery items */
}

    .gallery-item {
        width: 50%; /* Make item take full width for a single-column layout */
        /* You might also want to adjust image height or fact text size */
        /* .gallery-item img {
            height: 180px;
        }
        .gallery-item .fact {
            font-size: 0.85em;
            min-height: 60px;
        } */
        margin:-4px;
    }
}

.gallery-item img {
  display: block; /* Remove extra space below inline images */
  width: 50%;
  height: auto;
  cursor: pointer; /* Indicate it's clickable */
}

footer {
    background-color: black;
    color: white;
    text-align: center;
    padding: 10px;
    width: 100%;
    /* bottom: 0;  Consider removing if you want it to flow with content */
}

footer p {
    margin: 0; /* Remove default paragraph margins */
}

footer p span.copyright {
    font-weight: bold; /* Emphasize the copyright symbol */
}