body {
    background-color: #F7CB64;
    color: #411616;
    margin: 0px;
    padding: 0px;
}
a {
    color: #171f45;
}
#books {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 10px;
    margin: 0px 20px;
}
.book[data-filter=false] {
    display: none;
}
.book:hover {
    background-color: #f8dc75;
}
.book {
    display: grid;
    grid-template-columns: 100px calc(100vw - 220px) 50px;
    column-gap: 10px;
    padding: 10px;
    width: calc(100vw - 60px);
    anchor-scope: all;
}
.book .data {
    display: block;
    width: 100%;
}
.cover img {
    width: 100%;
}
.book .title {
    display: inline-block;
    font-size: 20px;
    margin: 0px 0px 10px 0px;
}
.authors::before {
    content: "By:";
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
}
.authors {
    overflow-y: auto;
    position: relative;
    max-width: 100%;
    max-height: 2.5lh;
    scrollbar-width: thin;
}
.author ~ .author::before {
    content: ', ';
}
.series-name::before {
    content: "Series:";
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
    font-style: normal;
}
.series-name:hover {
    font-style: italic;
}
.series-index::before {
    content: " – ";
}
.languages::before {
    content: "Languages:";
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
}
.publication-info::before {
    content: "Publisher:";
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
}
.publication-info {
    font-style: italic;
}
.publication-info .date::after {
    content: " - "
}
.condition::before {
    content: "Condition:";
    display: inline-block;
    font-weight: bold;
    margin-right: 5px;
}
.price::before {
    content: "$"
}
.price {
    font-size: 30px;
}
.blurb {
    margin: 10px;
    max-height: 5lh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.isbn {
    position: relative;
    font-size: 12px;
    right: 0;
    text-align: var(--align,right);
}
.button {
    padding: 5px;
    border-radius: 5px;
    color: #ff0000;
}
.tag-filter input[type="checkbox"] {
    visibility: hidden;
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
}
.tag-filter {
    margin: 5px;
    background-color: #aaa;
    padding: 5px;
    display: inline-block;
    border-radius: 5px;
}
.tag-filter:has(input:checked) {
    background-color: #afa;
}