html {
    box-sizing: border-box;
}

body {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #313131;
}

/* Header text */
h1 {
    color: #313131;
    text-align: center;
    letter-spacing: 3px;
}

/* Unordered list container */
ul {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    color: #313131;
}

/* Select and input form fields */
select,
input {
    color: #313131;
    background-color: #f9fafc;
    border: 6px double rgba(49, 49, 49, 0.4);
    border-radius: 8px;
    letter-spacing: 2px;
    font-size: 16px;
}

/* Option form field */
option {
    font-size: 14px;
    letter-spacing: 2px;
}

/* List item "cards" */
.card {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 250px;
    height: 300px;
    margin: 30px;
    list-style-type: none;
    border: 6px double rgba(49, 49, 49, 0.4);
    border-radius: 8px;
    box-shadow: rgba(49, 49, 49, 0.4) 5px 5px,
        rgba(49, 49, 49, 0.3) 10px 10px,
        rgba(49, 49, 49, 0.2) 15px 15px,
        rgba(49, 49, 49, 0.1) 20px 20px,
        rgba(49, 49, 49, 0.05) 25px 25px;
}

/* List item cards #1, #4, #7, etc. */
.card:nth-child(3n + 1) {
    background-color: #f9fafc;
}

/* List item cards #2, #5, #8, etc. */
.card:nth-child(3n + 2) {
    background-color: #f7d0cb;
}

/* List item cards #3, #6, #9, etc. */
.card:nth-child(3n + 3) {
    background-color: #313131;
    color: #f9fafc;
    border: 5px double rgb(227, 228, 230);
}

/* List item cards #1, #4, #7, etc. opacity and List item cards #2, #5, #8, etc. opacity */
.card:nth-child(3n + 1):hover, .card:nth-child(3n + 2):hover {
    opacity: 85%;
}

/* List item cards #3, #6, #9, etc. opacity */
.card:nth-child(3n + 3):hover {
    opacity: 95%;
}

/* Container for book title and details inside book.info() function */
.book-entry {
    display: flex;
    flex-direction: column;
}

/* Book title text inside list items */
.book-title {
    width: 230px;
    height: 60px;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 6px;
    margin-bottom: 30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    line-height: 20px;
}

/* Style for additional book details inside list items */
.book-author,
.num-of-pages,
.read-or-unread {
    font-size: 12px;
    letter-spacing: 3px;
    line-height: 25px;
}

/* Button for adding new books to collection */
.book-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #313131;
    background-color: #f9fafc;
    border: 6px double rgba(49, 49, 49, 0.4);
    width: 245px;
    height: 50px;
    border-radius: 8px;
    padding: 10px;
    letter-spacing: 5px;
}

/* New book button hover effects */
.book-btn:hover {
    opacity: 80%;
}

/* Positioning for 'Add New Book' button */
.btn-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Positioning for plus symbol on 'Add New Book' button */
.btn-plus {
    font-size: 2em;
    color: #008000;
    margin-right: 10px;
}

/* Positioning for text inside 'Add New Book' button */
.add-text {
    font-size: 1.2em;
}

/* Style for modal dialog popup, modal submit button, and modal cancel button */
#modal-dialog,
#submit-btn,
#cancel-btn {
    color: #313131;
    background-color: #f9fafc;
    border: 6px double rgba(49, 49, 49, 0.4);
    border-radius: 8px;
    letter-spacing: 3px;
}

/* Style for submit and cancel buttons only */
#submit-btn,
#cancel-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #313131;
    background-color: #f9fafc;
    border: 6px double rgba(49, 49, 49, 0.4);
    border-radius: 8px;
    letter-spacing: 3px;
    width: 110px;
    height: 40px;
    font-size: 14px;
    padding: 10px;
    margin: 15px;
}

/* Style for submit and cancel buttons upon hover */
#submit-btn:hover,
#cancel-btn:hover {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #f9fafc;
    background-color: #313131;
    border: 6px double rgba(249, 250, 252, 0.4);
    border-radius: 8px;
    letter-spacing: 3px;
    width: 110px;
    height: 40px;
    font-size: 14px;
    padding: 10px;
    margin: 15px;
}

/* Positioning for modal dialog buttons */
.form-btns {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Red 'X' delete button */
.delete-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff2800;
    font-size: 1.5em;
    border-style: none;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: rgba(49, 49, 49, 0);
}

/* Red 'X' delete button hover effects */
.delete-btn:hover {
    font-size: 2em;
    font-weight: 700;
}

/* Delete button div */
.remove-book {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
}

.status-btn {
    border-style: none;
    background-color: rgba(0, 0, 0, 0);
    color: #7f7f7f;
    font-weight: 600;
    font-size: 1.3em;
}

.status-btn:hover {
    text-decoration: underline;
    font-size: 1.5em;
}

/* Style for option elements inside modal dialog */
#default,
#read,
#unread {
    font-size: 16px;
}