html, body {
    height: 100%; /* Ensure html and body take full height */
    margin: 0; /* Remove default margin */
}

body {
    display: flex;
    flex-direction: column; /* Arrange children (header, main, galleryfooter) vertically */
}



header {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
}

main {
    display: flex;
    flex-direction: row; /* Arrange elements horizontally */
    align-items: center; /* Center content vertically */
    padding: 1px;
    margin-left: 200px; 
    justify-content: center; /* Center elements horizontally */
    flex-wrap: wrap; /* Allow wrapping if needed */
}

.filter {
    margin: 0 10px; /* Adjust spacing as needed */
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    max-width: 150px; /* Adjust to fit your design */
    text-align: center; /* Center content inside */
}

.filter label {
    margin-right: 10px;
}

#tagFilter {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    width: 100%; /* Ensures the dropdown takes the full width of its container */
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    padding: 20px;
	margin-left: 200px;
	
    flex: 1; /* Ensures this element grows to take available space */
}

.gallery img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s;
}

.gallery img:hover {
    transform: scale(1.05);
}

#nextButton {
    margin: 0 10px; /* Adjust spacing as needed */
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#nextButton:hover {
    background-color: #0056b3;
}

#backButton {
    margin: 0 10px; /* Adjust spacing as needed */
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

#backButton:hover {
    background-color: #0056b3;
}

/* Adjust the menu for small screens */
@media (max-width: 600px) {
    .menu {
        width: 60px; /* Reduced width for mobile view */
    }
    .menu a {
        font-size: 0; /* Hide text */
        padding: 10px;
        text-align: center; /* Center the first letter */
    }
    .menu a::before {
        content: attr(data-letter); /* Show the first letter */
        font-size: 18px; /* Adjust font size as needed */
    }
    .header, .content-wrapper {
        margin-left: 60px; /* Adjust margin-left for mobile view */
        width: calc(100% - 60px); /* Adjust width for mobile view */
    }
	main {
        margin-left: 60px; /* Adjust margin-left for mobile view */
	}
	.gallery {
        margin-left: 60px; /* Adjust margin-left for mobile view */
	}
}


/* Apply Flexbox to the entire page */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

/* Apply Flexbox to the entire page */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.content {
    flex: 1; /* This allows the content area to grow and fill available space */
}

/* Footer Styles */
.galleryfooter {
    display: flex;
    flex-direction: column; /* Arrange elements vertically */
    margin-top: auto; /* Push the footer to the bottom */
}

/* Spacer Element Styles */
.spacer {
    flex: 1; /* Allow this element to grow and fill available space */
}

/* Footer Styles */
.footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

/* Footer Inner Styles */
.footer-inner {
    max-width: 100%; /* Expand to full width */
    margin: 0 auto;
    padding: 0 10px; /* Add padding if needed */
}