:root {
  --body-bg-color: #e5f4f9;
  --body-color-light: #000000;
  --body-font: "Roboto", sans-serif;
  --page-bg-color: #f2f5f7;
  --body-color: #3d4954;
  --border-color: #b8bec3;
  --placeholder: #ccd0d2;
}

* {
  outline: none;
  box-sizing: border-box;
}

img {
  max-width: 100%;
}

html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: #fff;
  background-image: url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ width=\'946\'\ height=\'473\'\ viewBox=\'0\ 0\ 1600\ 800\'%3E%3Cpath\ fill=\'%23ffffff\'\ d=\'M1102.5\ 734.8c2.5-1.2\ 24.8-8.6\ 25.6-7.5.5.7-3.9\ 23.8-4.6\ 24.5C1123.3\ 752.1\ 1107.5\ 739.5\ 1102.5\ 734.8zM1226.3\ 229.1c0-.1-4.9-9.4-7-14.2-.1-.3-.3-1.1-.4-1.6-.1-.4-.3-.7-.6-.9-.3-.2-.6-.1-.8.1l-13.1\ 12.3c0\ 0\ 0\ 0\ 0\ 0-.2.2-.3.5-.4.8\ 0\ .3\ 0\ .7.2\ 1\ .1.1\ 1.4\ 2.5\ 2.1\ 3.6\ 2.4\ 3.7\ 6.5\ 12.1\ 6.5\ 12.2.2.3.4.5.7.6.3\ 0\ .5-.1.7-.3\ 0\ 0\ 1.8-2.5\ 2.7-3.6\ 1.5-1.6\ 3-3.2\ 4.6-4.7\ 1.2-1.2\ 1.6-1.4\ 2.1-1.6.5-.3\ 1.1-.5\ 2.5-1.9C1226.5\ 230.4\ 1226.6\ 229.6\ 1226.3\ 229.1zM33\ 770.3C33\ 770.3\ 33\ 770.3\ 33\ 770.3c0-.7-.5-1.2-1.2-1.2-.1\ 0-.3\ 0-.4.1-1.6.2-14.3.1-22.2\ 0-.3\ 0-.6.1-.9.4-.2.2-.4.5-.4.9\ 0\ .2\ 0\ 4.9.1\ 5.9l.4\ 13.6c0\ .3.2.6.4.9.2.2.5.3.8.3\ 0\ 0\ .1\ 0\ .1\ 0\ 7.3-.7\ 14.7-.9\ 22-.6.3\ 0\ .7-.1.9-.3.2-.2.4-.6.4-.9C32.9\ 783.3\ 32.9\ 776.2\ 33\ 770.3z\'/%3E%3Cpath\ fill=\'%232ee7ff\'\ d=\'M171.1\ 383.4c1.3-2.5\ 14.3-22\ 15.6-21.6.8.3\ 11.5\ 21.2\ 11.5\ 22.1C198.1\ 384.2\ 177.9\ 384\ 171.1\ 383.4zM596.4\ 711.8c-.1-.1-6.7-8.2-9.7-12.5-.2-.3-.5-1-.7-1.5-.2-.4-.4-.7-.7-.8-.3-.1-.6\ 0-.8.3L574\ 712c0\ 0\ 0\ 0\ 0\ 0-.2.2-.2.5-.2.9\ 0\ .3.2.7.4.9.1.1\ 1.8\ 2.2\ 2.8\ 3.1\ 3.1\ 3.1\ 8.8\ 10.5\ 8.9\ 10.6.2.3.5.4.8.4.3\ 0\ .5-.2.6-.5\ 0\ 0\ 1.2-2.8\ 2-4.1\ 1.1-1.9\ 2.3-3.7\ 3.5-5.5.9-1.4\ 1.3-1.7\ 1.7-2\ .5-.4\ 1-.7\ 2.1-2.4C596.9\ 713.1\ 596.8\ 712.3\ 596.4\ 711.8zM727.5\ 179.9C727.5\ 179.9\ 727.5\ 179.9\ 727.5\ 179.9c.6.2\ 1.3-.2\ 1.4-.8\ 0-.1\ 0-.2\ 0-.4.2-1.4\ 2.8-12.6\ 4.5-19.5.1-.3\ 0-.6-.2-.8-.2-.3-.5-.4-.8-.5-.2\ 0-4.7-1.1-5.7-1.3l-13.4-2.7c-.3-.1-.7\ 0-.9.2-.2.2-.4.4-.5.6\ 0\ 0\ 0\ .1\ 0\ .1-.8\ 6.5-2.2\ 13.1-3.9\ 19.4-.1.3\ 0\ .6.2.9.2.3.5.4.8.5C714.8\ 176.9\ 721.7\ 178.5\ 727.5\ 179.9zM728.5\ 178.1c-.1-.1-.2-.2-.4-.2C728.3\ 177.9\ 728.4\ 178\ 728.5\ 178.1z\'/%3E%3Cg\ fill=\'%23FFF\'%3E%3Cpath\ d=\'M699.6\ 472.7c-1.5\ 0-2.8-.8-3.5-2.3-.8-1.9\ 0-4.2\ 1.9-5\ 3.7-1.6\ 6.8-4.7\ 8.4-8.5\ 1.6-3.8\ 1.7-8.1.2-11.9-.3-.9-.8-1.8-1.2-2.8-.8-1.7-1.8-3.7-2.3-5.9-.9-4.1-.2-8.6\ 2-12.8\ 1.7-3.1\ 4.1-6.1\ 7.6-9.1\ 1.6-1.4\ 4-1.2\ 5.3.4\ 1.4\ 1.6\ 1.2\ 4-.4\ 5.3-2.8\ 2.5-4.7\ 4.7-5.9\ 7-1.4\ 2.6-1.9\ 5.3-1.3\ 7.6.3\ 1.4\ 1\ 2.8\ 1.7\ 4.3.5\ 1.1\ 1\ 2.2\ 1.5\ 3.3\ 2.1\ 5.6\ 2\ 12-.3\ 17.6-2.3\ 5.5-6.8\ 10.1-12.3\ 12.5C700.6\ 472.6\ 700.1\ 472.7\ 699.6\ 472.7zM740.4\ 421.4c1.5-.2\ 3\ .5\ 3.8\ 1.9\ 1.1\ 1.8.4\ 4.2-1.4\ 5.3-3.7\ 2.1-6.4\ 5.6-7.6\ 9.5-1.2\ 4-.8\ 8.4\ 1.1\ 12.1.4.9\ 1\ 1.7\ 1.6\ 2.7\ 1\ 1.7\ 2.2\ 3.5\ 3\ 5.7\ 1.4\ 4\ 1.2\ 8.7-.6\ 13.2-1.4\ 3.4-3.5\ 6.6-6.8\ 10.1-1.5\ 1.6-3.9\ 1.7-5.5.2-1.6-1.4-1.7-3.9-.2-5.4\ 2.6-2.8\ 4.3-5.3\ 5.3-7.7\ 1.1-2.8\ 1.3-5.6.5-7.9-.5-1.3-1.3-2.7-2.2-4.1-.6-1-1.3-2.1-1.9-3.2-2.8-5.4-3.4-11.9-1.7-17.8\ 1.8-5.9\ 5.8-11\ 11.2-14C739.4\ 421.6\ 739.9\ 421.4\ 740.4\ 421.4zM261.3\ 590.9c5.7\ 6.8\ 9\ 15.7\ 9.4\ 22.4.5\ 7.3-2.4\ 16.4-10.2\ 20.4-3\ 1.5-6.7\ 2.2-11.2\ 2.2-7.9-.1-12.9-2.9-15.4-8.4-2.1-4.7-2.3-11.4\ 1.8-15.9\ 3.2-3.5\ 7.8-4.1\ 11.2-1.6\ 1.2.9\ 1.5\ 2.7.6\ 3.9-.9\ 1.2-2.7\ 1.5-3.9.6-1.8-1.3-3.6.6-3.8.8-2.4\ 2.6-2.1\ 7-.8\ 9.9\ 1.5\ 3.4\ 4.7\ 5\ 10.4\ 5.1\ 3.6\ 0\ 6.4-.5\ 8.6-1.6\ 4.7-2.4\ 7.7-8.6\ 7.2-15-.5-7.3-5.3-18.2-13-23.9-4.2-3.1-8.5-4.1-12.9-3.1-3.1.7-6.2\ 2.4-9.7\ 5-6.6\ 5.1-11.7\ 11.8-14.2\ 19-2.7\ 7.7-2.1\ 15.8\ 1.9\ 23.9.7\ 1.4.1\ 3.1-1.3\ 3.7-1.4.7-3.1.1-3.7-1.3-4.6-9.4-5.4-19.2-2.2-28.2\ 2.9-8.2\ 8.6-15.9\ 16.1-21.6\ 4.1-3.1\ 8-5.1\ 11.8-6\ 6-1.4\ 12\ 0\ 17.5\ 4C257.6\ 586.9\ 259.6\ 588.8\ 261.3\ 590.9z\'/%3E%3Ccircle\ cx=\'1013.7\'\ cy=\'153.9\'\ r=\'7.1\'/%3E%3Ccircle\ cx=\'1024.3\'\ cy=\'132.1\'\ r=\'7.1\'/%3E%3Ccircle\ cx=\'1037.3\'\ cy=\'148.9\'\ r=\'7.1\'/%3E%3Cpath\ d=\'M1508.7\ 297.2c-4.8-5.4-9.7-10.8-14.8-16.2\ 5.6-5.6\ 11.1-11.5\ 15.6-18.2\ 1.2-1.7.7-4.1-1-5.2-1.7-1.2-4.1-.7-5.2\ 1-4.2\ 6.2-9.1\ 11.6-14.5\ 16.9-4.8-5-9.7-10-14.7-14.9-1.5-1.5-3.9-1.5-5.3\ 0-1.5\ 1.5-1.5\ 3.9\ 0\ 5.3\ 4.9\ 4.8\ 9.7\ 9.8\ 14.5\ 14.8-1.1\ 1.1-2.3\ 2.2-3.5\ 3.2-4.1\ 3.8-8.4\ 7.8-12.4\ 12-1.4\ 1.5-1.4\ 3.8\ 0\ 5.3\ 0\ 0\ 0\ 0\ 0\ 0\ 1.5\ 1.4\ 3.9\ 1.4\ 5.3-.1\ 3.9-4\ 8.1-7.9\ 12.1-11.7\ 1.2-1.1\ 2.3-2.2\ 3.5-3.3\ 4.9\ 5.3\ 9.8\ 10.6\ 14.6\ 15.9.1.1.1.1.2.2\ 1.4\ 1.4\ 3.7\ 1.5\ 5.2.2C1510\ 301.2\ 1510.1\ 298.8\ 1508.7\ 297.2zM327.6\ 248.6l-.4-2.6c-1.5-11.1-2.2-23.2-2.3-37\ 0-5.5\ 0-11.5.2-18.5\ 0-.7\ 0-1.5\ 0-2.3\ 0-5\ 0-11.2\ 3.9-13.5\ 2.2-1.3\ 5.1-1\ 8.5.9\ 5.7\ 3.1\ 13.2\ 8.7\ 17.5\ 14.9\ 5.5\ 7.8\ 7.3\ 16.9\ 5\ 25.7-3.2\ 12.3-15\ 31-30\ 32.1L327.6\ 248.6zM332.1\ 179.2c-.2\ 0-.3\ 0-.4.1-.1.1-.7.5-1.1\ 2.7-.3\ 1.9-.3\ 4.2-.3\ 6.3\ 0\ .8\ 0\ 1.7\ 0\ 2.4-.2\ 6.9-.2\ 12.8-.2\ 18.3.1\ 12.5.7\ 23.5\ 2\ 33.7\ 11-2.7\ 20.4-18.1\ 23-27.8\ 1.9-7.2.4-14.8-4.2-21.3l0\ 0C347\ 188.1\ 340\ 183\ 335\ 180.3\ 333.6\ 179.5\ 332.6\ 179.2\ 332.1\ 179.2zM516.3\ 60.8c-.1\ 0-.2\ 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7\ 0-1.3-.5-1.4-1.2\ 0-.7.5-1.3\ 1.2-1.4\ 3.1-.2\ 4.9\ 0\ 7.6.8.7.2\ 1.1.9.9\ 1.6C517.3\ 60.4\ 516.8\ 60.8\ 516.3\ 60.8zM506.1\ 70.5c-.5\ 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6\ 0-.7.5-1.3\ 1.2-1.3.7\ 0\ 1.3.5\ 1.3\ 1.2.1\ 2\ .5\ 3.9\ 1.1\ 5.8.2.7-.1\ 1.4-.8\ 1.6C506.4\ 70.5\ 506.2\ 70.5\ 506.1\ 70.5zM494.1\ 64.4c-.4\ 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8\ 1.8-1.4\ 3.7-2.6\ 5.8-3.6.6-.3\ 1.4\ 0\ 1.7.6.3.6\ 0\ 1.4-.6\ 1.7-1.9.9-3.7\ 2-5.3\ 3.3C494.7\ 64.3\ 494.4\ 64.4\ 494.1\ 64.4zM500.5\ 55.3c-.5\ 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4\ 1.4-.3\ 1.8.2.4.5.8\ 1\ 1.1\ 1.4\ 1.3\ 1.6\ 2.1\ 2.6\ 2.7\ 3.9.3.6\ 0\ 1.4-.6\ 1.7C500.9\ 55.3\ 500.7\ 55.3\ 500.5\ 55.3zM506.7\ 55c-.3\ 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8\ 1.2-1.7\ 2.3-3.4\ 3.3-5.2.3-.6\ 1.1-.9\ 1.7-.5.6.3.9\ 1.1.5\ 1.7-1\ 1.9-2.2\ 3.8-3.5\ 5.6C507.4\ 54.8\ 507.1\ 55\ 506.7\ 55zM1029.3\ 382.8c-.1\ 0-.2\ 0-.4-.1-2.4-.7-4-.9-6.7-.7-.7\ 0-1.3-.5-1.4-1.2\ 0-.7.5-1.3\ 1.2-1.4\ 3.1-.2\ 4.9\ 0\ 7.6.8.7.2\ 1.1.9.9\ 1.6C1030.3\ 382.4\ 1029.8\ 382.8\ 1029.3\ 382.8zM1019.1\ 392.5c-.5\ 0-1-.3-1.2-.8-.8-2.1-1.2-4.3-1.3-6.6\ 0-.7.5-1.3\ 1.2-1.3.7\ 0\ 1.3.5\ 1.3\ 1.2.1\ 2\ .5\ 3.9\ 1.1\ 5.8.2.7-.1\ 1.4-.8\ 1.6C1019.4\ 392.5\ 1019.2\ 392.5\ 1019.1\ 392.5zM1007.1\ 386.4c-.4\ 0-.8-.2-1-.5-.4-.6-.3-1.4.2-1.8\ 1.8-1.4\ 3.7-2.6\ 5.8-3.6.6-.3\ 1.4\ 0\ 1.7.6.3.6\ 0\ 1.4-.6\ 1.7-1.9.9-3.7\ 2-5.3\ 3.3C1007.7\ 386.3\ 1007.4\ 386.4\ 1007.1\ 386.4zM1013.5\ 377.3c-.5\ 0-.9-.3-1.2-.7-.5-1-1.2-1.9-2.4-3.4-.3-.4-.7-.9-1.1-1.4-.4-.6-.3-1.4.2-1.8.6-.4\ 1.4-.3\ 1.8.2.4.5.8\ 1\ 1.1\ 1.4\ 1.3\ 1.6\ 2.1\ 2.6\ 2.7\ 3.9.3.6\ 0\ 1.4-.6\ 1.7C1013.9\ 377.3\ 1013.7\ 377.3\ 1013.5\ 377.3zM1019.7\ 377c-.3\ 0-.5-.1-.8-.2-.6-.4-.7-1.2-.3-1.8\ 1.2-1.7\ 2.3-3.4\ 3.3-5.2.3-.6\ 1.1-.9\ 1.7-.5.6.3.9\ 1.1.5\ 1.7-1\ 1.9-2.2\ 3.8-3.5\ 5.6C1020.4\ 376.8\ 1020.1\ 377\ 1019.7\ 377zM1329.7\ 573.4c-1.4\ 0-2.9-.2-4.5-.7-8.4-2.7-16.6-12.7-18.7-20-.4-1.4-.7-2.9-.9-4.4-8.1\ 3.3-15.5\ 10.6-15.4\ 21\ 0\ 1.5-1.2\ 2.7-2.7\ 2.8\ 0\ 0\ 0\ 0\ 0\ 0-1.5\ 0-2.7-1.2-2.7-2.7-.1-6.7\ 2.4-12.9\ 7-18\ 3.6-4\ 8.4-7.1\ 13.7-8.8.5-6.5\ 3.1-12.9\ 7.4-17.4\ 7-7.4\ 18.2-8.9\ 27.3-10.1l.7-.1c1.5-.2\ 2.9.9\ 3.1\ 2.3.2\ 1.5-.9\ 2.9-2.3\ 3.1l-.7.1c-8.6\ 1.2-18.4\ 2.5-24\ 8.4-3\ 3.2-5\ 7.7-5.7\ 12.4\ 7.9-1\ 17.7\ 1.3\ 24.3\ 5.7\ 4.3\ 2.9\ 7.1\ 7.8\ 7.2\ 12.7.2\ 4.3-1.7\ 8.3-5.2\ 11.1C1335.2\ 572.4\ 1332.6\ 573.4\ 1329.7\ 573.4zM1311\ 546.7c.1\ 1.5.4\ 3\ .8\ 4.4\ 1.7\ 5.8\ 8.7\ 14.2\ 15.1\ 16.3\ 2.8.9\ 5.1.5\ 7.2-1.1\ 2.7-2.1\ 3.2-4.8\ 3.1-6.6-.1-3.2-2-6.4-4.8-8.3C1326.7\ 547.5\ 1317.7\ 545.6\ 1311\ 546.7z\'/%3E%3C/g%3E%3C/svg%3E);
  background-attachment: fixed;
  font-family: var(--body-font);
  color: var(--body-color);
  font-weight: 400;
  margin: 0
}

