<style>
    /* Global Resets & Fluid Box Sizing */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      background-color: #f4f4f4;
      color: #333333;
      font-family: Arial, sans-serif;
      line-height: 1.5;
      -webkit-text-size-adjust: 100%;
    }

    h1, h2, h3 {
      font-family: Verdana, sans-serif;
      color: #6884CC; 
    }

	
    /* Fixed Max Width Wrapper */
    .site-wrapper {
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      background-color: #ffffff;
      padding: 16px 32px 40px 32px;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.03);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    /* Sticky Navigation Header */
    .navbar {
      background-color: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      z-index: 1000;
      padding: 4px 0;
      margin-bottom: 24px;
      border-bottom: 1px solid #f0f0f0;
    }

    /* Menu Links Container */
    .nav-links {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      justify-content: flex-start;
      align-items: center;
  
    }

    .nav-links a {
      display: flex;
      align-items: center;
      text-decoration: none;
      min-width: 44px;
 
    }

    .nav-links img {
      width: auto;
      max-width: 130px;
      height: auto;
      display: block;
    }

    /* Container for Main Content */
    .container {
      max-width: 800px;
      margin: 0 auto;
      flex: 1; 
      width: 100%;
    }
/* Table of Contents Formatting */
    .toc-section {
      margin-bottom: 25px;
    }

    .toc-section h3 {
      margin: 0 0 8px 0;
      display: inline-block;
    }

    .toc-section h3 a {
      text-decoration: none;
      color: #0066cc;
    }

    .toc-section h3 a:hover {
      text-decoration: underline;
    }

    .toc-sublist {
      list-style-type: none;
      padding-left: 20px;
      margin: 0;
    }

    .toc-sublist li {
      margin-bottom: 5px;
    }

    h1 { margin-bottom: 10px; }
    h2 { margin-bottom: 25px; font-size: 1.5rem; color: #555; }
    /* Modern Fluid Image Grid */
    .image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 24px 20px;
    }
    /* Modern Fluid Image Grid */
    .image-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 24px 20px;
    }

    /* Grid Item Containers */
    .grid-item {
      display: flex;
      flex-direction: column;
    }

    .grid-item a {
      display: block;
      width: 100%;
      overflow: hidden;
      border-radius: 6px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    }

    .grid-item img {
      width: 100%;
      height: auto;
      display: block;
      transition: transform 0.2s ease;
      object-fit: cover;
    }

    @media (hover: hover) {
      .grid-item a:hover img {
        transform: scale(1.02);
      }
    }

    .grid-item p {
      margin-top: 10px;
      font-size: 13px;
      color: #444444;
      font-weight: 500;
    }

    /* Center Image styling */
    .center {
      display: block;
      margin: 0 auto 24px auto;
      max-width: 100%;
      height: auto;
      width: fit-content;
    }
   
    /* Social Media Links */
    .social-links {
      margin-top: 40px;
      border-top: 1px solid #DDDDDD;
      padding-top: 20px;
      text-align: center;
    }

    .social-links a {
      color: #555555;
      text-decoration: none;
      margin: 0 12px;
      font-size: 0.95rem;
      transition: color 0.2s ease;
    }

    .social-links a:hover {
      color: #000000;
      text-decoration: underline;
    }

    /* Footer text consolidated */
    .footer-text {
      text-align: center;
      margin-top: 48px;
      padding-top: 16px;
      border-top: 1px solid #eee;
      font-size: 0.9rem;
      color: #777777;
    }

    /* Responsive adjustments grouped into one block */
    @media (max-width: 480px) {
      .site-wrapper {
        padding: 12px 16px 30px 16px;
      }
      .navbar {
    padding: 2px 0; /* Even tighter top/bottom padding on small mobile viewports */
  }
      .nav-links {
        gap: 10px;
      }
      
      .nav-links img {
        max-width: 110px;
      }
      
      .image-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 16px;
      }

      .grid-item p {
        font-size: 12px;
      }
    }
</style>