@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@300;400;500;600&display=swap";:root{--white:#fff;--green:#27694e;--yellow:#daa520;--red:#ef4444;--brown:#383129;--black:#2a2622;--title:#2b2622;--text:#7c736a;--border:#e7e2da;--background:#f7f4ef;--card:#fcfaf7;--secondary:#eeebe4;--shadow:#c4b8a8;--favorite:#eaf0ed;--icon-stroke:#f8f6f1;--font-family-title:"Playfair Display";--font-family-text:"Source Sans 3"}.is-dark-theme{--background:#2b2622;--title:#f7f4ef;--text:#7c736a;--card:#2b2622;--shadow:#47403a;--secondary:#7c736a}body{background-color:var(--background);color:var(--text);font-family:var(--font-family-text);margin:0}h1,h2,p{margin:0;padding:0}h1{color:var(--title);font-family:var(--font-family-title);font-size:3rem}h2{font-size:1.2rem;font-weight:500}.main{justify-content:center;padding:16px 0;display:flex}.main__inner{text-align:center;flex-direction:column;gap:10px;width:1532px;display:flex}.books{grid-template-columns:5fr 1fr;gap:16px;display:grid}.books__list{grid-template-columns:repeat(5,1fr);gap:16px;display:grid}.is-message{text-align:center;color:var(--title);font-size:2rem;display:block}@media (width<=1564px){.main__inner{width:1274px}.books__list{grid-template-columns:repeat(4,1fr)}}@media (width<=1306px){.main__inner{width:1016px}.books__list{grid-template-columns:repeat(3,1fr)}}@media (width<=1048px){.main{display:block}.main__inner{width:auto;padding:0 16px}.books{display:block}.books__list{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.books__favorites{position:fixed;top:86px;right:15px}}.header{border-bottom:1px solid var(--shadow);background-color:var(--background);z-index:100;justify-content:center;display:flex;position:sticky;top:0}.header__inner{justify-content:space-between;align-items:center;width:1532px;min-height:70px;display:flex}.header__block{align-items:center;gap:10px;display:flex}.header__logo{background-color:var(--green);border-radius:10px;width:24px;height:24px;padding:8px}.header__title{color:var(--title);font-size:26px;font-weight:900;line-height:26px;font-family:var(--font-family-title)}.header__subtitle{font-size:12px;font-weight:600}.logo__img *{color:red;stroke:green}.button{border:1px solid var(--shadow);cursor:pointer;background-color:#0000;border-radius:8px;width:40px;height:40px;padding:8px}.button--theme:active{background-color:var(--yellow);transition:all .1s}.button--favorites{background-color:var(--background);display:none}.button--favorites .icon *{stroke:var(--red);fill:var(--background)}.button--favorites:active{background-color:var(--red);transition:all .1s}.is-opened{background-color:var(--red)}@media (width<=1564px){.header__inner{width:1274px}}@media (width<=1306px){.header__inner{width:1016px}}@media (width<=1048px){.header{display:block}.header__inner{width:auto;padding:0 16px}.button--favorites{display:block}}.search{padding:16px}.search__input{background-color:var(--card);width:50rem;box-shadow:0px 0px 12px var(--shadow);color:var(--text);border:none;border-radius:16px;padding:16px;font-size:1rem}@media (width<=1048px){.search__input{width:calc(100% - 32px)}}.favorites{background-color:var(--card);width:242px;height:calc(100vh - 102px);box-shadow:0px 0px 12px var(--shadow);border-radius:16px;position:sticky;top:86px}.favorites__header{background-color:var(--card);border-bottom:1px solid var(--shadow);text-align:start;border-radius:16px 16px 0 0;gap:.375rem;height:2.25rem;padding:16px;display:flex;position:sticky;top:0}.favorites__icon{background-color:var(--favorite);border-radius:.375rem;width:1.5rem;height:1.5rem;padding:.375rem}.favorites__icon .icon{width:1.5rem;height:1.5rem}.favorites__icon *{stroke:var(--green)}.favorites__title{font-family:var(--font-family-title);color:var(--title);font-size:1.2rem;font-weight:900;line-height:1.2rem}.favorites__subtitle{font-weight:600}.favorites__list{scrollbar-width:thin;scrollbar-color:var(--text) transparent;height:calc(100% - 48px - 2.25rem);padding:0 16px;overflow:auto}.is-visible{display:block!important}@media (width<=1048px){.favorites{height:calc(100vh - 102px);display:none}}.card{background-color:var(--card);width:242px;height:calc(395px + 3.6rem);box-shadow:0px 0px 12px var(--shadow);text-align:start;border-radius:16px;position:relative}.card__cover{aspect-ratio:2/3;object-fit:cover;object-position:top;border-radius:16px 16px 0 0;width:100%;display:inline}.card__description{width:242px;height:calc(3.4rem + 32px);position:absolute;bottom:0}.expandable{background-color:var(--card);scrollbar-color:var(--text) transparent;scrollbar-width:thin;border-radius:16px;width:210px;max-height:363px;padding:16px;position:absolute;bottom:0;left:0;overflow:auto}.expandable *{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.card:hover .expandable *{white-space:normal;overflow:visible}.card__title{color:var(--title);font-size:1.2rem;font-weight:600;line-height:1.4rem}.card__author{font-size:1rem;font-weight:600;line-height:1rem}.card__year{margin-top:.2rem;font-size:1rem;font-weight:400;line-height:1rem}.card__favorite-btn{background-color:var(--card);cursor:pointer;opacity:.8;border:none;border-radius:50%;width:calc(12px + 1rem);height:calc(12px + 1rem);padding:6px;position:absolute;top:10px;right:10px}.card__favorite-btn .icon{width:1rem;height:1rem}.is-favorite .icon *{fill:var(--red);stroke:var(--red)}@media (hover:hover){.card__favorite-btn:hover{background-color:var(--card);box-shadow:0 0 16px var(--shadow);transition:all .2s;transform:scale(1.2)}.card__favorite-btn:hover .icon *{stroke:var(--red)}}.favcard{text-align:start;border-bottom:1px solid var(--shadow);grid-template-columns:55px 100px 2rem;align-items:center;gap:.375rem;padding:6px 0;display:grid}.favcard__cover{aspect-ratio:2/3;object-fit:contain;object-position:center;width:55px}.favcard__title{white-space:nowrap;text-overflow:ellipsis;width:100%;color:var(--title);font-size:1.2rem;font-weight:900;line-height:1.4rem;overflow:hidden}.favcard__author{white-space:nowrap;text-overflow:ellipsis;width:100%;font-size:1rem;font-weight:600;line-height:1.2rem;overflow:hidden}.favcard__year{font-size:1rem;line-height:1.2rem}.favcard__btn{cursor:pointer;background-color:#0000;border:none;width:2rem;height:100%;padding:.5rem}.favcard__btn .icon{width:1rem;height:1rem}.favcard__btn *{stroke:var(--red);fill:var(--red)}