<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Animated Hamburger Menu with Integrated Cross</title>
    <style>
        /* Basic Reset */
        *, *::before, *::after {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            height: 100vh;
            position: relative;
            overflow: hidden; /* Prevent scroll when overlay is open */
        }

        /* Hamburger Menu Button Styles */
        .menu-button {
            position: fixed;
            top: 20px;
            right: 20px;
            width: 35px;
            height: 30px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 1001;
            transition: all 0.3s ease;
        }

        .menu-button span {
            display: block;
            height: 3px;
            width: 100%;
            background-color: #333;
            border-radius: 2px;
            transition: all 0.3s ease;
            transform-origin: center;
        }

        /* Overlay Styles */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .overlay.active {
            display: flex;
            opacity: 1;
        }

        /* Close Button Inside Overlay */
        .close-button {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 35px;
            height: 30px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            z-index: 1002; /* Higher than overlay to ensure visibility */
            transition: all 0.3s ease;
        }

        .close-button span {
            display: block;
            height: 3px;
            width: 100%;
            background-color: #fff;
            border-radius: 2px;
            transition: all 0.3s ease;
            position: relative;
        }

        /* Transform Close Button into Cross */
        .close-button.open span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
            background-color: #fff;
        }

        .close-button.open span:nth-child(2) {
            opacity: 0;
        }

        .close-button.open span:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -5px);
            background-color: #fff;
        }

        /* Content Container */
        .content {
            background-color: #fff;
            width: 350px;
            max-width: 90%;
            padding: 40px 30px;
            border-radius: 8px;
            position: relative;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            animation: scaleIn 0.3s ease forwards;
        }

        @keyframes scaleIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* Main Menu Styles */
        .content h2 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
        }

        .content button {
            width: 100%;
            padding: 12px;
            margin: 10px 0;
            border: none;
            background-color: #007BFF;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s ease;
        }

        .content button:hover {
            background-color: #0056b3;
        }

        /* Forms Styles */
        .form-container {
            display: none;
            flex-direction: column;
            align-items: center;
        }

        .form-container.active {
            display: flex;
        }

        .form-container h2 {
            text-align: center;
            margin-bottom: 20px;
            color: #333;
        }

        .form-container form {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .form-container form input {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 16px;
        }

        .form-container form button {
            padding: 12px;
            margin: 15px 0 0 0;
            border: none;
            background-color: #28A745;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.2s ease;
        }

        .form-container form button:hover {
            background-color: #1e7e34;
        }

        /* Responsive Adjustments */
        @media (max-width: 400px) {
            .menu-button,
            .close-button {
                width: 30px;
                height: 25px;
            }

            .menu-button span,
            .close-button span {
                height: 2px;
            }

            .content {
                width: 90%;
                padding: 20px;
            }

            .menu-button,
            .close-button {
                top: 15px;
                right: 15px;
            }
        }
    </style>
</head>
<body>

    <!-- Hamburger Menu Button -->
    <div class="menu-button" id="menuButton" aria-label="Open Menu" aria-expanded="false" role="button" tabindex="0">
        <span></span>
        <span></span>
        <span></span>
    </div>

    <!-- Overlay -->
    <div class="overlay" id="overlay">
        <!-- Close Button Inside Overlay -->
        <div class="close-button" id="closeButton" aria-label="Close Menu" aria-expanded="true" role="button" tabindex="0">
            <span></span>
            <span></span>
            <span></span>
        </div>

        <!-- Main Menu Content -->
        <div class="content" id="menuContent">
            <h2>Main Menu</h2>
            <button id="authBtn">Authorization</button>
            <button id="regBtn">Registration</button>
        </div>

        <!-- Authorization Form -->
        <div class="content form-container" id="authForm">
            <h2>Authorization</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="password" placeholder="Password" required>
                <button type="submit">Login</button>
            </form>
        </div>

        <!-- Registration Form -->
        <div class="content form-container" id="regForm">
            <h2>Registration</h2>
            <form>
                <input type="text" placeholder="Username" required>
                <input type="email" placeholder="Email" required>
                <input type="password" placeholder="Password" required>
                <input type="password" placeholder="Confirm Password" required>
                <button type="submit">Register</button>
            </form>
        </div>
    </div>

    <script>
        // Get Elements
        const menuButton = document.getElementById('menuButton');
        const closeButton = document.getElementById('closeButton');
        const overlay = document.getElementById('overlay');
        const menuContent = document.getElementById('menuContent');
        const authBtn = document.getElementById('authBtn');
        const regBtn = document.getElementById('regBtn');
        const authForm = document.getElementById('authForm');
        const regForm = document.getElementById('regForm');

        let currentState = 'menu'; // Tracks current view

        // Function to Show Specific Content
        function showContent(content) {
            // Hide all content containers
            menuContent.style.display = 'none';
            authForm.style.display = 'none';
            regForm.style.display = 'none';
            // Remove 'active' class
            authForm.classList.remove('active');
            regForm.classList.remove('active');
            // Show selected content
            content.style.display = 'flex';
            if (content.classList.contains('form-container')) {
                content.classList.add('active');
            }
            currentState = content.id;
        }

        // Function to Open Overlay Menu
        function openMenu() {
            overlay.classList.add('active');
            menuButton.style.display = 'none'; // Hide hamburger button
            closeButton.classList.add('open'); // Animate close button to cross
            showContent(menuContent);
        }

        // Function to Close Overlay Menu
        function closeMenu() {
            overlay.classList.remove('active');
            menuButton.style.display = 'flex'; // Show hamburger button
            closeButton.classList.remove('open'); // Reset close button animation
            // Reset to menu state
            currentState = 'menu';
            // Show main menu content when reopening
            menuContent.style.display = 'flex';
            authForm.style.display = 'none';
            regForm.style.display = 'none';
            authForm.classList.remove('active');
            regForm.classList.remove('active');
        }

        // Event Listeners for Opening and Closing Menu
        menuButton.addEventListener('click', openMenu);
        closeButton.addEventListener('click', closeMenu);

        // Event Listeners for Menu Options
        authBtn.addEventListener('click', () => {
            showContent(authForm);
        });

        regBtn.addEventListener('click', () => {
            showContent(regForm);
        });

        // Close overlay when clicking outside the content
        overlay.addEventListener('click', (e) => {
            if (e.target === overlay) {
                closeMenu();
            }
        });

        // Close overlay with Escape key
        window.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && overlay.classList.contains('active')) {
                closeMenu();
            }
        });

        // Accessibility: Allow Enter and Space to toggle buttons
        function handleKeyPress(event, action) {
            if (event.key === 'Enter' || event.key === ' ') {
                event.preventDefault();
                action();
            }
        }

        menuButton.addEventListener('keydown', (e) => handleKeyPress(e, openMenu));
        closeButton.addEventListener('keydown', (e) => handleKeyPress(e, closeMenu));
    </script>

</body>
</html>OK, but when closing the forms of authorization and registration should throw to the primary menu with buttons home authorization and registration and so on, but not completely close everything. modify ONLY THIS, NOT EVERYTHING. write me the whole full modified code.