@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto','Segoe UI', Arial, sans-serif;
}

header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: linear-gradient(to right, #FFFFFF, #808000);
    color: #fff;
}

.header-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    /* margin-right: 20px; /* Keep right margin */
    flex-wrap: wrap; /* Allows items to wrap if space is not enough */
}

.hamburger-menu {
    cursor: pointer;
}

@keyframes pulse-hamburger {
    0%, 100% {
        transform: scale(1);
    }
    75% {
        transform: scale(2.4);
    }
}

.animate-hamburger {
    animation: pulse-hamburger 2.0s ease-in-out;
}


/* Initially hidden navigation menu that pops down */
.nav-menu {
    display: none;
    position: absolute;
    top: 100%; /* Positioned directly below the header */
    left: 0; /* Ensures it aligns with the left edge of the viewport */
    width: 100%;
    background-color: #333;
    z-index: 1000;
    overflow: hidden; /* Ensures no extra space is taken up when not displayed */
}

/* List style for navigation links */
.nav-menu nav ul {
    list-style: none;
    padding: 0; /* No additional padding to ensure tight spacing */
    margin: 0; /* No margin to keep the list tight to the edges */
    text-align: center;
}

.nav-menu nav ul li {
    margin: 0; /* Ensure no default margins are affecting the layout */
    padding: 0; /* Ensuring padding is controlled only through <a> tags */
}

/* Individual link style in the navigation menu */
.nav-menu nav ul li a {
    display: block;
    padding: 8px 10px; /* Uniform padding for balanced spacing */
    color: white;
    text-decoration: none;
}

#donate-button {
    background: linear-gradient(to right, #ffffff, #B8BC86); /* Light grey gradient */
    color: #333;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.3s ease-in-out;
	margin-right: 0px;
}

#donate-button:hover {
    background: linear-gradient(to right, #B8BC86, #ffffff); /* Reverse gradient on hover */
}

@media screen and (min-width: 768px) {
	.nav-menu {
		display: block !important;
	}
	
    .hamburger-menu {
        display: none; /* Hide the hamburger icon on desktop */
    }
}

/* Home page Modal introduction */

.home-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: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

#homeIntroModal .home-modal-content {
    max-width: 95%; /* Maximum width, but it will adjust smaller if content needs less */
    width: auto; /* Allows the modal to shrink to fit its content */
    padding: 20px 40px;
    box-sizing: border-box; /* Includes padding in the width calculation */
}

.home-modal-content {
    background-color: rgba(255, 255, 255, 0.6); /* Light white background with opacity */
    margin: 10% auto; /* Adjusted top margin */
    padding: 20px 40px; /* Adjust padding as needed */
    border: 1px solid #888;
    width: 80%; /* Adjust width as needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: adds shadow for depth */
    backdrop-filter: blur(10px); /* Blur effect for the background */
    border-radius: 10px; /* Optional: adds rounded corners */
}

@media screen and (max-width: 768px) {
	.home-modal-content {
		background-color: rgba(255, 255, 255, 0.9);
	}
}

.home-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.home-close:hover,
.home-close:focus {
    color: black;
    text-decoration: none;
}



/* More CSS */ 

.article-title {
    font-weight: bold; /* Makes the title bold */
    text-align: center; /* Centers the title */
    font-size: 24px; /* Enlarges the title; adjust size as needed */
    margin-top: 0;
    margin-bottom: 20px; /* Adds some space below the title */
}

.article-link {
    text-decoration: none;
    color: #808000; /* Olive color for links */
    font-weight: 600;
    transition: color 0.3s ease, transform 0.3s ease;
}

.article-link i {
    margin-right: 8px; /* Spacing between the icon and the text */
    color: #6B8E23; /* A slightly different olive shade for the icon or use the same as the text */
}

.article-link:hover, .article-link:focus {
    color: #3D550C; /* Darker olive on hover/focus */
    transform: scale(1.05);
}

#article-content {
    /* Styles to ensure the content is readable on a dark background */
    color: white; /* Ensures text is white against the dark background */
}

#article-content {
    max-height: calc(100% - 40px); /* Height adjusted for top and bottom padding */
    overflow-y: auto;
    position: relative;
    margin-right: 30px; /* Adds a margin to the right of the content, pushing it away from the scrollbar */
	color: white;
}

#article-modal {
    display: none;
    position: fixed;
    top: 10%;
    left: 10%;
    right: 10%;
    bottom: 10%;
    background-color: #333;
    color: white;
    padding: 20px; /* Ensures there's padding around the entire modal content */
    padding-right: 40px; /* Increases right padding to give more space for the close button */
    overflow: hidden;
    z-index: 1000;
    border-radius: 8px;
}