.header, .browse, .browse-category, .profile, .profile-menu, .main-menu, .author, .year-book, .likes {
  display: flex;
  align-items: center;
}

.book-store {
  display: flex;
  flex-direction: column;
  max-width: 1400px;
  height: 100vh;
  background-color: var(--page-bg-color);
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0px 2px 50px 10px rgba(0, 0, 0, 0.21);
}

.header {
  height: 70px;
  width: 100%;
  background-color: #ffffff;
  padding: 0 30px;
  font-size: 14px;
  font-weight: 500;
  color: var(--body-color-light);
  justify-content: space-between;
  flex-shrink: 0;
}

.search-bar {
  position: relative;
}
.search-bar input {
  height: 100%;
  width: 100%;
  display: block;
  background-color: transparent;
  border: medium none;
  font-weight: 600;
  background-image: url(data:image/svg+xml;charset=UTF-8,%3csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ width=\'24\'\ height=\'24\'\ fill=\'none\'\ stroke=\'%238b939c\'\ stroke-width=\'3\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'\ class=\'feather\ feather-search\'%3e%3ccircle\ cx=\'11\'\ cy=\'11\'\ r=\'8\'/%3e%3cpath\ d=\'M21\ 21l-4.35-4.35\'/%3e%3c/svg%3e);
  background-repeat: no-repeat;
  background-size: 15px;
  background-position: 15px 50%;
  color: var(--body-color);
  font-family: var(--body-font); padding-left:40px; padding-right:10px; padding-top:0; padding-bottom:0
}
.search-bar input::placeholder {
  color: var(--placeholder);
}

.browse-category {
  border-right: 1px solid var(--border-color);
  white-space: nowrap;
}
.browse-category svg {
  width: 16px;
  margin: 2px 10px 0 8px;
}

.header-title {
  font-size: 16px;
  font-weight: 400;
  margin-right: 120px;
}
.header-title span {
  font-weight: 500;
  color: var(--body-color);
}

.user-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-profile {
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.user-profile:before {
  content: "";
  position: absolute;
  background-color: #f86d72;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 2px solid var(--theme-bg-color);
  right: 12px;
  top: -3px;
  border: 2px solid #fff;
}

.profile {
  flex-shrink: 0;
}
.profile-menu {
  border-left: 1px solid var(--border-color);
}
.profile svg {
  width: 16px;
  margin: 0 8px 0 15px;
  flex-shrink: 0;
}

.book-slide {
  width: 100%;
}

.book {
  background: #fff;
}

.book-cell {
  position: relative;
  display: flex;
  padding: 25px;
  width: 40%;
  height: 250px;
  margin-right: 1px;
}


.book-cell:nth-child(1) {
  background-color: #E089B9;
}
.book-cell:nth-child(2) {
  background-color: #FCAD5F;
}
.book-cell:nth-child(3) {
  background-color: #B18FD3;
}
.book-cell:nth-child(4) {
  background-color: #000000;
}
.book-cell:nth-child(5) {
  background-color: #cccc00;
}
.book-cell:nth-child(6) {
  background-color: #cc5500;
}
.book-cell:nth-child(7) {
  background-color: #F98487;
}
.book-cell:nth-child(8) {
  background-color: #54C6DA;
}



.flickity-page-dots {
  display: none;
}

.flickity-prev-next-button .arrow {
  fill: #d6d6d6;
}

.flickity-prev-next-button svg {
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
}

.flickity-prev-next-button.previous {
  left: 15px;
}
.flickity-prev-next-button.next {
  right: 15px;
}

.flickity-viewport {
  overflow: visible;
}

.book-photo {
  width: 180px;
  flex-shrink: 0;
  bottom: -35px;
  left: 35px;
  border-radius: 2px;
  box-shadow: -2px 6px 19px 0px #7f818e;
  transition: .3s ease;
}
.book-photo:hover {
  transform: scale(1.03);
}

.book-img {
  flex-shrink: 0;
}

.book-title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.book-title {
  color: #ffffff;
  font-weight: 600;
}

.book-author {
  margin-top: 3px;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.book-content {
  padding: 0 20px;
  color: #ffffff;
  overflow: hidden;
}

fieldset,
label {
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}

h1 {
  font-size: 0.5em;
  margin: 10px;
}

.rating {
  border: none;
}

.rating > input {
  display: none;
}

.rating > label:before {
  margin-right: 5px;
  margin-top: 10px;
  font-size: 0.9em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > label {
  color: #fff;
  float: right;
}

.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
  color: #d85d61;
}

.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
  color: #d85d61;
}

.blue > input:checked ~ label,
.blue:not(:checked) > label:hover,
.blue:not(:checked) > label:hover ~ label {
  color: #458997;
}

.blue > input:checked + label:hover,
.blue > input:checked ~ label:hover,
.blue > label:hover ~ input:checked ~ label,
.blue > input:checked ~ label:hover ~ label {
  color: #458997;
}

.purple > input:checked ~ label,
.purple:not(:checked) > label:hover,
.purple:not(:checked) > label:hover ~ label {
  color: #a76287;
}

.purple > input:checked + label:hover,
.purple > input:checked ~ label:hover,
.purple > label:hover ~ input:checked ~ label,
.purple > input:checked ~ label:hover ~ label {
  color: #a76287;
}

.yellow > input:checked ~ label,
.yellow:not(:checked) > label:hover,
.yellow:not(:checked) > label:hover ~ label {
  color: #ffad58;
}

.yellow > input:checked + label:hover,
.yellow > input:checked ~ label:hover,
.yellow > label:hover ~ input:checked ~ label,
.yellow > input:checked ~ label:hover ~ label {
  color: #ffad58;
}

.dark-purp > input:checked ~ label,
.dark-purp:not(:checked) > label:hover,
.dark-purp:not(:checked) > label:hover ~ label {
  color: #905587;
}

.dark-purp > input:checked + label:hover,
.dark-purp > input:checked ~ label:hover,
.dark-purp > label:hover ~ input:checked ~ label,
.dark-purp > input:checked ~ label:hover ~ label {
  color: #905587;
}

.book-voters {
  color: #fff;
  vertical-align: sub;
  font-size: 13px;
  margin-left: 7px;
  white-space: nowrap;
  margin-top: 7px;
}

.book-sum {
  margin-top: 20px;
  font-size: 14px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.book-see {
  margin-top: 25px;
  text-align: center;
  background-color: #fff;
  color: #fbadaf;
  font-weight: 600;
  padding: 8px;
  font-size: 14px;
  width: 160px;
  border-radius: 20px;
}


.book-see:hover {
  color: #ff6e72;
}
.book-see.book-blue {
  color: #a4e0eb;
}
.book-see.book-blue:hover {
  color: #22cdec;
}
.book-see.book-pink {
  color: #edb9d6;
}
.book-see.book-pink:hover {
  color: #ff6dbe;
}
.book-see.book-yellow {
  color: #fdca95;
}
.book-see.book-yellow:hover {
  color: #fb9124;
}

.book-see.book-purple {
  color: #cbb5e2;
}
.book-see.book-purple:hover {
  color: #a764ec;
}


.book-see.book-purple {
  color: #cbb5e2;
}
.book-see.book-purple:hover {
  color: #a764ec;
}


.main-wrapper {
  width: 100%;
  display: flex;
  flex-grow: 1;
  margin-top: 100px;
  overflow: hidden;
}

.books-of {
  width: 320px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
}

.popular-books {
  flex-grow: 1;
  padding: 0 30px 50px;
  overflow-y: auto;
}

.genre {
  font-weight: 500;
  font-size: 15px;
}

.main-menu {
  white-space: nowrap;
  padding-bottom: 15px;
  border-bottom: 1px solid #dcddde;
  position: sticky;
  top: 0;
  right: 0;
  background-color: var(--page-bg-color);
  z-index: 2;
}

.book-types {
  margin-left: auto;
}
.book-types a {
  text-decoration: none;
  color: var(--body-color);
  font-size: 14px;
}

.book-type + .book-type {
  margin-left: 20px;
}

.book-type {
  position: relative;
  transition: 0.2s;
}
.book-type.active, .book-type:hover {
  -webkit-text-stroke: .3px;
}
.book-type.active:before, .book-type:hover:before {
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  bottom: -17px;
  right: 15px;
  background-color: #67d4ea;
  box-shadow: 0px -1px 5px 0px #67d4ea;
}
.book-type:nth-child(2):before {
  right: 12px;
}
.book-type:nth-child(3):before {
  right: 8px;
}
.book-type:nth-child(4):before {
  right: 6px;
}
.book-type:nth-child(5):before {
  right: 20px;
}

.week {
  padding: 0 30px;
}

.author + .author {
  margin-top: 20px;
}
.author-name {
  font-size: 14px;
}
.author:last-child {
  margin-bottom: 40px;
}

.author-title {
  padding: 0 0 20px;
  font-weight: 500;
  font-size: 15px;
}

.author-img {
  border-radius: 50%;
  width: 30px;
  height: 30px;
  margin-right: 16px;
  object-fit: cover;
  object-position: center;
}

.year-book-img {
  width: 45px;
  margin-right: 16px;
}
.year-book-name {
  margin-bottom: 15px;
  font-weight: 500;
}
.year-book-author {
  font-size: 13px;
}
.year-book + .year-book {
  margin-top: 20px;
}

.year-book-content {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.overlay {
  position: sticky;
  bottom: 0;
  left: 0;
  width: 340px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f2f5f7 65%, #f2f5f7 100%);
  height: 60px;
  margin-left: -35px;
}

.book-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  padding-top: 40px;
  position: relative;
}

.book-card {
  margin-top: 20px;
  background-color: #fff;
  height: 270px;
  box-shadow: -1px 3px 8px -1px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  padding: 0 0 20px 20px;
  color: var(--body-color-light);
}

.book-card-img {
  width: 160px;
  margin-top: -35px;
  border-radius: 2px;
  box-shadow: 0px 1px 7px 2px #c7c9d3;
  border-bottom: 1px solid #dcddde;
  object-fit: cover;
  margin-bottom: 20px;
  transition: .3s ease;
}
.book-card-img:hover {
  transform: scale(1.04);
}

.card-content {
  color: var(--body-color);
  padding: 30px;
  overflow: hidden;
  position: relative;
}

.book-name {
  font-weight: 500;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.book-by {
  font-size: 13px;
  color: var(--body-color-light);
  margin-top: 4px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.book-rate > label {
  color: #cccccc;
}

.rate {
  display: inline-block;
  white-space: nowrap;
}

.book-rate > input:checked ~ label,
.book-rate:not(:checked) > label:hover,
.book-rate:not(:checked) > label:hover ~ label {
  color: #ff9700;
}

.book-rate > input:checked + label:hover,
.book-rate > input:checked ~ label:hover,
.book-rate > label:hover ~ input:checked ~ label,
.book-rate > input:checked ~ label:hover ~ label {
  color: #ff9700;
}

.card-vote {
  color: var(--body-color-light);
}

.card-sum {
  color: var(--body-color-light);
  font-size: 13px;
  line-height: 1.6em;
  -webkit-line-clamp: 4;
  margin-top: 15px;
}

.content-wrapper {
  display: flex;
  border-bottom: 1px solid #ebedef;
  position: relative;
}
.content-wrapper:before {
  content: "";
  position: absolute;
  background-color: #8f98a9;
  background-color: #aaaebc;
  box-shadow: 0 -6px 0 0 #aaaebc, 0 6px 0 0 #aaaebc;
  width: 4px;
  height: 4px;
  border: 0;
  padding: 0;
  right: 12px;
  top: 17px;
  border-radius: 50%;
  margin-left: auto;
}

.like-profile {
  margin-top: 8px;
}
.like-profile + .like-profile {
  margin-left: -5px;
}

.like-img {
  border-radius: 50%;
  width: 28px;
  object-fit: cover;
  border: 2px solid #fff;
}

.like-name {
  font-size: 13px;
  margin-left: 15px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.like-name span {
  font-weight: 600;
}

@media (max-width: 1103px) {
  .book-cell {
    width: 60%;
  }
}
@media (max-width: 765px) {
  .book-cell {
    width: 80%;
  }
}
@media (max-width: 575px) {
  .book-cell {
    width: 100%;
  }
}
@media (max-width: 575px) {
  .book-cell {
    width: 100%;
  }
}
@media (max-width: 458px) {
  .book-photo {
    width: 180px;
  }

  .book-voters {
    display: none;
  }
}
@media (max-width: 420px) {
  .book-see {
    width: 120px;
    font-size: 13px;
  }

  .book-photo {
    width: 130px;
  }

  .main-wrapper {
    margin-top: 50px;
  }
}
@media (max-width: 360px) {
  .rating > label:before {
    font-size: 0.8em;
  }
}
@media (max-width: 1220px) {
  .card-vote {
    display: none;
  }
}
@media (max-width: 1085px) {
  .book-rate > label {
    font-size: .7em;
  }
}
@media (max-width: 1045px) {
  .books-of {
    display: none;
  }
}
@media (max-width: 725px) {
  .browse-category, .search-bar {
    display: none;
  }

  .header-title {
    margin-right: auto;
  }

  .book-cards {
    grid-template-columns: 1fr;
  }

  .book-types {
    display: none;
  }
}
@media (max-width: 372px) {
  .card-content {
    padding: 20px;
  }
}