/* Reset and base styles */
html, body { /* Set base width, height, and remove default margin/padding */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    box-sizing: border-box; /* Include border and padding in element's total width/height */
}

body {
    min-height: 100vh; /* Ensure body is at least the height of the viewport */
    display: flex; /* Use flexbox for vertical layout */
    flex-direction: column; /* Stack children vertically */
    font-family: Arial, Helvetica, sans-serif; /* Set font */
    background-color: rgba(255, 255, 255, 0.6); /* Semi-transparent white background */
    background-image: url("maximages/max-letts-art-unnamed-abstract.jpg"); /* Set background image */
    background-size: cover; /* Cover entire background */
    background-repeat: no-repeat; /* Do not repeat background image */
    position: relative; /* For stacking context */
    z-index: 0; /* Set stacking order */
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
}

body::before {
    content: ""; /* Empty content for overlay */
    position: fixed; /* Fixed position to cover viewport */
    top: 0; /* Top edge */
    left: 0; /* Left edge */
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    background: rgba(255,255,255,0.5); /* Semi-transparent overlay */
    z-index: 0; /* Behind main content */
    pointer-events: none; /* Allow clicks through overlay */
}

/* Header */
.header-container {
    background-color: rgba(179, 248, 177, 0.5); /* Semi-transparent green */
    width: 100%; /* Full width */
    padding-top: 40px; /* Space above header text */
    padding-bottom: 40px; /* Space below header text */
    text-align: center; /* Center header text */
    box-sizing: border-box; /* Include padding in width */
    position: relative; /* For pseudo-element stacking */
    z-index: 1; /* Above background overlay */
    min-height: 120px; /* Minimum height for header */
}
.header-container::before {
    content: ""; /* Empty content for overlay */
    position: absolute; /* Absolute position within header */
    top: 0; /* Top edge */
    left: 0; /* Left edge */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgba(179, 248, 177, 0.5); /* Semi-transparent green overlay */
    z-index: -1; /* Behind header content */
}
.header-container h1 {
    margin: 0; /* Remove default margin */
    padding: 0; /* Remove default padding */
    font-size: 40px; /* Large font size */
    color: black; /* Black text */
    font-family: Arial, Helvetica, sans-serif; /* Font family */
    text-align: center; /* Center text */
    text-overflow: ellipsis; /* Ellipsis for overflow */
    display: block; /* Block display */
}
.header-container p {
    margin-top: 0;
    margin-bottom: 0;
    padding-bottom: 10px; /* Optional: add a little spacing between paragraphs */
}
.header-container p:not(:first-child) {
    margin-top: 10px;
} /* Space above non-first paragraphs */

/* Divider below header */
.title-divider {
    border: none; /* Remove default border */
    border-top: 5px solid black; /* Thick black top border */
    width: 100%; /* Full width */
    margin: 0; /* Remove default margin */
    margin-bottom: 30px; /* Space below divider */
}

/* Main content */
.content {
    flex: 1 0 auto; /* Take up remaining vertical space */
    z-index: 1; /* Above background overlay */
}

/* Gallery grid */
.gallery {
    display: grid; /* Use CSS grid for layout */
    grid-template-columns: repeat(3, 1fr); /* 3 columns of equal width */
    grid-template-rows: repeat(2, auto); /* 2 rows, height auto */
    column-gap: 8px; /* Space between columns */
    row-gap: 150px; /* Large space between rows */
    padding: 1px; /* Small padding */
    max-width: 100%; /* Do not exceed container width */
    margin: 0 auto; /* Center horizontally */
    box-sizing: border-box; /* Include padding in width */
    z-index: 1; /* Above background overlay */
}
.gallery div {
    display: flex; /* Use flexbox for vertical alignment */
    flex-direction: column; /* Stack children vertically */
    align-items: center; /* Center items horizontally */
    margin-bottom: 20px; /* Space below each gallery item */
    z-index: 1; /* Above background overlay */
}
/* Vertically center only the second row of the gallery */
.gallery > div:nth-child(n+4):nth-child(-n+6) {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: top; /* Vertically center content */
    height: 100%; /* Stretch to row height */
}
.image-title {
    margin-bottom: 15px; /* Space below title */
    font-size: 25px; /* Large font size */
    color: rgb(0, 0, 0); /* Black text */
    text-align: center; /* Center text */
    z-index: 1; /* Above background overlay */
}
.responsive-image {
    max-width: 70%; /* Image can be up to 70% of container width */
    height: auto; /* Maintain aspect ratio */
    border: 20px solid white; /* White border */
    border-radius: 6px; /* Rounded corners */
    z-index: 1; /* Above background overlay */
}
img[alt="Max Letts' art 'Canterbury Street Scene'"] {
    height: 50%; /* Half height */
    width: auto; /* Maintain aspect ratio */
    max-height: 800px; /* Maximum height */
    object-fit: cover; /* Cover container, crop if needed */
}

