.container {
            max-width: auto;
            margin: 0 auto;
            padding: 20px;
        }

        .top-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .button-group {
            display: flex;
            gap: 10px;
        }

        button {
            padding: 10px 20px;
            border: none;
            background-color: black; /* Default background color */
            color: white; /* Default text color */
            cursor: pointer;
            font-size: 14px;
            border-radius: 5px;
            font-weight: bold; /* Make button text bold */
            transition: background 0.3s ease, transform 0.2s ease; /* Smooth transition for hover effects */
        }

        /* Button hover effects and active color */
        #randomBtn:hover,
        button.active#randomBtn {
            background: linear-gradient(90deg, #EEE0FF, #9370DB); /* Lavender to Medium Purple gradient */
            color: white; /* Text color */
            transform: translateY(-2px); /* Move up slightly on hover */
        }

        #generateBtn:hover,
        button.active#generateBtn {
            background: linear-gradient(90deg, rgba(224, 255, 224, 1), rgba(173, 255, 173, 1));
            /* Example gradient for Generate button */
            color: black; /* Text color */
            transform: translateY(-2px); /* Move up slightly on hover */
        }

        #resultContainer {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .result-item {
            display: flex;
            flex-direction: column;
            background: white;
            padding: 15px;
            border: 1px solid #EAEAEA;
            border-radius: 8px;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
        }

        .name-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .name {
            font-size: 18px;
            font-weight: bold; /* Make result names bold */
            color: black;
        }

        .details {
            display: flex;
            flex-direction: column;
            font-size: 14px;
            color: gray;
        }

        .copy-btn {
            background-color: white;
            color: black;
            border: 1px solid #ddd;
            padding: 5px 10px;
            cursor: pointer;
            border-radius: 5px;
            font-size: 14px;
            transition: background 0.3s ease, transform 0.2s ease; /* Add transition for copy button */
        }

        .copy-btn:hover {
            background-color: #f0f0f0;
            transform: translateY(-2px); /* Move up slightly on hover */
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            .top-bar {
                flex-direction: column; /* Stack the buttons */
            }

            .button-group {
                justify-content: center; /* Center the buttons in mobile view */
                margin-bottom: 10px; /* Space between button group and generate button */
            }

            #generateBtn {
                width: 100%; /* Full width for generate button */
            }
        }