Improve it further. Make it more better and robust. Use only black and white. Focus on all without compromisin.  Send the fully working full code. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Book Showcase</title>
    <style>
        /* Reset and Base Styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #121212;
            color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            display: flex;
            flex-direction: column;
            background-color: #1e1e1e;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 8px 30px rgba(255, 255, 255, 0.1);
            max-width: 1000px;
            width: 100%;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .container:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 40px rgba(255, 255, 255, 0.2);
        }

        .header {
            display: flex;
            align-items: flex-start;
            gap: 20px;
            margin-bottom: 25px;
        }

        .book-cover {
            width: 200px;
            height: 300px;
            object-fit: cover;
            border: 2px solid #ffffff;
            border-radius: 5px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .book-cover:hover {
            transform: scale(1.03) rotate(1deg);
            box-shadow: 0 4px 15px rgba(255, 255, 255, 0.3);
        }

        .book-info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .book-title {
            font-size: 2.2em;
            font-weight: 700;
            position: relative;
            margin-bottom: 15px;
        }

        .book-title::after {
            content: '';
            width: 60px;
            height: 4px;
            background-color: #ffffff;
            position: absolute;
            bottom: -8px;
            left: 0;
            border-radius: 2px;
        }

        .book-description {
            line-height: 1.6;
            color: #cccccc;
            font-size: 1em;
        }

        .buttons {
            margin-top: 30px;
            display: flex;
            gap: 20px;
        }

        .dropdown {
            position: relative;
            flex: 1;
        }

        .dropdown button {
            width: 100%;
            background-color: #000000;
            color: #ffffff;
            padding: 14px 0;
            border: 2px solid #ffffff;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1em;
            font-weight: 600;
            transition: background-color 0.3s, color 0.3s;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .dropdown button::after {
            content: '▼';
            font-size: 0.8em;
            margin-left: 8px;
            transition: transform 0.3s;
        }

        .dropdown button.active::after {
            transform: rotate(180deg);
        }

        .dropdown button:hover {
            background-color: #ffffff;
            color: #000000;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            top: 50px;
            left: 0;
            background-color: #2a2a2a;
            border: 1px solid #ffffff;
            border-radius: 5px;
            width: 100%;
            max-height: 250px;
            overflow-y: auto;
            z-index: 1000;
            animation: fadeIn 0.3s;
        }

        .dropdown-content.active {
            display: block;
        }

        .dropdown-item {
            padding: 12px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #ffffff;
            text-decoration: none;
            cursor: pointer;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: #3a3a3a;
        }

        .download-btn {
            background-color: #ffffff;
            color: #000000;
            border: none;
            padding: 6px 12px;
            border-radius: 3px;
            cursor: pointer;
            text-decoration: none;
            font-size: 0.9em;
            transition: background-color 0.3s, color 0.3s, border 0.3s;
        }

        .download-btn:hover {
            background-color: #000000;
            color: #ffffff;
            border: 1px solid #ffffff;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .container {
                padding: 25px;
            }

            .book-cover {
                width: 180px;
                height: 270px;
            }

            .book-title {
                font-size: 2em;
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }

            .book-cover {
                margin-bottom: 20px;
                width: 160px;
                height: 240px;
            }

            .buttons {
                flex-direction: column;
                gap: 15px;
            }

            .dropdown-content {
                left: 50%;
                transform: translateX(-50%);
            }
        }

        @media (max-width: 480px) {
            .book-title {
                font-size: 1.8em;
            }

            .book-description {
                font-size: 0.95em;
            }

            .dropdown button {
                padding: 12px 0;
                font-size: 0.95em;
            }

            .download-btn {
                padding: 5px 10px;
                font-size: 0.85em;
            }
        }

        /* Ensure container doesn't exceed screen boundaries */
        @media (max-width: 600px) {
            body {
                padding: 10px;
            }

            .container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="header">
            <img src="https://via.placeholder.com/200x300.png?text=Book+Cover" alt="Book Cover" class="book-cover">
            <div class="book-info">
                <h1 class="book-title">The Art of Modern Design</h1>
                <p class="book-description">
                    "The Art of Modern Design" delves into the intricate world of contemporary design principles, exploring the balance between aesthetics and functionality. This comprehensive guide offers valuable insights for both budding designers and seasoned professionals, providing actionable strategies to elevate your design projects and create visually compelling experiences that resonate with modern audiences.
                </p>
                <div class="buttons">
                    <div class="dropdown">
                        <button id="pdfBtn">Download PDF</button>
                        <div class="dropdown-content" id="pdfDropdown">
                            <div class="dropdown-item">
                                <span>Volume 1: Foundations</span>
                                <a href="path/to/volume1.pdf" class="download-btn" download>Download</a>
                            </div>
                            <div class="dropdown-item">
                                <span>Volume 2: Advanced</span>
                                <a href="path/to/volume2.pdf" class="download-btn" download>Download</a>
                            </div>
                            <!-- Add more volumes as needed -->
                        </div>
                    </div>
                    <div class="dropdown">
                        <button id="epubBtn">Download EPUB</button>
                        <div class="dropdown-content" id="epubDropdown">
                            <div class="dropdown-item">
                                <span>Volume 1: Foundations</span>
                                <a href="path/to/volume1.epub" class="download-btn" download>Download</a>
                            </div>
                            <div class="dropdown-item">
                                <span>Volume 2: Advanced</span>
                                <a href="path/to/volume2.epub" class="download-btn" download>Download</a>
                            </div>
                            <!-- Add more volumes as needed -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Function to handle dropdown toggling
        function handleDropdown(buttonId, dropdownId) {
            const button = document.getElementById(buttonId);
            const dropdown = document.getElementById(dropdownId);

            button.addEventListener('click', function(e) {
                e.stopPropagation(); // Prevent event from bubbling up to window

                // Close any other open dropdowns
                closeAllDropdowns();

                // Toggle current dropdown
                const isActive = dropdown.classList.contains('active');
                closeAllDropdowns();
                if (!isActive) {
                    dropdown.classList.add('active');
                    button.classList.add('active');
                }
            });
        }

        // Function to close all dropdowns
        function closeAllDropdowns() {
            const dropdowns = document.querySelectorAll('.dropdown-content');
            const buttons = document.querySelectorAll('.dropdown button');
            dropdowns.forEach(dd => dd.classList.remove('active'));
            buttons.forEach(btn => btn.classList.remove('active'));
        }

        // Initialize dropdowns
        document.addEventListener('DOMContentLoaded', () => {
            handleDropdown('pdfBtn', 'pdfDropdown');
            handleDropdown('epubBtn', 'epubDropdown');

            // Close dropdowns when clicking outside
            window.addEventListener('click', () => {
                closeAllDropdowns();
            });

            // Optional: Enhance keyboard accessibility
            document.querySelectorAll('.dropdown button').forEach(button => {
                button.addEventListener('keydown', (e) => {
                    if (e.key === 'Escape') {
                        closeAllDropdowns();
                        button.blur();
                    }
                });
            });
        });
    </script>

</body>
</html>