/* Footer */
footer {
    padding: 0px; /* Space above and below footer content */
    width: 100%; /* Full width */
    text-align: center; /* Center text */
    background-color: #b3f8b1; /* Solid light green background */
    box-sizing: border-box; /* Include padding in width */
    border: 4px solid black; /* Black top border */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow above footer */
    margin: 0; /* Remove default margin */
    margin-top: auto; /* Push footer to bottom */
    z-index: 2; /* Above background overlay */
    min-height: 60px; /* Minimum height */
}

/* Footer buttons */
.bottom-buttons {
    font-size: 16px; /* Button font size */
    font-family: Arial, Helvetica, sans-serif; /* Button font */
    text-align: center; /* Center buttons */
    margin-top: 20px; /* Space above buttons */
    margin-bottom: 20px; /* Space below buttons */
    z-index: 2; /* Above background overlay */
}
.button,
.button-link {
    display: inline-block; /* Inline block for button sizing */
    padding: 10px 20px; /* Padding inside buttons */
    font-size: 16px; /* Button font size */
    color: rgb(0, 0, 0); /* Button text color */
    background-color: rgb(3, 226, 255); /* Semi-transparent green background */
    text-align: center; /* Center text */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    margin: 5px; /* Space between buttons */
    border: 1px solid aliceblue; /* Light border */
    width: auto; /* Width based on content */
    min-width: 220px; /* Minimum width for consistency */
    box-sizing: border-box; /* Include padding in width */
    z-index: 2; /* Above background overlay */
}
.button:hover,
.button-link:hover {
    background-color: #0056b3; /* Dark blue on hover */
}

/* Social icons */
.social-icons {
    display: flex; /* Use flexbox for icon layout */
    justify-content: center; /* Center icons horizontally */
    gap: 10px; /* Space between icons */
    margin-bottom: 20px; /* Space below icons */
    z-index: 2; /* Above background overlay */
}
.social-icon {
    color: rgb(252, 252, 252);         /* Icon color */
    font-size: 24px;                   /* Icon size */
    text-decoration: none;             /* Remove underline */
    z-index: 2;                        /* Above background overlay */
    border: 2px solid black;           /* Black border */
    border-radius: 8px;                /* Rounded corners */
    background-color: #1877f3;         /* Facebook blue background */
    padding: 8px 12px;                 /* Space inside the border */
    display: inline-flex;              /* Align icon nicely */
    align-items: center;               /* Center icon vertically */
    justify-content: center;           /* Center icon horizontally */
    transition: background 0.2s, color 0.2s;
}
.social-icon:hover {
    color: #008080;                    /* Teal color on hover */
    background-color: #145db2;         /* Darker blue on hover */
}
.social-block {
    border: 2px solid black;      /* Black border */
    border-radius: 8px;           /* Optional: rounded corners */
    display: inline-block;        /* Shrink to fit content */
    padding: 16px 24px;           /* Space inside the border */
    margin: 0 auto 20px auto;     /* Center and add space below */
    background: rgba(255,255,255,0.7); /* Optional: subtle background */
    text-align: center;
}
/* General text styles */
p {
    font-family: Arial, Helvetica, sans-serif; /* Paragraph font */
    color: rgb(0, 0, 0); /* Paragraph text color */
    font-size: 20px; /* Paragraph font size */
    font-weight: bold; /* Bold text */
    z-index: 1; /* Above background overlay */
    text-align: center; /* Center text */
}