/* Basic layout styles */ body { margin: 0; padding: 0; font-family: Arial, sans-serif; background-color: var(--dark-bg); color: var(--text-color); height: 100vh; overflow: hidden; } body.with-sidebar { display: flex; } .main-content-area { flex: 1; min-width: 0; /* Prevents flex item from overflowing */ display: flex; flex-direction: column; } #main-content { flex: 1; padding-left: 1rem; padding-right: 1rem; overflow-y: auto; /* Remove the scrollbar hiding styles */ /* scrollbar-width: none; -ms-overflow-style: none; */ /* Firefox */ scrollbar-width: thin; scrollbar-color: var(--text-muted) transparent; /* Webkit browsers (Chrome, Safari, Edge) */ &::-webkit-scrollbar { width: 8px; } &::-webkit-scrollbar-track { background: transparent; } &::-webkit-scrollbar-thumb { background-color: var(--text-muted); border-radius: 4px; border: 2px solid transparent; } /* Optional: Hover state for the thumb */ &::-webkit-scrollbar-thumb:hover { background-color: var(--text-color); } } #main-content h1 { color: var(--primary-red); font-size: 2.5em; margin-bottom: 0.5em; } #main-content p { line-height: 1.6; color: var(--text-muted); margin-bottom: 1.5em; }