document.addEventListener("DOMContentLoaded", () => {
  // 1. Create the main page grid container
  const container = document.createElement("div");
  container.className = "container";

  // 2. Define your exact header, sidebar links, and footer
  container.innerHTML = `
    <div class="header">
      <h2></h2>
      <img src="/tanicon.png" width="120px" height="90px" alt="Tan Icon">
    </div>

    <div class="menu"> 
      <div class="menu-text">
        <a href="https://tangerinetwist.neocities.org/"><span><h2>Home</h2></span></a>
      </div>
      <br>
      <div class="menu-text">
        <a href="https://tangerinetwist.neocities.org/Gallery"><span><h2>Gallery</h2></span></a>
      </div>
      <br>
      <div class="menu-text">
        <a href="https://tangerinetwist.neocities.org/Worlds"><span><h2>Worlds</h2></span></a>
      </div>
      <br>
      <div class="menu-text">
        <a href="https://tangerinetwist.neocities.org/Characters"><span><h2>OC's</h2></span></a>
      </div>
      <br>
      <div class="menu-text">
        <a href="https://tangerinetwist.neocities.org/Hoarde"><span><h2>Hoarde</h2></span></a>
      </div>
      <br>
      <div class="menu-text">
        <a href="https://tangerinetwist.neocities.org/blog"><span><h2>Blog</h2></span></a>
      </div>
    </div>
   
    <div class="content" id="page-content">
      <!-- Your unique page content will automatically load right here -->
    </div>
    
    <div class="footer"><h4>Footer</h4></div>
  `;

  // 3. Move your raw page content inside the template structure
  const originalBodyHTML = document.body.innerHTML;
  document.body.innerHTML = "";
  document.body.appendChild(container);
  document.getElementById("page-content").innerHTML = originalBodyHTML;

  // 4. Run the text auto-resizer for your oval menu links
  document.querySelectorAll('.menu-text').forEach(el => {
    let fontSize = 14; 
    el.style.fontSize = fontSize + 'px';
    while (el.scrollWidth > (el.clientWidth - 14) && fontSize > 13) {
      fontSize--;
      el.style.fontSize = fontSize + 'px';
    }
  });
});