body { padding-top: 4rem; }

.sidebar {
    position: sticky;
    top: 4rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--bs-tertiary-bg);
    border-right: 1px solid var(--bs-border-color);
}
.sidebar .nav-link { color: var(--bs-body-color); padding: .25rem .75rem; border-radius: .375rem; }
.sidebar .nav-link:hover { background: var(--bs-secondary-bg); }
.sidebar .nav-link.active { background: var(--bs-primary); color: #fff; }
.sidebar-heading { font-size: .75rem; letter-spacing: .05em; }

.note-card .note-content pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    background: var(--bs-tertiary-bg);
    padding: .75rem;
    border-radius: .375rem;
    margin: 0;
}
.note-content > pre { white-space: pre-wrap; word-wrap: break-word; }
.note-content :last-child { margin-bottom: 0; }
.note-content img { max-width: 100%; height: auto; }

@media (min-width: 768px) {
    main { min-height: calc(100vh - 4rem); }
}