/* Apply Inter font and basic styles to the body */
        body {
            margin: 0;
            padding: 20px; /* Add padding to top/bottom for scrollable content */
            font-family: 'Inter', sans-serif; /* Using Inter font */
            background-color: #f0f0f0; /* Fallback background color */
            position: relative; /* Needed for background overlay positioning */
            /* Removed flexbox centering and min-height to allow natural scrolling */
        }

        /* Background overlay for the image with transparency */
        .background-overlay {
            position: fixed; /* Fixes the background to the viewport */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Placeholder background image - replace with your actual image path */
            background-image: url('');
            background-size: cover; /* Cover the entire area */
            background-position: center; /* Center the background image */
            opacity: 0.9; /* 90% opaque, meaning 10% transparent */
            z-index: -1; /* Send it behind the content */
        }

        /* Container for the puzzle images, using CSS Grid for layout */
        .puzzle-container {
            display: grid;
            /* FORCED 3x3 LAYOUT: Create exactly 3 columns, each taking an equal fraction of the available space.
                Images will now always arrange in 3 columns, scaling to fit. */
            grid-template-columns: repeat(4, 1fr);
            gap: 16px; /* Space between grid items (images) */
            padding: 20px; /* Padding around the grid */
            background-color: rgba(7, 112, 11, 0.8); /* Slightly transparent green background for the container */
            border-radius: 12px; /* Rounded corners for the container */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Soft shadow for depth */
            position: relative; /* Ensure it's above the background */
            z-index: 1; /* Bring content to the front */
            /* Center grid items (images) horizontally and vertically within their cells */
            justify-items: center;
            align-items: center;
        }

        /* Styling for individual puzzle images */
        .puzzle-image {
            width: 250px; /* Set fixed width for images */
            height: 250px;    /* Set fixed height for images */
            object-fit: cover; /* Ensures images cover the area without distortion */
            border-radius: 8px; /* Rounded corners for images */
            display: block; /* Ensures proper centering within grid cells */
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for each image */
            transition: transform 0.2s ease-in-out; /* Smooth hover effect */
        }

        /* Hover effect for images */
        .puzzle-image:hover {
            transform: scale(1.03); /* Slightly enlarge on hover */
        }

        /* Style for the links wrapping the images */
        .puzzle-link {
            display: block; /* Make the link a block-level element to wrap the image properly */
            text-decoration: none; /* Remove underline from links */
            line-height: 0; /* Remove extra space below images within links */
        }

        /* Basic heading style */
        h1 {
            color: #fff; /* Changed to white for better contrast with green container */
            text-align: center;
            margin-bottom: 20px;
            font-size: 2.5em;
            position: relative;
            z-index: 1;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* Slightly stronger shadow for visibility */
        }

        /* Wrapper for heading and puzzle container to keep them together */
        .content-wrapper {
            display: flex;
            flex-direction: column;
            align-items: center;
            /* Added margin-top and margin-bottom for spacing and auto for horizontal centering */
            margin: 20px auto;
            max-width: 1200px; /* Limit content width on very large screens */
            width: 100%; /* Ensure it takes full width up to max-width */
            z-index: 1;
        }

        /* adjust image on phone */
        img, video {
            max-width: 100%;
            height: auto;
        }

        /* link color */
        a:link {
            color: rgb(49, 50, 49);
            background-color: transparent;
            text-decoration: none;
        }

        a:visited {
            color: pink;
            background-color: transparent;
            text-decoration: none;
        }

        a:hover {
            color: rgb(18, 123, 6);
            background-color: transparent;
            text-decoration: underline;
        }

        a:active {
            color: yellow;
            background-color: transparent;
            text-decoration: underline;
        }