/* GLOBAL RESETS AND TYPOGRAPHY */
:root {
    --primary-color: #007bff; /* Kept for potential future use or consistency */
    --secondary-color: #6c757d;
    --background-light: #f8f9fa;
    --text-dark: #343a40;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%; /* Important for the image to fill the viewport */
    overflow: hidden; /* Hide scrollbars if content slightly overflows */
    font-family: Arial, sans-serif;
    color: var(--text-dark);
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 0; /* Reduced padding for footer */
}

/* FULL-PAGE IMAGE STYLES */
.full-page-image {
    position: fixed; /* Fixes the image to the viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Puts the image behind other content if any */
    overflow: hidden; /* Ensures the image doesn't cause scrollbars if it's larger than the viewport */
}

.full-page-image img {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the image */
    object-fit: cover; /* This is the key: makes the image cover the entire container */
    display: block;
}

/* FOOTER */
footer {
    position: fixed; /* Fixes the footer to the bottom */
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(52, 58, 64, 0.7); /* Semi-transparent background for readability */
    color: var(--secondary-color);
    text-align: center;
    padding: 15px 0;
    font-size: 0.9em;
    z-index: 1; /* Ensures footer is above the image */
}

/* MEDIA QUERIES FOR SMALLER SCREENS */
@media (max-width: 600px) {
    .container {
        padding: 5px 0; /* Further reduce footer padding on small screens */
    }
    footer {
        padding: 10px 0;
        font-size: 0.8em;
    }
}