/* Reset default browser margin and set general page styling */
html, body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif; /* Sets the font for the whole site */
    background-color: rgb(176, 209, 198); /* Light green background */
    color: rgb(0, 0, 0); /* Default text colour */
}

/* Makes the page use flex layout so footer stays at the bottom */
body {
    display: flex;
    flex-direction: column; /* Stacks elements vertically */
    min-height: 100vh; /* Ensures the page fills the full screen height */
}

/* Header section styling */
header {
    background-color: rgb(176, 209, 198);
    color: rgb(0, 0, 0);
    padding: 20px;
    text-align: center; /* Centers the header content */
}

/* Controls the size of the website logo */
.logo {
    height: 200px;
    width: auto; /* Keeps correct image proportions */
}

/* Banner image styling */
.banner {
    width: 100%; /* Makes banner stretch across the screen */
    height: 100%;
    object-fit: cover; /* Crops image to fill space without stretching */
    display: block;
}

/* Container that holds the banner and overlay text */
.banner-container {
    position: relative; /* Allows absolute positioning inside */
    flex-grow: 1; /* Allows banner to expand within layout */
    display: flex;
}

/* Text that appears on top of the banner image */
.banner-text {
    position: absolute; /* Positions text on top of the banner */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Perfectly centers the text */
    color: rgb(0, 0, 0);
    text-align: center;
}

/* Main banner heading style */
.banner-text h1 {
    margin: 0;
    font-size: 2rem;
}

/* Subtitle text under the banner heading */
.banner-text p {
    margin: 5px 0 0 0;
    font-size: 1rem;
}

/* Hero section layout */
.hero {
    display: flex; /* Uses flexbox to arrange content */
    align-items: stretch; /* Makes elements the same height */
    gap: 20px; /* Adds space between items */
    padding: 10px 20px;
    background-color: rgb(176, 209, 198);
}

/* Navigation bar styling */
nav {
    background-color: rgb(176, 209, 198);
    padding: 15px 0;
    display: flex;
    justify-content: center; /* Centers navigation links */
    gap: 150px; /* Large spacing between menu items */
}

/* Navigation link styling */
nav a {
    color: rgb(0, 0, 0);
    text-decoration: none; /* Removes underline from links */
    margin: 0 20px;
    font-weight: bold;
}

/* Main page content container */
main {
    flex: 1; /* Allows main section to grow and fill space */
    padding: 20px;
    background-color: rgb(255, 255, 255); /* White background for readability */
    max-width: 1200px; /* Limits content width */
    margin: 20px auto; /* Centers content on page */
    text-align: left;
    overflow: hidden;
}

/* Styling for artwork images inside main content */
main img.art {
    float: right; /* Floats image to the right of text */
    max-width: 40%;
    margin: 0 0 1rem 1rem; /* Adds space around the image */
}

/* Gallery layout using flexbox */
.gallery {
    display: flex;
    justify-content: center; /* Centers gallery items */
    gap: 20px; /* Space between gallery cards */
    flex-wrap: wrap; /* Allows items to move to next line on smaller screens */
}

/* Individual gallery item card */
.gallery-item {
    background: white;
    padding: 15px;
    width: 300px;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Soft shadow for card effect */
    text-align: center;
}

/* Gallery image styling */
.gallery-item img {
    width: 100%; /* Image fills the card width */
    height: 350px;
    object-fit: cover; /* Prevents distortion */
    border-radius: 5px;
    margin-bottom: 10px;
}

/* Footer styling */
.page-footer {
    background-color: rgb(176, 209, 198);
    text-align: center;
    padding: 20px 0;
    margin-top: auto; /* Pushes footer to bottom of page */
}

/* Footer container to control layout */
.page-footer .footer-container {
    max-width: 400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    align-items: center;
    gap: 10px;
}

/* Footer paragraph spacing */
.page-footer p {
    margin: 0 0 10px 0;
}

/* Social media icon container */
.social-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* Social media icon styling */
.social-footer img {
    width: 32px;
    height: 32px;
    vertical-align: middle;
    transition: transform 0.2s; /* Smooth hover animation */
}

/* Hover effect that enlarges social icons */
.social-footer img:hover {
    transform: scale(1.2);
}