// Inject theme styles into the page
const style = document.createElement('style');
style.innerHTML = `
  body {
    background: url('https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80') no-repeat center center fixed;
    background-size: cover;
    color: #ffffff;
    font-family: 'Orbitron', sans-serif;
    margin: 0;
    padding: 0;
  }

  header {
    background-color: rgba(0, 0, 50, 0.8);
    padding: 20px;
    text-align: center;
    font-size: 2em;
    color: #FFD700;
    box-shadow: 0 0 20px #ffffff;
  }

  .starfire-logo {
    font-size: 3em;
    font-weight: bold;
    color: #FF69B4;
    text-shadow: 0 0 10px #fff, 0 0 20px #f0f;
  }

  .video-container {
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .video-card {
    background-color: rgba(0, 0, 0, 0.7);
    border: 1px solid #ffffff;
    border-radius: 10px;
    margin: 10px;
    padding: 15px;
    width: 300px;
    box-shadow: 0 0 10px #fff;
  }

  .video-card:hover {
    box-shadow: 0 0 20px #FFD700;
  }

  footer {
    background-color: rgba(0, 0, 50, 0.8);
    text-align: center;
    padding: 10px;
    color: #ccc;
    font-size: 0.9em;
  }
`;
document.head.appendChild(style);

// Add header with site name
const header = document.createElement('header');
header.innerHTML = `<div class="starfire-logo">Starfire Social.org 🚀</div>`;
document.body.prepend(header);

// Optional: Add a footer
const footer = document.createElement('footer');
footer.innerHTML = `© 2025 Starfire Social.org — Explore the Universe of Videos`;
document.body.appendChild(footer);