<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Dropdown Menus</title>
    <link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            margin: 0;
            font-family: 'Rowdies', cursive;
            background: black;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            position: relative;
        }

        .star-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
            cursor: pointer;
            transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
        }

        .star:hover {
            transform: scale(1.3);
            background-color: #add8e6;
            box-shadow: 0 0 15px rgba(173, 216, 230, 0.9);
        }

        .button-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 1rem;
            max-width: 80%;
            text-align: center;
        }

        .button {
            position: relative;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 15px 30px;
            font-size: 1rem;
            color: #fff;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
            border-radius: 12px;
            background: linear-gradient(135deg, #5a4fcf, #7851a9);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
            overflow: hidden;
            transition: transform 0.5s ease, background 0.5s ease, box-shadow 0.5s ease;
            opacity: 0; /* Initial state hidden for animation */
        }

        .button:hover {
            transform: scale(1.1) translateY(-5px);
            background: linear-gradient(135deg, #625ecb, #8aa8d9);
            box-shadow: 0 10px 25px rgba(90, 77, 207, 0.7), 0 5px 15px rgba(255, 255, 255, 0.4);
        }

        .dropdown-container {
            position: relative;
            display: inline-block;
        }

        .dropdown-menu {
            position: absolute;
            top: 100%;
            left: 0;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            background: linear-gradient(145deg, rgba(50, 50, 80, 0.9), rgba(30, 30, 60, 0.95));
            padding: 1rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            z-index: 10;
            opacity: 0;
            transform: translateY(-10px);
            pointer-events: none;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        .dropdown-container.active .dropdown-menu {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        .button .arrow {
            margin-left: 8px;
            font-size: 1rem;
            transform: translateY(-1px);
            transition: transform 0.3s ease;
        }

        .dropdown-container.active .arrow {
            transform: rotate(180deg);
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="star-container" id="star-container"></div>
    <div class="button-container">
        <a href="https://sites.google.com/view/cometxd/garticphone" class="button" style="animation: fadeIn 0.25s 0.25s forwards;">Gartic Phone</a>
        <div class="dropdown-container">
            <div class="button dropdown-toggle" style="animation: fadeIn 0.25s 0.5s forwards;">Randoms <span class="arrow">▼</span></div>
            <div class="dropdown-menu">
                <a href="https://sites.google.com/view/cometxd/basket-random" class="button">Basket Random</a>
                <a href="https://sites.google.com/view/cometxd/volley-random" class="button">Volley Random</a>
                <a href="https://sites.google.com/view/cometxd/boxing-random" class="button">Boxing Random</a>
                <a href="https://sites.google.com/view/cometxd/soccer-random" class="button">Soccer Random</a>
            </div>
        </div>
        <!-- Bloons Dropdown -->
        <div class="dropdown-container">
            <div class="button dropdown-toggle" style="animation: fadeIn 0.25s 0.75s forwards;">Bloons <span class="arrow">▼</span></div>
            <div class="dropdown-menu">
                <a href="https://sites.google.com/view/cometxd/bloons-td-1" class="button">Bloons TD 1</a>
                <a href="https://sites.google.com/view/cometxd/bloons-td-2" class="button">Bloons TD 2</a>
                <a href="https://sites.google.com/view/cometxd/bloons-td-3" class="button">Bloons TD 3</a>
                <a href="https://sites.google.com/view/cometxd/bloons-td-4" class="button">Bloons TD 4</a>
                <a href="https://sites.google.com/view/cometxd/bloons-td-5" class="button">Bloons TD 5</a>
            </div>
        </div>

        <!-- Geometry Dash Dropdown -->
        <div class="dropdown-container">
            <div class="button dropdown-toggle" style="animation: fadeIn 0.25s 1s forwards;">Geometry Dash <span class="arrow">▼</span></div>
            <div class="dropdown-menu">
                <a href="https://sites.google.com/view/cometxd/geometry-dash/regular" class="button">Regular</a>
                <a href="https://sites.google.com/view/cometxd/geometry-dash/freezenova" class="button">Freezenova</a>
                <a href="https://sites.google.com/view/cometxd/geometry-dash/subzero" class="button">Subzero</a>
            </div>
        </div>

        <!-- Additional Games as Direct Buttons -->
        <a href="https://sites.google.com/view/cometxd/copterroyale" class="button" style="animation: fadeIn 0.25s 1.25s forwards;">Copter Royale</a>
        <a href="https://sites.google.com/view/cometxd/happywheels" class="button" style="animation: fadeIn 0.25s 1.50s forwards;">Happy Wheels</a>
        <a href="https://sites.google.com/view/cometxd/retrobowl" class="button" style="animation: fadeIn 0.25s 1.75s forwards;">Retro Bowl</a>
        <a href="https://sites.google.com/view/cometxd/motox3m" class="button" style="animation: fadeIn 0.25s 2s forwards;">Moto X3M</a>
        <a href="https://sites.google.com/view/cometxd/slope" class="button" style="animation: fadeIn 0.25s 2.25s forwards;">Slope</a>
        <a href="https://sites.google.com/view/cometxd/bitlife" class="button" style="animation: fadeIn 0.25s 2.5s forwards;">Bitlife</a>
        <a href="https://sites.google.com/view/cometxd/smashkarts" class="button" style="animation: fadeIn 0.25s 2.75s forwards;">Smash Karts</a>
        <a href="https://sites.google.com/view/cometxd/drivemad" class="button" style="animation: fadeIn 0.25s 3s forwards;">Drive Mad</a>
        <a href="https://sites.google.com/view/cometxd/spacebarclicker" class="button" style="animation: fadeIn 0.25s 3.25s forwards;">Spacebar Clicker</a>
        <a href="https://sites.google.com/view/cometxd/2048" class="button" style="animation: fadeIn 0.25s 3.5s forwards;">2048</a>
        <a href="https://sites.google.com/view/cometxd/gba" class="button" style="animation: fadeIn 0.25s 3.75s forwards;">GBA Games</a>
        <a href="https://sites.google.com/view/cometxd/baldibasic" class="button" style="animation: fadeIn 0.25s 4s forwards;">Baldi's Basics</a>
        <a href="https://sites.google.com/view/cometxd/1v1-lol" class="button" style="animation: fadeIn 0.25s 4.25s forwards;">1v1.lol</a>
        <a href="https://sites.google.com/view/cometxd/block-blast" class="button" style="animation: fadeIn 0.25s 4.5s forwards;">Block Blast</a>
        <a href="https://sites.google.com/view/cometxd/Stickman-Destruction" class="button" style="animation: fadeIn 0.25s 4.75s forwards;">Stickman Destruction</a>
        <a href="https://sites.google.com/view/cometxd/Infinite-Craft" class="button" style="animation: fadeIn 0.25s 5s forwards;">Infinite Craft</a>
    </div>
    <script>
        const starContainer = document.getElementById('star-container');
        for (let i = 0; i < 150; i++) {
            const star = document.createElement('div');
            star.classList.add('star');
            star.style.width = star.style.height = `${Math.random() * 3 + 1}px`;
            star.style.top = `${Math.random() * 100}%`;
            star.style.left = `${Math.random() * 100}%`;
            starContainer.appendChild(star);
        }
    </script>
</body>
</html>
