/* Ensure body and html take full height */
html, body {
    height: 100%;
    margin: 0;
    overflow: auto; /* Prevents scrollbars if the image overflows */
}
p {
    line-height: 1.5; /* Adjust this value as needed */
}

/* Spacing and Text Styling */
.spacing-below {
    margin-bottom: 100px;  /* Adjust this value as needed */
}

.bloodred {
    color: rgb(127, 16, 16);
    text-decoration: none; /* Remove underline */
}

header {
    margin: 0;
    padding: 50px 0; /* Reduce padding to minimize space */
}

body {
    font-family: "Courier New", monospace;
}

.center-content {
    text-align: center;
}

/* Override default anchor styles */
a {
    color: inherit; /* Inherit text color */
    text-decoration: none; /* Remove underline */
    background-color: #f6f6f6; /* Light background color */
    padding: 5px; /* Add padding for spacing */
    border-radius: 4px; /* Rounded corners */
}

a:hover {
    background-color: #e0e0e0; /* Slightly darker background on hover */
}

/* Container for the split layout */
.container {
    display: flex;
    min-height: 100vh; /* Minimum height of full viewport */
}

/* Style for the left column */
.left-column {
    flex: 1; /* Takes up half of the container width */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    background-color: #fff; /* Light gray background */
    padding: 20px; /* Optional padding */
    border-right: 1px solid #ccc; /* Add a thin grey vertical line */
}

/* Content styling within columns */
.content {
    text-align: center; /* Center text within the content div */
}

/* Style for the right column */
.right-column {
    flex: 1; /* Takes up available space */
    display: flex;
    flex-direction: column; /* Stack images vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    background-color: #fff; /* White background */
    padding: 50px; /* Reduced padding for better fit */
    box-sizing: border-box; /* Include padding in element's total width and height */
    overflow: hidden; /* Allows scrollbars if needed */
}

/* Styling for images */
.right-column img {
    max-width: 65%; /* Ensure image fits within the container width */
    max-height: 65% /* Adjusted to account for padding */
    height: auto; /* Maintain aspect ratio */
    display: block; /* Remove extra space below the image */
    margin: 0 auto; /* Center horizontally */
    object-fit: contain; /* Scale image to fit its container without cropping */
}

/* Gallery container styling */
.gallery-container {
    display: flex;
    flex-direction: column; /* Stack gallery and text below vertically */
    min-height: 100vh; /* Minimum height of full viewport */
    overflow: hidden; /* Prevent scrollbars on the container itself */
    
}

/* Style for the 1-column gallery */
.gallery-1-column {
    display: flex;
    flex-direction: column; /* Stack images vertically */
}

/* Style for each image container */
.gallery-1-column .image-container {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    height: 80vh; /* Set a fixed height for images (80% of viewport height) */
    margin-bottom: 15px; /* Add spacing between image containers */
}

/* Styling for images */
.gallery-1-column .image-container img {
    max-width: 100%; /* Ensure images fit within the container */
    max-height: 100%; /* Prevent images from exceeding container height */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Scale image to fit its container without cropping */
    border-radius: 4px; /* Optional: Rounded corners for images */
}

/* Style for the gallery grid with 5 columns */
.gallery-5-rows {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 5 columns */
    gap: 15px; /* Space between images */
    padding: 10px;
    box-sizing: border-box;
}

/* Ensure the image-container div wraps the image and the text correctly */
.gallery-5-rows .image-container {
    display: flex;
    flex-direction: column; /* Stack image and text vertically */
    align-items: center; /* Center both image and text horizontally */
    justify-content: center; /* Ensure both image and text are centered vertically */
    text-align: center; /* Ensure the text is centered below the image */
}

/* Ensure the images are not stretched and fit within their container */
.gallery-5-rows img {
    max-width: 100%; /* Ensure the image fits within the container */
    height: auto; /* Maintain the aspect ratio */
    object-fit: contain; /* Prevent cropping */
}

/* Style for the text under each image */
.gallery-5-rows .image-text {
    margin-top: 10px; /* Add some space between image and text */
    font-size: 14px; /* Adjust the font size of the text */
    color: #333; /* Text color */
    font-family: "Courier New", monospace; /* Adjust font type if needed */
}

/* Mobile layout (screens smaller than 768px) */
@media (max-width: 768px) {
    .gallery-5-rows {
        grid-template-columns: repeat(1, 1fr); /* 1 column for mobile */
        gap: 10px;
        padding: 5px;
    }

    .gallery-5-rows img {
        width: 100%; /* Full width of grid cell */
        height: auto; /* Maintain aspect ratio */
    }
}
/* Text below the gallery */
.text-below {
    padding: 20px; /* Space around the text */
    text-align: center; /* Center the text */
    border-top: none; /* Remove the top border */
}

/* Media query for screens smaller than 768px (typical mobile devices) */
@media (max-width: 768px) {
    /* Stack the columns vertically on small screens */
    .container {
        flex-direction: column;
    }

    /* Ensure the left-column (text) and right-column (images) stack correctly */
    .left-column, .right-column {
        flex: none; /* Remove flex grow/shrink behavior */
        width: 100%; /* Full width */
        display: flex; /* Use flexbox */
        justify-content: center; /* Center horizontally */
        align-items: center; /* Center vertically if needed */
        text-align: center; /* Center text */
        padding: 10px; /* Adjust padding for smaller screens */
        box-sizing: border-box; /* Include padding in element's total width and height */
    }

    /* Ensure the right-column (images) appears below the left-column (text) */
    .left-column {
        order: 1; /* Ensure this content is displayed first */
    }
    
    .right-column {
        order: 2; /* Ensure this content is displayed below */
    }