/* Mobile Styles */

body {
    background-color: var(--light-blue);
}

.main-nav {
    background-color: var(--light-blue);
    padding: 0.5rem 0;
}

.nav-container {
    padding: 0 1rem;
}

.nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
}

.nav-links a {
    font-size: 0.75rem;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 4.5rem 1rem 2rem;
}

.section {
    width: 100%;
    max-width: none;
    padding: 1.5rem 0;
    margin-bottom: 0.5rem;
}

.bookshelf-rail {
    padding: 0.5rem 3.5rem 0.35rem 0;
}

.book {
    --book-height: 12.25rem;
    --cover-width: 8.5rem;
}

.notes-rail {
    gap: 1.15rem;
    padding: 1.25rem 2.5rem 1.5rem 0.15rem;
}

.note-leaf {
    --note-width: 12.4rem;
    --note-height: 16.1rem;
}

.note-date {
    font-size: 0.95rem;
}

.note-title {
    font-size: 1.5rem;
    margin-bottom: 1.7rem;
}

.note-body {
    font-size: 1.05rem;
}

.note-detail,
.notes-index {
    padding: 1.5rem 0;
}

.notes-month-list {
    gap: 1.5rem 1.15rem;
    padding: 1.1rem 0.15rem 1rem;
}

.book-detail {
    padding: 1.5rem 0;
}

.book-detail-header h1 {
    font-size: 2rem;
}

@media screen and (max-width: 768px) {
    html, body {
        min-height: 100vh;
        overflow-x: hidden;
    }

    .main-nav {
        display: block;
    }
}