#article-modal.small-modal {
    max-width: 600px; /* Controls width */
    max-height: 200px; /* New: Controls the max height of the modal itself */
    overflow: hidden; /* Ensures the modal does not show empty space */
    display: flex; /* Enables flex properties for centering */
    flex-direction: column; /* Aligns children vertically */
    justify-content: center; /* Centers content vertically in the modal */
}

/* Adjusts the modal size based on content size */
.small-modal #article-content {
    max-height: 200px; /* Adjusted for significantly less content */
    overflow-y: auto; /* Keeps content scrollable if it exceeds the max-height */
    padding: 20px; /* Adds padding for spacing around the content */
}

#close-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px; /* Explicit width */
    height: 30px; /* Explicit height */
    padding: 0; /* Adjust padding as needed */
    line-height: 30px; /* Aligns icon vertically */
    text-align: center; /* Aligns icon horizontally */
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.5em;
}


ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

li:hover {
    background-color: #f4f4f4;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.staff-link .nav-text {
    display: none; /* Start with the text hidden */
    white-space: nowrap; /* Ensure the text does not wrap when it becomes visible */
}

.staff-link:hover .nav-text, .staff-link:focus .nav-text {
    display: inline; /* Make the text visible on hover/focus */
}

.error-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.error-container h1 {
    color: #333;
    margin-bottom: 20px;
}

.error-container p {
    color: #666;
    line-height: 1.6;
}

.logout-ribbon {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 5px;
    font-size: 14px;
}

.logout-link {
    color: #fff;
    text-decoration: underline;
    padding-left: 10px;
	padding-right: 3px;
}

.sticky-header-container {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000; /* Higher value to ensure it's above other content */
    background-color: inherit; /* Or specify a color if you want a different one */
}


.header-logo:hover {
    transform: scale(1.10);
}

.header-logo {
    width: auto; /* Allows the logo to maintain its original size */
    height: auto; /* Adjust height automatically */
    margin-left: 20px; /* Adds some space from the left edge */
	transition: 0.4s ease;
}

header a {
    color: #ffffff; /* For better contrast and visibility against the gradient */
    text-decoration: none; /* Removes underline from links */
}

header nav ul {
    list-style-type: none; /* Removes default bullet points from the list */
    padding: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
    display: flex; /* Aligns menu items horizontally */
    justify-content: center; /* Centers the menu items within the navigation */
    align-items: center; /* Vertically centers the menu items */
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-link {
    display: inline-block;
    text-decoration: none;
    color: white;
    margin-right: 15px !Important;
	margin-top: 10px;
    white-space: nowrap;
}

.footer-link:last-child {
    margin-right: 0;
}

/*
a.footer-link:hover, a.footer-link:focus {
    text-decoration: underline; 
}
*/

.at-a-glance {
    font-size: larger; /* Adjust as needed */
    display: block; /* Makes it possible to apply margin/padding effectively */
    margin-bottom: 1em; /* Adjust the space as needed */
}

.address-link, .address-link:visited, .address-link:hover, .address-link:active {
    color: inherit; /* Keeps the text color consistent */
    text-decoration: none; /* No underline */
}

.address {
}


.address {
    display: block; /* Ensures the address is formatted properly */
    margin: 0; /* Adjust as needed */
    font-size: 1.0em; /* Makes the font the same as the surrounding text */
}

h2 {
	text-align: center;
}

.team-header {
    padding:10 px;
}

ul.info-list {
    list-style-type: none;
    padding-left: 20px;
    margin-left: 0;
}

ul.info-list li::before {
    content: none;
}

.info-list {
    list-style: none; 
	list-style-type: none;
    padding: 20px;
    margin: 0; /* Ensures the list aligns with any other content */
}

.info-list i {
    margin-right: 8px; /* Adds space after the icon */
}

.info-list li {
    display: flex;
    align-items: center;
    font-size: larger; /* Adjust based on your preference */
}

.info-list li i {
    width: 30px; /* Adjust the width as needed to accommodate the widest icon */
    min-width: 30px; /* Ensures icons do not shrink */
}

.info-list li span {
    margin-left: 10px; /* Adjust for horizontal spacing between the icon and text */
}

.checkbox-spacing {
    margin-right: 4px;
}

.donate-container {
    display: flex;
    justify-content: center;
    margin: 50px 0; /* Adjusts the vertical spacing before and after the donate button */
}

.copy-icon {
    padding-left: 8px; /* Adjust the padding as needed */
    cursor: pointer; /* Optional: changes the cursor to a pointer to indicate it's clickable */
}


footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0px;
    position: relative;
    bottom: 0;
    width: 100%;
}

