header h1 {
    text-align: center;
    color: rgb(62, 42, 60);
}
header nav {
    border-top: 3px solid rgb(233, 203, 167);
    border-bottom: 3px solid rgb(233, 203, 167);
}
header nav ul {
    text-align: right;
    padding: 0 50px;
}
header nav li {
    text-decoration: none;
    display: inline-block;
    padding: 0 20px;
    color: rgb(169, 63, 83);
    font-weight: bold;
}
footer {
    border-top: 3px solid rgb(233, 203, 167);
    text-align: center;
    padding: 10px;
    font-weight: bold;
}
.book-meta .date {
    font-style: italic;
}
.book-meta .rating {
    min-width: 108px;
}
.book-main h2 {
   color: rgb(169, 63, 83);
}
.book-main .desc {
    font-weight: bold;
}
.book-main .pic {
    text-align: center;
}

@media screen and (max-width: 1024px) {
    header nav {
        margin-bottom: 50px;
    }
    main {
        padding: 0 50px;
    }
    .book {
        border-top: 3px solid rgb(233, 203, 167);
        display: grid;
        grid-template-columns: 3fr 1fr;
    }
    .book-meta {
        grid-column: 2/3;
        grid-row: 1/2;
        text-align: right;
        padding: 10px 40px;
        font-weight: bold;
    }
    .book-main {
        grid-column: 1/2;
        grid-row: 2/3;
        padding: 10px 40px;
    }
}
@media screen and (min-width: 1024px) {
    main {
        margin: 50px 300px;
    }
    .book {
        display: grid;
        grid-template-columns: 1fr 3fr;
        margin: 30px 0;
    }
    .book-meta {
        grid-column: 1/2;
        text-align: right;
        border-right: 3px solid rgb(233, 203, 167);
        padding: 10px 40px;
        font-weight: bold;
    }
    .book-main {
        grid-column: 2/3;
        padding: 10px 40px;
    }
}