/*  fonts  */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Roboto+Condensed:wght@300;400;700&display=swap');
/*  end fonts  */

em {
    font-family: 'EB Garamond', serif;
    letter-spacing: .025rem;
    color: #727272;
}
main {
    padding: 1rem 0 2.5rem;
    background-color: rgba(240, 255, 255, 0.8);
    border-top: 1px solid hotpink;
        flex: 2;
}
.wrapper-page {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
} 
.pic {
    width: 100%;
}
.pic img {
    width: 100%;
}

.info {
    width: 80%;
    padding: 0 40px;
    margin-left: auto;
    margin-right: auto;
    
}
main h1.bookTitle {
    font-family: 'EB Garamond', serif;
    font-weight: 500;
    font-size: 2.625rem;
    line-height: 100%;
    margin-bottom: 0;
/*    padding-top: 2.5rem;*/
    text-align: center;
}
main h2.subTitle {
    font-family: Roboto;
    font-size: 1.25rem;
    font-weight: 300;
    text-align: center;
    margin-top: 0;
}
main .info ul,
main .info p {
    font-family: Garamond;
    line-height: 150%;
    font-size: 1.125rem;
    margin-bottom: 1.25rem;
}
main .info ul {
    line-height: 120%;
    font-size: 1.75rem;
    font-style: italic;
    list-style: none;
    padding-left: 0;
    margin-top: 0;
    color: #e5536d;
}
.wrapper-Btn {
    display: flex;
    
    cursor: pointer;
    margin: 2.5rem 0;
}
.btn {
    padding: 0.625rem 1rem;
    background-color: pink;
    border-radius: 0.625rem;
    font-family: Roboto;
}
.btn span {
    font-weight: 700;
}
.wrapper-Btn .btn:hover,
.wrapper-Btn .btn:active {
    background-color: darkseagreen;
    color: #fff;
}
.wrapper-Btn > .btn ~ .btn {
    margin-left: 0.625rem;
}

/*  main-footer  */
.main-footer {
    font-family: Roboto;
    font-size: -.875rem;
    padding: 1.125rem 0;
    background: #000;
}
.main-footer a {
    text-decoration: none;
    color: azure;
}
.main-footer__links {
    list-style: none;
    display: flex;
    padding: 0;
    justify-content: center;
    align-items: center;
    grid-column-gap: 1.75rem;
}

@media (max-width: 960px) {
    .pic, .info {
        width: 100%;
    }
}

@me