justify-content

repoCard.className = "col-md-6 col-lg-3 mb-4";
                        repoCard.innerHTML = `
                <div class="featured-repo-card h-100">
                <div class="card-body d-flex flex-column p-4">
                    <div class="mx-auto mb-3" style="width: 50px; height: 50px;">
                        <div class="rounded-circle overflow-hidden d-flex align-items-center justify-content-center" ...
                            <img src="${repo.img || '/api/placeholder/50/50'}" 
                                 alt="${repo.name} image" 
                                 style="width: 100%; height: 100%; object-fit: cover;"
                                 onerror="this.src='/api/placeholder/50/50'" />
                        </div>
                    </div>
                    <h3 class="featured-repo-name text-center mb-3" data-bs-toggle="tooltip" data-bs-placement="top" ...
                        <a class="text-decoration-none" href="${repo.html_url}" target="_blank">${repo.name}</a>
                    </h3>
                    <p class="featured-repo-description text-center flex-grow-1 mb-3">${repo.description || "No descr...
                    <div class="featured-repo-stats d-grid grid-cols-2 gap-2 mb-3">
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Repo's Stars" class=...
                            <i class="ri-star-line me-1"></i>${repo.stars.toLocaleString()}
                        </span>
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Repo's Forks" class=...
                            <i class="ri-git-branch-line me-1"></i>${repo.forks.toLocaleString()}
                        </span>
                        <span data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Repo's Watching" cla...
                            <i class="ri-eye-line me-1"></i>${repo.watchers.toLocaleString()}

// Generate a random project to show
  getProjectToShow().then(project => {
    // Popup header
    const headerHTML = `
      <div style="padding: 12px 16px; background-color: #0366d6; color: white; display: flex; justify-content: space-...
        <div style="font-weight: bold; font-size: 16px;">Support Open Source</div>
        <button id="donation-popup-close" style="background: none; border: none; color: white; cursor: pointer; font-...
      </div>
    `;

    // Content based on whether we have a project or not
    let contentHTML = '';

    if (project) {
      // Format project details with GitHub information
      contentHTML = `
        <div style="padding: 16px; border-bottom: 1px solid #eee;">
          <div style="display: flex; align-items: center; margin-bottom: 12px;">
            <img src="${project.owner.avatar_url}" style="width: 40px; height: 40px; border-radius: 50%; margin-right...
            <div>
              <div style="font-weight: bold; margin-bottom: 4px;">${project.name}</div>
              <div style="font-size: 12px; color: #666; line-height: 1.3;">${project.description || 'An open source p...
            </div>
          </div>