@import url(https://fonts.googleapis.com/css?family=Montserrat:100,200,300,regular,500,600,700,800,900,100italic,200italic,300italic,italic,500italic,600italic,700italic,800italic,900italic);

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:regular,500,600,700,800,900,italic,500italic,600italic,700italic,800italic,900italic);

body {
    max-width: 100vw;
    height: 100vh;

    font-family: 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 16px;

    background-color: white;
    display: flex;
    flex-direction: column;
}

main {
    display: flex;
    flex-direction: column;

    padding-top: 2rem;
    padding-bottom: 2rem;
    flex: 1;
    overflow-y: scroll;
}

main::-webkit-scrollbar {
    display: none;
}

h1,
h2,
h3 {
    font-family: 'Playfair Display', sans-serif;
    font-style: normal;
    font-weight: 700;
}

h1 {
    font-size: 1.95em;
}

h2 {
    font-size: 1.6em;
}

h3 {
    font-size: 1.25em;
}

h6 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1em;
    color: #333333;
}

p {
    margin: 0;
    padding: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    text-decoration: none;
    color: white;
}

img {
    max-width: 100%;
}

.genre,
.book-card__link,
.book-card__btn {
    width: fit-content;
    height: fit-content;

    padding: 0.55em 1.3em;

    font-style: normal;
    font-size: 0.75em;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF;

    background-color: #333333;
    border: 0px;
    border-radius: 0.5rem;
}

.genre_blue-baby,
.book-card__btn_buy,
.book-card__btn_add {
    background: linear-gradient(90deg, #53889D 0%, #BBD1D9 100%);
}

.genre_pink-blush,
.book-card__btn_read {
    background: linear-gradient(90deg, #F3A492 0%, #D96F6E 100%), #C4C4C4;
}

.genre_yellow-pink {
    background: linear-gradient(90deg, #F2D05C 0%, #F3A492 100%);
}

.genre_baby-yellow {
    background: linear-gradient(90deg, #BBD1D9 0%, #F2D05C 92.86%);
}

.genre_blush-yellow {
    background: linear-gradient(90deg, #D96F6E 0%, #F2D05C 100%);
}

.books-wrapper {
    width: 100%;
    min-height: 5rem;
    overflow-x: scroll;
    /* white-space: nowrap;  */
    margin-bottom: 1rem;
}

.books-line,
.authors-line,
.list-line {
    display: flex;
    margin-left: 1.5rem;
}

.books-wrapper::-webkit-scrollbar,
.authors-wrapper::-webkit-scrollbar,
.list-wrapper::-webkit-scrollbar {
    display: none;
}

.book {
    display: flex;
    flex-direction: column;

    min-width: 135px;
    max-width: 150px;

    margin-right: 0.7rem;
}

.book__cover,
.books-area__cover,
.book-card__cover {
    max-width: 100%;
}

.book__title {
    font-family: 'Playfair Display', sans-serif;
    font-weight: 700;
    font-size: 1em;
    line-height: 140%;
}

.book__author {
    font-weight: 400;
    font-size: 0.75em;
    color: #4F4F4F;
    line-height: 140%;
}

.book__price {
    font-weight: 600;
    font-size: 0.75em;
    color: #D96F6E;
    line-height: 140%;
}

/*для карточек купленных или желаемых книг*/
.purchased-books {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.book-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
    align-items: center;

    min-width: 300px;
    min-height: 120px;

    margin-right: 1.5rem;
    margin-left: 1.5rem;

    box-shadow: 0px 4px 16px rgba(78, 55, 55, 0.15);
}

.book-card__cover {
    grid-column: 1;
    grid-row: 1/4;

    margin: 1rem;
}

.book-card__title {
    grid-column: 2/4;
    grid-row: 1/2;
    justify-self: start;

    font-family: 'Playfair Display', sans-serif;
    font-size: 1em;
    font-weight: 700;

    line-height: 21px;
}

.book-card__author {
    grid-column: 2/4;
    grid-row: 2/3;
    justify-self: start;
    align-self: start;

    font-size: 0.75em;
    font-weight: 400;
    line-height: 140%;

    color: #4F4F4F;
}

.book-card__btn_buy,
.book-card__btn_read {
    grid-column: 3/4;
    grid-row: 3/4;
}

.book-card__btn_add {
    grid-column: 2/3;
    grid-row: 3/4;
    justify-self: end;
}

/*анимация кнопок при нажатии*/
.buttons__cart:hover,
.buttons__wishlist:hover,
.book-card__btn:hover {
    transform: scale(1.05);
    box-shadow: 0px 4px 16px rgba(78, 55, 55, 0.37),
        inset 0px 4px 16px rgba(255, 255, 255, 0.503);
}

/*шапка, подвал*/

.box-footer-button,
.box-header {
    display: flex;
    justify-content: space-around;
    height: fit-content;
    box-shadow: 0px -2px 16px rgba(78, 55, 55, 0.1);
    width: 100%;
}

.box-header {
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 4px 16px rgba(78, 55, 55, 0.15);
}

.box-header-buttons {
    display: flex;
    margin: 0 1.5rem;
    gap: 2rem;
}

.box-header__title {
    margin: 0 1.5rem;
}

.box-header__img{
    margin: 0.7rem;
}

.footer-button {
    color: #BBD1D9;
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0.7rem 0;
}

.footer-button:hover,
.footer-button:focus,
.footer-button_active {
    filter: invert(2) sepia(2) saturate(4) hue-rotate(145deg) brightness(140%) contrast(50%);
}

.footer-button__title {
    font-size: 0.625em;
}

.search__icon {
    display: inline-block;
    position: relative;
}

.search__icon:after {
    content: "";
    background: #53889D;
    width: 0.18rem;
    height: 0.6rem;
    position: absolute;
    top: 1.1rem;
    right: -0.1rem;
    transform: rotate(135deg);
}

.search__input {
    color: #53889D;
    font-size: 0.6em;
    background: transparent;
    width: 0.3em;
    height: 0.3em;
    padding: 0.4rem;
    border: solid 0.18rem #53889D;
    outline: none;
    border-radius: 2rem;
    transition: width 0.5s;
}

.search__input::placeholder {
    color: #333333;
    opacity: 0;
    transition: opacity 150ms ease-out;
}

.search__input:focus::placeholder {
    opacity: 1;
}

.search__input:focus,
.search__input:not(:placeholder-shown) {
    width: 8rem;
}

.header-button__img {
    min-height: 1.5rem;
}

@media screen and (max-width:320px) {
    .pop-genre__link {
        max-width: 66px;
        max-height: 66px;
    }
}

@media screen and (min-width: 480px) and (max-width: 768px) {
    body {
        max-width: 600px;
        margin: 0 auto;
    }

    .footer-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

@media screen and (min-width: 769px) and (max-width: 1279px) {
    body {
        max-width: 600px;
        margin: 0 auto;
    }

    .book-card__title {
        font-size: 1.25em;
    }

    .book-card__author {
        font-size: 1em;
    }

    .footer-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}

@media screen and (min-width: 1280px) {
    body {
        max-width: 600px;
        margin: 0 auto;
    }

    .book-card__title {
        font-size: 1.25em;
    }

    .book-card__author {
        font-size: 1em;
    }

    .pop-genre-wrapper {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: repeat(2, 1fr);
    }

    .footer-button {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
}