#container{
    padding: 0 10px;
}
h1 {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 2px solid gold;
}
.main-nav {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 15px;
    padding-right: 15px;
    list-style: none;
    border-bottom: 2px solid gold;
}
.main-nav a {
    text-decoration: none;
    color: brown;
    margin-left: 20px;
}
.book {
    display: grid;
    grid-template-columns: 5fr 1fr;
}
.details{
    grid-column: 2 / 3;
    justify-items: right;
    padding-right: 15px;
}
.book h2 {
    grid-column: 1 / 2;
    justify-self: center;
}
.book img {
    grid-column: 1 / 2;
    justify-self: center;
}
.desc {
    grid-column: 1 / 2;
    padding-left: 15px;
}
footer {
    text-align: center;
    border-top: 2px solid gold;
}

@media screen and (min-width: 700px) {
    .book {
        display: grid;
        grid-template-columns: 1fr 3fr;
        gap: 40px;
        padding: 40px 0;
        justify-content: center;
    }

    .details {
        grid-column: 1;
        text-align: right;
        border-right: 2px solid gold;
        padding-right: 20px;
        grid-row: 1 / 5;
    }

    .book h2, .book img, .desc {
        grid-column: 2;
    }

    .book h2 {
        justify-self: start;
    }

    img {
        justify-self: center;
    }

}