.bookshelf {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
}

.book {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    aspect-ratio: 2/3;
    width: 100%;
}

.book-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #000;
}

.book-info {
    position: absolute;
    display: flex;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    padding: 5%;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.9);
}

/* Index-specific */
/* -------------------------------------------- */
.filter-section {
    margin: 2rem 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 0;
}

.filter-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: left;
}

.filter-button {
    padding: 0.75rem 1.5rem;
    border: 1px solid #000;
    background: transparent;
    transition: all 0.3s ease;
    min-width: 120px;
    font-size: 1rem;
    font-family: inherit;
}

.filter-button:hover,
.filter-button.active {
    background: #000;
    color: #fff;
}
/* -------------------------------------------- */

/* Reading Lists-specific */
/* -------------------------------------------- */
.progress-bar-container {
    margin-top: 1rem;
    margin-bottom: 1rem;
    height:20px;
    border:1px solid black;
}

.individual-challenge {
    margin-bottom: 50px;
}

.progress-bar {
    height:19px;
    background-color: black;
}

.book.owned > .book-cover { opacity: 1; }
/* -------------------------------------------- */

/* Plain-table-specific */
/* -------------------------------------------- */
table {
    width: 100%;
}
td, th {
    width: 21%;
    padding-right: 2%;
}

th, td, tr {
padding-bottom: 2vh;
border-left:2px
}
/* -------------------------------------------- */

@media (hover: hover) {
    .book:hover {
        transform: scale(1.05);
        z-index: 1;
    }

    .book:hover .book-info {
        opacity: 1;
    }
}

@media (hover: none) {
    .book:active {
        transform: scale(1.02);
    }
    .book.active .book-info {
        opacity: 1;
        background: rgba(255, 255, 255, 0.9);
    }
}

@media (max-width: 768px) {
    .content {
        padding: calc(var(--pd));
    }
    .bookshelf {
        gap: 1.5rem;
    }
    .filter-section {
        margin: 0 0 1rem;
        padding-bottom: 0;
    }

    .filter-controls {
        gap: 0.5rem;
        justify-content: center;
    }

    .filter-button {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        min-width: 110px;
        width: calc(50% - 0.5rem);
        margin: 0.25rem;
    }

/* Reading Lists Specific */
/* -------------------------------------------- */
    #progress-bar-container {
    width: 80%;
    margin: 0.5rem;
    }
/* -------------------------------------------- */
}

@media (max-width: 480px) {
    .bookshelf {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 1rem;
    }
    .book-info {
        font-size: 0.8rem;
    }
    .filter-button {
        width: 100%;
        margin: 0.25rem 0;
    }
}