.team-member .container, .alternate-layout .container {
	max-width: 80%;
    display: flex;
    align-items: center;
	flex-wrap: wrap;
    justify-content: space-between;
    padding: 20px 20px 20px 40px; /* Adjusted left padding for buffer */
}

.team-member .profile-img {
    flex: 0 0 auto;
	margin-right: 20px; /* Adds some space between the image and the text to the right */
    margin-bottom: 10px; /* Optional: Adds space below the image when the text is longer */
    width: 200px; /*Adjust as necessary */
    height: auto; /* Maintains aspect ratio */
}
.team-member .info {
	flex: 1;
    flex-grow: 1;
    padding: 0 20px;
}

.alternate-layout .container {
    flex-direction: row-reverse;
}

/* Table of Contents Modernized Styles */

.toc {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
    gap: 20px;
}

.toc li {
    margin-bottom: 10px;
}

.toc a {
    text-decoration: none;
    color: white;
    display: flex;
    align-items: center;
}

.toc a .nav-text {
    display: none;
}

.toc a:hover .nav-text, .toc a:focus .nav-text {
    display: inline;
}


/* Style for the image containers ensuring three items per row */
.image-section {
    display: flex;
    justify-content: center; /* Center items */
    flex-wrap: wrap;
    padding: 0 10px; /* Horizontal padding for the whole section */
}

.image-section .small-img {
    width: 100%; /* Full width to fill its container */
    height: auto; /* Maintain aspect ratio */
}

.image-container {
    flex-basis: calc(33.333% - 20px); /* Calculate width minus margins */
    margin: 10px; /* Margin around each image container */
    max-width: calc(33.333% - 20px); /* Maximum width same as flex-basis */
    position: relative; /* Needed for absolute positioning of children */
}

.image-container img {
    display: block;
    width: 100%; /* Full width of their container */
    height: auto; /* Maintain aspect ratio */
}

