#bookshelves-view-toggle { display: flex; justify-content: center; gap: 0; padding: 0; margin: 1rem 0; align-content: stretch; }

#bookshelves-view-toggle div { border: 0.1em solid #C85A2E; outline: none; padding: 0; margin: 0; background-color: #C85A2E; border-radius: 1em; color: #C85A2E; font-size: 0.8rem; cursor: pointer; }

#bookshelves-view-toggle div button { padding: 0 1em; margin: 0; border-width: 0; background-color: #F7F4EF; color: #C85A2E; height: 100%; font-size: 0.8rem; }

#bookshelves-view-toggle div button#list-view { border-radius: 1em 0 0 1em; padding-right: 1em; }

#bookshelves-view-toggle div button#grid-view { border-radius: 0 1em 1em 0; padding-left: 1em; }

#bookshelves-view-toggle div button:hover { background-color: #1A1814; color: #F7F4EF; }

#bookshelves-view-toggle div button.active { background-color: #C85A2E; color: #F7F4EF; }

#bookshelves-view-toggle div button svg { overflow: visible; -webkit-box-sizing: content-box; box-sizing: content-box; display: inline-block; height: 0.95em; vertical-align: -.2em; }

#bookshelves-view-toggle div button span { padding-left: .2em; }

#bookshelves { display: flex; flex-direction: column; gap: calc(1.325rem + 0.9vw); }

@media (min-width: 1200px) { #bookshelves { gap: 2rem; } }

#bookshelves .bookshelf { display: flex; flex-direction: column; }

#bookshelves .bookshelf * + * { padding: 0; margin: 0; }

#bookshelves .bookshelf h2 { font-size: 1.25rem; }

#bookshelves .bookshelf p { font-size: 1rem; margin-bottom: 1em; }

#bookshelves .bookshelf .book { display: flex; align-items: center; gap: 1.25rem; }

#bookshelves .bookshelf .book a img { width: 120px; height: auto; }

#bookshelves .bookshelf .book div { display: flex; flex-direction: column; }

#bookshelves.list .bookshelf > div { display: flex; flex-direction: column; gap: 1.25rem; }

#bookshelves.grid .bookshelf > div { display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.25rem; }

#bookshelves.grid .bookshelf > div .book div { display: none; }