/* Basic Reset & General Styles */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Poppins', sans-serif; /* Example font, change if needed */
    background-color: #c6c6c6; /* Light blue sky background */
    color: #333;
    overflow-x: hidden; /* Prevent horizontal scrollbars from absolutely positioned elements */
}

.container {
    max-width: 1200px; /* Adjust as needed, or use percentages */
    min-height: 900px;
    margin: 0 auto;
    padding: 20px;
    position: relative; /* For positioning child elements */
    display: flex;
    flex-direction: column;
    background-color: #caeefb;
    
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
}

/* Header / Title */
.book-title {
    text-align: left;
    margin-bottom: 20px;
    padding-left: 2%; /* Align with text content more or less */
}

.book-title img {
    max-width: 550px; /* Adjust based on your title image actual size */
    height: auto;
    display: block;
}

.author-name {
    font-size: 1.2em;
    color: #000; /* Black, as in image */
    margin-top: 5px;
    margin-left: 10px; /* Slight indent */
    font-weight: normal;
}

/* Main Content Area */
.content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    flex-grow: 1; /* Allow this section to grow and push footer down */
    position: relative; /* For character positioning context */
    z-index: 2; /* Above grass */
}

.text-content {
    flex: 1 1 25%; /* Takes up more space, allows shrinking/growing */
    padding-right: 20px; /* Space between text and image area */
    padding-left: 2%;
    font-size: 0.9em;
    line-height: 1.7;
    color: #3b3b3b; /* Dark grey text */
}

.text-content .intro-blurb {
    font-weight: bold;
    color: #000; /* Black, as in image */
    font-size: 1.1em; /* Slightly larger */
    margin-bottom: 1.5em;
}

.text-content p {
    margin-bottom: 1em;
}

/* Character Images Area */
.character-images,
.home-character-images {
    flex: 1 1 40%; /* Takes up less space */
    position: relative; /* Crucial for positioning images within */
    min-height: 400px; /* Ensure it has some height for positioning */
}

.animal-container {
	text-align: center;
}

.animal-container img {
	height: 210px;
	margin-right: 40px;
}

/* Footer */
.page-footer {
    display: flex;
    padding: 15px 2% 70px 2%;
    position: relative; /* To sit above grass if container padding is tricky */
    z-index: 20; /* Above everything else except maybe modals */
    gap: 20px; /* Space between social icons and buttons */
}

.social-links img {
    width: 40px; /* Adjust size */
    height: 40px;
    margin-right: 10px;
    border-radius: 50%; /* Make them circular if the icons are square */
    background-color: #fff; /* If icons are transparent and need a bg */
    padding: 5px; /* If background added */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.action-buttons {
	padding-top: 13px;
}

.action-buttons .button {
    background-color: #f7a827; /* Orange-yellow from image */
    color: white;
    padding: 10px 25px;
    border-radius: 25px; /* Pill shape */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    margin-right: 10px;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: background-color 0.3s ease;
}

.action-buttons .button:hover {
    background-color: #e09315; /* Darker shade on hover */
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .book-title img {
        max-width: 450px;
    }
    .text-content {
        font-size: 0.85em;
    }
    #neil-image { right: 15%; width: 50%; }
    #koala-image { left: 10%; top: 200px; width: 28%;}
    #wombat-image { right: -5%; width: 40%; top: 150px; }
}


@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column; /* Stack text and images */
    }
    .text-content {
        flex-basis: auto; /* Reset flex-basis */
        padding-right: 0;
        order: 2; /* Text below images if desired, or 1 for above */
        text-align: center;
    }

    .home-character-images {
    	display: none;
	}

    /* Re-adjust absolute positions for stacked view - this is tricky */
    /* You might need to make them relative or use different absolute values */
    #neil-image { position: relative; top: auto; right: auto; margin: 0 auto; width: 60%; max-width: 280px; }
    #koala-image { position: absolute; /* still absolute for overlap */ top: 150px; left: 5%; width: 35%; max-width: 150px; }
    #wombat-image { position: absolute; top: 100px; right: 5%; width: 45%; max-width: 220px; }

    .book-title {
        text-align: center;
        padding-left: 0;
    }
    .book-title img {
        margin: 0 auto;
        max-width: 90%;
    }
    .author-name {
        text-align: center;
        margin-left: 0;
    }

    .grass-foreground {
        /* Hide grass or simplify on mobile if it complicates layout too much */
        /* Or ensure it's behind absolutely positioned footer items */
        max-height: 100px;
    }

    .page-footer {
        flex-direction: column;
        gap: 15px;
    }
    .action-buttons {
        display: flex;
        flex-direction: column; /* Stack buttons on very small screens */
        align-items: center;
        gap: 10px;
        width: 100%;
    }
    .action-buttons .button {
        width: 80%;
        text-align: center;
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .text-content { font-size: 0.8em; }
    .text-content .intro-blurb { font-size: 1em; }

    /* Further fine-tune character positions for very small screens */
    #koala-image { top: 120px; left: 2%; width: 30%; }
    #wombat-image { top: 80px; right: 2%; width: 40%; }

    .social-links img { width: 35px; height: 35px; }
    .action-buttons .button { font-size: 0.8em; padding: 8px 20px;}
    .action-buttons { margin-bottom: 80px; }
}