.image-container .overlay-text {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: linear-gradient(to bottom, #b5c583 0%, #808000 100%); /* Gradient background */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 1; /* Fully visible initially */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Smooth transitions for hover effects */
}

.image-container:hover .overlay-text {
    transform: scale(1.1); /* Scales up the overlay text */
}


/* Program Styles for Grow.php */
.programs-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.program {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa; /* Light background for each program block */
    border-radius: 10px; /* Soft rounded corners */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.program h4 {
    color: #333; /* Dark text for headings */
}

.program p {
    color: #666; /* Slightly lighter text for readability */
}

/* Optional: A slight gradient background for the programs container if desired */
.programs-container {
    background: linear-gradient(to bottom, #ffffff 0%, #eeeeee 100%);
}

.container {
    max-width: 80%; /* Limit the container width */
    margin: 40px auto; /* Center the container with vertical margin */
    padding: 20px; /* Padding inside the container */
    background-color: #f9f9f9; /* Optional: background color for the container */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow */
}

.form-field {
    width: 100%; /* Ensures input fields use full width */
    margin-top: 5px; /* Adds a small space above the input field */
}

/* Align the required field notice */
.required-field-notice {
    text-align: center; /* Center-align the notice */
    margin-bottom: 20px; /* Space before the form starts */
    color: red; /* Color for the required field text */
}

input[type="submit"] {
    background-color: #007bff; /* Button color */
    color: white; /* Text color */
    padding: 10px 15px; /* Padding inside the button */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners for the button */
    cursor: pointer; /* Pointer cursor on hover */
}

input[type="submit"]:hover {
    background-color: #0056b3; /* Darker color on hover */
}

.error {
    color: red;
    margin-left: 4px; /* Space between asterisk and error message */
    font-size: 0.9em; /* Smaller font size for error message */
    white-space: nowrap; /* Prevents breaking error message */
    flex-shrink: 0; /* Prevents error message from shrinking */
}

.form-group {
    margin-bottom: 15px; /* Adds space between each form group */
}

.required-asterisk {
    color: red;
    margin-left: 3px; /* Adjust spacing as needed */
}

label {
    display: flex; /* Allows inline layout within the label */
    align-items: center; /* Aligns items vertically */
    flex-wrap: wrap; /* Allows items to wrap as needed */
}

/* Authentication Styles */ 

.auth-container {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f8f8f8;
    text-align: center;
}

.auth-title {
    font-size: 1.5em;
    margin-bottom: 20px;
}

.auth-input {
    width: 90%;
    padding: 8px;
    margin-bottom: 20px;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.auth-button {
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    background: linear-gradient(to bottom, #b5c583 0%, #808000 100%);
    color: white;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    text-decoration: none;
    display: inline-block;
}

.auth-error {
    color: red;
}

/* Modal Content Styling */
.modal-content {
    background-color: #333; /* Dark background for the modal content */
    color: white; /* Text color */
    padding: 20px; /* Padding around the content */
    border-radius: 8px; /* Rounded corners */
    width: auto; /* Auto width based on content size */
    max-width: 600px; /* Maximum width of the modal */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Subtle shadow for depth */
}

.question-container {
	max-width: 800px;
	margin: 20px auto;
	padding: 15px;
	background-color: #f8f8f8;
	border-radius: 8px;
	box-shadow: 0 2px 4px rgba(0,0,0,0.15);
	overflow-y: auto;
	max-height: 500px;
}
.question-item {
	display: flex;
	align-items: center;
	padding: 10px;
	background-color: #f9f9f9;
	border: 1px solid #ddd;
	margin: 10px 0;
}
.question-item:nth-child(even) {
	background-color: #efefef;
}
.question-text {
	flex-grow: 1;
	padding: 5px;
	background-color: white;
	border: none;
	font-family: 'Roboto', sans-serif;
	margin-right: 10px;
}
.action-button {
	background: linear-gradient(to bottom, #b5c583 0%, #808000 100%);
	border: none;
	border-radius: 5px;
	padding: 10px 20px;
	cursor: pointer;
	font-family: 'Roboto', sans-serif;
	color: white;
	font-size: 16px;
	text-decoration: none;
	display: inline-block;
	margin-right: 10px; /* Ensures spacing between buttons */
}
/* Specifically target only the action buttons inside .question-item for spacing */
.question-item .action-button:not(:last-child) {
	margin-right: 10px;
}

/* Staff Styles */

staffnav ul {
	display: flex;
	justify-content: center;
	gap: 5px; /* Reduced space between icons for closer arrangement */
}

staffnav ul li {
	flex-grow: 0;
	flex-shrink: 0;
	margin: 0;
}

staffnav ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px; /* Initial width to fit just the icon */
	overflow: hidden;
	transition: all 0.3s ease; /* Smooth transition for all properties */
	white-space: nowrap; /* Keep text on one line when it appears */
	background-color: #333; /* Darker background for icons */
	color: white; /* Ensuring the text/icon color is white for contrast */
	border-radius: 5px; /* Optional: Adds rounded corners to each icon background */
	padding: 10px; /* Padding around the icon for better spacing and appearance */
}

/* When hovering over the link, adjust the width and content spacing */
staffnav ul li a:hover {
	width: auto; /* Auto width to accommodate text */
	padding: 10px; /* Maintain consistent padding */
	padding-right: 20px; /* Additional padding to the right when text appears */
	background-color: #555; /* Slightly lighter background on hover for feedback */
	color: white; 
}

/* Make the text appear on hover */
staffnav ul li a:hover .nav-text {
	display: inline-block; /* Show the text */
	padding-left: 10px; /* Space between icon and text */
}

/* Stream Layout Styles */
.stream-layout {
    display: flex;
    justify-content: center; /* Center the items horizontally */
    align-items: stretch; /* Stretch items to fill the container height */
    gap: 20px; /* Space between the video and chat */
    padding: 20px;
    margin: 50px auto; /* Centers the layout with margin from top and bottom */
}

.stream-container {
    flex-grow: 1; /* Allows the container to grow in width */
    flex-shrink: 1; /* Allows the container to shrink if necessary */
    flex-basis: 0; /* Starts from zero and grows as needed */
    padding: 20px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 0.18);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stream-video {
    width: 100%; /* Ensures video fills the container */
    height: auto;
    border-radius: 5px;
}

.chat-container {
    flex: none; /* Does not allow the chat container to grow */
    width: 250px; /* Fixed width */
    overflow: hidden; /* Hides any overflow, optional */
}

/* Responsive Styles */

@media screen and (max-width: 768px) {

	.image-container {
		flex-basis: 100%; /* Full width of its parent */
		max-width: 100%; /* Ensures the container does not exceed the width of the viewport */
		margin: 10px 0; /* Vertical margin for spacing */
	}

	.image-container .overlay-text {
		position: absolute;
		bottom: 10px;
		left: 10px;
		width: auto; /* Adjust width as needed */
		padding: 5px 10px;
		background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background for readability */
		color: white; /* White text for contrast */
		border-radius: 5px; /* Rounded corners for aesthetic */
		text-align: center;
		opacity: 1; /* Ensures text is always visible, useful for accessibility */
	}

	/* Removes any transformation effects, keeps everything static */
	.image-container:hover .overlay-text, 
	.image-container:focus .overlay-text,
	.image-container:active .overlay-text {
		transform: none;
	}

    nav ul {
        flex-direction: column; /* Stacks nav items vertically */
        align-items: center; /* Ensures items are centered */
    }

    nav ul li {
        margin: 5px 0; /* Reduced margin for compact appearance */
    }

    .profile-img {
        display: block;
        margin: 0 auto 10px; /* Reduces bottom margin for tighter layout */
        width: 100%; /* Ensures image is responsive */
    }

    .container {
        flex-direction: column;
        max-width: 95%;
    }

    .image-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
    }

    .image-section .small-img {
        width: 100%; /* Ensures images are responsive */
        height: auto; /* Maintains aspect ratio */
    }

    .team-member .container, .alternate-layout .container {
        flex-direction: column;
        justify-content: center;
    }

    .team-member .info, .alternate-layout .info {
        order: 1;
    }
	
    .team-member .profile-img, .alternate-layout .profile-img {
        order: 2;
        width: 100%;
        max-width: 300px; /* Limits max width for better control */
        margin: 10px auto; /* Centers and reduces vertical spacing */
        height: auto;
    }

    header, .nav-container {
        background-color: black;
    }

    header nav ul li a, header nav ul li a .nav-text {
        color: white; /* Ensures text is visible against a dark background */
    }

    .nav-text {
        display: inline; /* Keeps text visible inline */
    }

    header nav ul {
        padding: 0;
    }

    header nav ul li {
        padding: 5px; /* Sufficient padding for tap targets */
        display: block;
    }
	
	.header-logo {
        width: 100%; /* Makes the logo no wider than half the screen width */
        height: auto; /* Maintains the aspect ratio */
    }
	
	.header-logo:hover {
		transform: none;
	}

    staffnav ul li a .nav-text {
        display: none !important; /* Ensures the text remains hidden */
    }
	
	staffnav ul li a:hover .nav-text, staffnav ul li a:focus .nav-text {
        display: none; /* Keeps text hidden even on hover or focus */
    }

    staffnav ul li a:hover, staffnav ul li a:focus {
        background-color: #333; /* Keeps background color constant */
        color: white; /* Ensures icon color does not change */
        padding: 10px; /* Consistent padding */
        width: 50px; /* Consistent width */
    }
	
    /* Ensure the container is a column and center-aligned */
    .team-member .container, .alternate-layout .container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Ensure the title is bold and appears first */
    .team-member h2, .alternate-layout h2 {
        order: -1; /* This places the title above the image */
        font-weight: bold;
        width: 100%;
        text-align: center;
    }

    /* Adjust image styling for mobile */
    .team-member .profile-img, .alternate-layout .profile-img {
        order: 0; /* Resets order to make image appear after the title */
        margin: 0 auto 20px; /* Center the image and add space below */
    }

    /* Info text appears last */
    .team-member .info, .alternate-layout .info {
        order: 1; /* Text comes after the image */
    }
	
    header nav ul li a {
        padding: 8px; /* Consistent padding for navigation links */
    }
 
    .nav-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        background-color: black;
    }

    .nav-container nav ul li a {
        justify-content: center;
    }
	
    .header-controls {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Aligns children to the right */
        width: 100%;
    }

    .menu-container {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* Ensures both buttons are aligned to the right */
        gap: 10px; /* Adds space between hamburger menu and donate button */
    }

    .hamburger-menu {
        order: 2; /* Ensures hamburger menu comes before the donate button */
    }

    #donate-button {
        order: 1; /* Ensures donate button comes after the hamburger menu */
        padding: 5px 10px;
        width: auto; /* Allows the button to size itself based on its padding and content */
    }
	
    .image-container {
        flex-basis: 100%; /* Makes the container take the full width of its parent */
        max-width: 100%; /* Overrides any max-width settings from desktop styles */
        margin: 10px 0; /* Provides vertical margin only */
    }
	
    .stream-video {
        width: 100%;
        height: auto;
    }
	
    .stream-layout {
        flex-direction: column; /* Stack the video and chat vertically */
        align-items: center; /* Center align the items */
    }

    .stream-container, #cid0020000376399444316 {
        max-width: 100%; /* Full width for both video and chat on small screens */
        margin: 10px 0; /* Adjust margin for vertical stacking */
        width: auto; /* Auto width to fill the container */
    }
}