.doc-content {
    max-width: 800px;
    margin: auto;
    padding: 20px;
}

.doc-content h1 {
font-size: 2.5rem;
color: #1a202c;
font-weight: 700;
margin-bottom: 1rem;
}

.doc-content h2 {
font-size: 1.75rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.75rem;
margin-top: 1.5rem;
}

.doc-content h3 {
font-size: 1.3rem;
font-weight: 600;
color: #2d3748;
margin-bottom: 0.5rem;
margin-top: 1.2rem;
}

.doc-content p {
margin-bottom: 1rem;
line-height: 1.75;
}

.doc-content a {
color: #3182ce;
text-decoration: underline;
}

.doc-content a:hover {
color: #2b6cb0;
}

.doc-content ul {
list-style-type: disc;
padding-left: 1.5rem;
/* padding: 1rem; */
margin-bottom: 0.5rem;;
}

.doc-content ol {
list-style-type: decimal;
padding-left: 1.5rem;
}

.doc-content pre {
background-color: #f7fafc;
padding: 1rem;
border-radius: 0.375rem;
overflow-x: auto;
font-family: 'Courier New', monospace;
margin-bottom: 0.5rem;
}

.doc-content code {
font-size: 1rem;
background-color: #f7fafc;
padding: 0.1rem 0.25rem;
border-radius: 0.375rem;
}

.doc-content pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
font-size: 1rem;
}

.doc-content pre::-webkit-scrollbar {
height: 8px;
}

.doc-content pre::-webkit-scrollbar-thumb {
background-color: #4A5568;
border-radius: 10px;
}
  
.sidebar { 
    background: #f4f4f4; 
    padding: 10px; 
    position: fixed; 
    left: 0;
    top: 0; 
    bottom: 0; 
    width: 200px; 
}

.sidebar ul { 
    list-style: none; 
    padding: 0; 
}

.sidebar li { 
    margin-bottom: 10px; 
}

.sidebar  a { 
    text-decoration: none; 
    color: #333; 
    font-weight: bold; 
}

.sidebar  a:hover { 
    color: #007bff; 
}