.code-keyword {
       color: #ff79c6;
   }

   .code-string {
       color: #50fa7b;
   }

   .code-comment {
       color: #6272a4;
   }

   .code-function {
       color: #8be9fd;
   }

   .code-html {
       color: #ffb86c;
   }

   .code-attribute {
       color: #ff5555;
   }

   /* Smooth transitions */
   .docs-content {
       transition: all 0.3s ease-out;
       width: 100%;
   }

   .sidebar-open .main-content {
       width: calc(100% - 280px);
       margin-left: 280px;
   }

   /* Ensure content remains readable when shrunk */
   @media (max-width: 1024px) {
       .sidebar-open .main-content {
           min-width: 300px;
       }
   }

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

   body {
       font-family: 'Inter', sans-serif;
       background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
   }

   /* Custom styles for enhanced premium feel */
   .gradient-bg {
       background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   }

   .glass-effect {
       background: rgba(255, 255, 255, 0.1);
       backdrop-filter: blur(10px);
       border: 1px solid rgba(255, 255, 255, 0.2);
   }

   .premium-shadow {
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   }

   .code-editor-preview {
       background: #1e293b;
       border-radius: 10px;
       overflow: hidden;
   }

   .editor-header {
       background: #0f172a;
       padding: 10px 15px;
       display: flex;
       align-items: center;
   }

   .editor-window {
       height: 300px;
       overflow: auto;
   }

   .slider-item {
       transition: transform 0.3s ease;
   }

   .slider-item:hover {
       transform: translateY(-5px);
   }

   .feature-icon {
       width: 70px;
       height: 70px;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 50%;
       margin: 0 auto 20px;
   }


   /* Bootstrap container max-widths */
   .container {
       width: 100%;
       margin-right: auto;
       margin-left: auto;
   }

   @media (min-width: 576px) {
       .container {
           max-width: 540px;
       }
   }

   @media (min-width: 768px) {
       .container {
           max-width: 720px;
       }
   }

   @media (min-width: 992px) {
       .container {
           max-width: 960px;
       }
   }

   @media (min-width: 1200px) {
       .container {
           max-width: 1140px;
       }
   }

   @media (min-width: 1400px) {
       .container {
           max-width: 1320px;
       }
   }


   .invisible {
       visibility: none;
       display: none;
   }

body {
    display: grid;
    gap: 8px;
}
#header{
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
}
#content{
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 2;
}
#footer{
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 3;
}