/*
 * STYLING SPECIFIC TO library.html
 * Author: Jayson G.
 * Last Modified: 1/5/2024
*/

/* BOOK DESCRIPTION STYLING.

    Class Usage:
        + ID: #book-descript
            + CLASS: .cover-box
                <img/>
            + CLASS: .content-box
                + CLASS: .booktit
                + CLASS: .sum
                + ID: #purchaseLink

    A book description contains the cover image of a selected book,
    along with its title and summary. It should also contain a link
    for users looking to buy the book somewhere in the content-box.
*/
#book-descript {
    border: 0.5vw solid black;
    background-color: white;
    margin: auto;
    display: flex;
    height: 60%;
    max-height: 450px;
    width: 60vw;
    max-width: 900px;
}
#book-descript > .cover-box {
    /*border: 0.2vw solid red;*/
    border-right: 0.5vw solid black;
    height: 100%;
    width: 50%;
    max-width: 291px;
    min-width: 280px;
    text-align: center;
}
#book-descript > .cover-box > img {
    width: 100%;
    height: 100%;
}
#book-descript > .content-box {
    /*border: 0.2vw solid red;*/
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
#book-descript > .content-box > .booktit
{
    /*border: 0.2vw solid blue;*/
    padding: 0.5vh 1vw;
    height: 20%;
    font-size: 1rem;
    overflow-y: scroll;
}
#book-descript > .content-box > .sum
{
    /*border: 0.2vw solid green;*/
    box-shadow: -7.5px -0vh 14px 10px gray inset;
    padding: 0.3vh 1vw;
    height: 70%;
    overflow-y: scroll;
}
#purchaseLink
{
    /*border: 0.2vw solid purple;*/
    height: 10%;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#purchaseLink > a
{
    border: 0.2vw solid rgb(80, 119, 126);
    background-color: rgb(144, 193, 202);
    text-decoration: none;
    width: 40%;
    padding: 0.4vh 04vw;
    color: purple;
}
#purchaseLink > a:hover {
    background-color: rgb(80, 119, 126);
    color: white;
}
#purchaseLink > a:active {
    color: rgb(255, 99, 99);
}
@media screen and (max-width: 751px)
{
    #book-descript > .cover-box
    {
        display: none;
    }
    #book-descript > .content-box > .booktit
    {
        /*border: 0.2vw solid green;*/
        font-size: 1rem;
    }
}

/* BOOKSHELF DISPLAY STYLING.

    Class Usage:
        + ID: #bookshelf
            + <form class="organicForm">
            + ID: #booklist
                + CLASS: bookEntry...
                    + <h2>
                    + <p>
                    + CLASS: <button class="popupButton">
            + CLASS: searchButtons
                + <button class="manualSearchButton">

    The Bookshelf visually presents a list of books to a user
    through multiple groupings of text showcasing some of the
    description and the book title.
*/
#bookshelf
{
    /*border: 0.2vw solid red;*/
    margin-top: 1vh;
    display: flex;
    flex-direction: column;
}
#booklist
{
    /*border: 0.2vw solid blue;*/
    /* background-color: #201f1e; */
    margin-top: 1vh;
    padding: 0.8vh 1vw;
}
#booklist > .bookEntry
{
    /*border: 0.2vw solid yellow;*/
    /* border-top: 0.5vw solid #201f1e; */
    /* border-bottom: 0.5vw solid #201f1e; */
    background-color: #c6b5a1;
    display: flex;
    flex-direction: row;
    max-height: 100px;
}
.bookEntry > h2
{
    /*border: 0.2vw solid blue;*/
    width: 40%;
    padding: 0vh 1vw;
}
.bookEntry > p
{
    /*border: 0.2vw solid green;*/
    border-left: 0.1vw solid black;
    width: 50%;
    padding: 0vh 1vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bookEntry > .popupButton
{
    border: none;
    width: 10%;
    transition: width 0.3s, background-color 0.4s, color 0.4s;
}
.bookEntry > .popupButton:hover
{
    width: 11%;
    background-color: rgb(138, 137, 90);
    color: cornsilk;
    font-weight: bold;
}
@media (max-width: 530px) {

    .bookEntry > .popupButton {
        width: initial;
    }

}

.bookEntry > button:hover
{
    background-color: darkgray;
    font-weight: bold;
}
#libraryButtons
{
    /*border: 0.2vw solid green;*/
    /* background-color: #201f1e; */
    display: flex;
    justify-content: center;
    padding: 0.2vw 1vw;
}
#libraryButtons > .manualSearchButtons
{
    /*border: 0.2vw solid blue;*/
    padding: 0.8vw 1vw;
    margin: 0.3vw 0.4vw;
    font-size: 1rem;
    transition: padding 0.3s, font-size 0.4s, background-color 0.2s, color 0.2s;;
}
#libraryButtons > .manualSearchButtons:hover
{
    padding: 0.7vw 0.8vw;
    font-size: 1.2rem;
    background-color:rgb(215, 214, 141);
    color: rgb(65, 65, 41);
}