styles.css

/* Global Variables */
:root {
    --navbar-padding: 8px;
    --navbar-height: calc(42px + 2 * var(--navbar-padding));
    --navbar-font-color: var(--bs-white-rgb);
    --navbar-bg-color: var(--bs-dark-rgb);
    --bd-toc-color: rgba(var(--bs-dark-rgb), 1);
}

/* Dark Theme Variables */
[data-bs-theme="dark"] {
    --bd-toc-color: rgba(var(--bs-white-rgb), 1);
}

/* General Link Styles */
a {
    text-decoration: none;
}

/* Layout Styles */
.bd-layout {
    margin-top: calc(var(--navbar-height) + 1.5rem);
}

/* Code Block Styles */
.hljs {
    padding: 1.25rem 1em !important;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bd-pre-bg);
}

/* Blockquote Styles */
blockquote {
    font-size: 1.35rem;
    color: var(--bs-secondary-color);
    margin: 1rem 0 1.5rem;
    padding-left: 1.5rem;
    border-left: 3px solid var(--bs-secondary-border-subtle);
}

/* Pagination Styles */
.pagination {
    margin-top: 3rem;
}

/* Footer Styles */
.footer {
    font-size: 0.875rem;
}

/* Navbar Styles */
.navbar,
.navbar::after {
    padding-top: var(--navbar-padding);
    padding-bottom: var(--navbar-padding);
    background-image: linear-gradient(rgba(var(--navbar-bg-color), 1), rgba(var(--navbar-bg-color), 0.95));
}

/* Navbar Brand Styles */
.navbar .navbar-brand,
.navbar .navbar-brand:hover {
    color: rgba(var(--navbar-font-color), 1);
    transform: none;
}

/* Navbar Items Styles */
.navbar .nav-link,
.navbar .nav-line,
.navbar .navbar-toggler {
    color: rgba(var(--navbar-font-color), 0.85);
}

.navbar .nav-link:hover,
.navbar .nav-link.active,
.navbar .nav-link.show,
.navbar .navbar-toggler:hover {
    color: rgba(var(--navbar-font-color), 1);
}

/* Navbar Dropdown Menu Styles */
.navbar .dropdown-menu {
    --bs-dropdown-link-active-bg: unset;
    --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
}

/* Navbar Toggler Styles */
.navbar .navbar-toggler {
    border: none;
}

/* Scrollable Navbar for Small Screens */
@media (max-width: 992px) {
    .scrollable-navbar {
        max-height: calc(100vh - var(--navbar-height));
        overflow-y: auto;
	scrollbar-width: none; /* Hide scrollbar in Firefox */
    }

    /* Hide scrollbar in Chrome, Edge, Safari */
    .scrollable-navbar::-webkit-scrollbar {
	display: none;
    }
}