* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  font-family: monospace;
  background-color: #fff;
  max-width: 1248px;
  margin: 0 auto;
}

.overall {
  border: 1px solid #f6f4f0;
  border-radius: 0px;
  width: 1248px;
  height: 3012px;
  background-color: #f6f4f0;
  position: relative;
  display: flex;
  flex-direction: column;
}

.section-1 {
  border: 1px solid #f6f4f0;
  border-radius: 5px;
  height: 138px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.main-1 {
  border: 1px solid #2a2c2e;
  border-radius: 20px;
  background-color: #2a2c2e;
  opacity: 96%;
  width: 1200px;
  height: 96px;
  padding: 20px 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.child-11 {
  background-color: #2a2c2e;
  opacity: 96%;
  width: 166px;
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#grandchild-111 {
  width: 33.98px;
  height: 34.8px;
  background-image: url("assets/bigbookshelf-logo.png");
}

#grandchild-112 {
  color: #ffffff;
  width: 120.96px;
  height: 20px;
  font-weight: bolder;
  font-size: 128.2%;
  text-align: center;
  vertical-align: middle;
  line-height: 20px;
}

.child-12 {
  background-color: #2a2c2e;
  opacity: 96%;
  width: 456px;
  height: 24px;
  gap: 32px;
  color: #ffffff99;
  font-family: Clash Grotesk Variable;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.0015em;
  text-align: center;
  text-decoration-skip-ink: none;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

a:link {
  color: #ffffff99;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #ffffff99;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: blue;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: none;
}

.child-13 {
  background-color: #2a2c2e;
  opacity: 96%;
  width: 253px;
  height: 56px;
  gap: 40px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#grandchild-131 {
  width: 112px;
  height: 24px;
  gap: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#search-logo {
  width: 24px;
  height: 24px;
  opacity: 0px;
  background-image: url("assets/search-logo.png");
}

#bookmark-logo {
  width: 24px;
  height: 24px;
  opacity: 0px;
  background-image: url("assets/bookmark-logo.png");
}

#cart-logo {
  width: 24px;
  height: 24px;
  opacity: 0px;
  background-image: url("assets/cart-logo.png");
}

button {
  color: #000000de;
  background-color: #f4ce47;
  border-radius: 16px;
  width: 101px;
  height: 56px;
  padding: 16px 25px;
  gap: 12px;
  opacity: 0px;
  font-family: Clash Grotesk Variable;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.0015em;
  text-align: center;
  text-decoration-skip-ink: none;
  cursor: pointer;
  transition: all 100ms;
}

button:hover {
  color: #f4ce47;
  background-color: #000000de;
}

.section-2 {
  background-color: #f4ce47;
  height: 80px;
  padding: 12px;
  gap: 24px;
  display: flex;
  flex-direction: row;
  position: relative;
  justify-content: space-around;
  align-items: center;
}

#main-21 {
  color: #f4ba30;
  font-family: Clash Grotesk Variable;
  font-size: 36px;
  font-weight: 400;
  line-height: 56px;
  text-decoration-skip-ink: none;
  padding: 0px;
  border: 0px;
  margin: 0px;
  position: absolute;
  left: -10px;
}

#main-22 {
  color: #f4ba30;
  font-family: Clash Grotesk Variable;
  font-size: 36px;
  font-weight: 400;
  line-height: 56px;
  text-decoration-skip-ink: none;
  padding: 0px;
  border: 0px;
  margin: 0px;
  position: absolute;
  left: 250px;
}

#main-23 {
  color: #2a2c2e;
  font-family: Clash Grotesk Variable;
  font-size: 36px;
  font-weight: 400;
  line-height: 56px;
  text-decoration-skip-ink: none;
  padding: 0px;
  border: 0px;
  margin: 0px;
  position: absolute;
  left: 530px;
}

#main-24 {
  color: #f4ba30;
  font-family: Clash Grotesk Variable;
  font-size: 36px;
  font-weight: 400;
  line-height: 56px;
  text-decoration-skip-ink: none;
  padding: 0px;
  border: 0px;
  margin: 0px;
  position: absolute;
  right: 250px;
}

#main-25 {
  color: #f4ba30;
  font-family: Clash Grotesk Variable;
  font-size: 36px;
  font-weight: 400;
  line-height: 56px;
  text-decoration-skip-ink: none;
  padding: 0px;
  border: 0px;
  margin: 0px;
  position: absolute;
  right: -10px;
}

.section-3 {
  background-color: #2a2c2e;
  height: 2618px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.main-3 {
  background-color: #2a2c2e;
  width: 898px;
  height: 2332px;
  gap: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.child-3 {
  width: 898px;
  height: 577px;
  gap: 8px;
  display: flex;
  flex-direction: row;
}

.grandchild-3 {
  background-color: #ffffff;
  border-radius: 20px;
  background-color: ffffff;
  width: 294px;
  height: 577px;
  gap: 8px;
  padding: 24px;
  position: relative;
}

.grandchild-3:hover {
  background-color: #dfbe4a;
}

#book-photo1 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book1.png");
  position: relative;
}

#book-photo2 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book2.png");
  position: relative;
}

#book-photo3 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book3.png");
  position: relative;
}

#book-photo4 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book4.png");
  position: relative;
}

#book-photo5 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book5.png");
  position: relative;
}

#book-photo6 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book6.png");
  position: relative;
}

#book-photo7 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book7.png");
  position: relative;
}

#book-photo8 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book8.png");
  position: relative;
}

#book-photo9 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book9.png");
  position: relative;
}

#book-photo10 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book10.png");
  position: relative;
}

#book-photo11 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book11.png");
  position: relative;
}

#book-photo12 {
  background-color: #ffffff61;
  width: 246px;
  height: 357px;
  padding: 9.99px;
  gap: 9.99px;
  border-radius: 11.99px;
  opacity: 0px;
  background-image: url("assets/book12.png");
  position: relative;
}

.favorite-bookmark {
  background-color: #2a2c2e;
  width: 37px;
  height: 37.4px;
  padding: 7.48px;
  gap: 7.48px;
  border-radius: 33.66px;
  opacity: 0px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 12px;
}

.favorite-bookmark-logo {
  width: 13px;
  height: 15px;
  gap: 0px;
  opacity: 0px;
  background-image: url("assets/favorite-bookmark-logo.png");
}

.book-info {
  width: 246px;
  height: 164px;
  margin: 7px;
  gap: 0px;
  opacity: 0px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  position: absolute;
  left: 18px;
}

.card-top {
  width: 246px;
  height: 68px;
  gap: 4px;
}

#author-book1,
#author-book2,
#author-book3,
#author-book4,
#author-book5,
#author-book6,
#author-book7,
#author-book8,
#author-book9,
#author-book10,
#author-book11,
#author-book12 {
  color: #00000099;
  width: 246px;
  height: 16px;
  gap: 4px;
  font-family: Clash Grotesk Variable;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.0015em;
  text-align: left;
  text-decoration-skip-ink: none;
}

#name-book1,
#name-book2,
#name-book3,
#name-book4,
#name-book5,
#name-book6,
#name-book7,
#name-book8,
#name-book9,
#name-book10,
#name-book11,
#name-book12 {
  color: #000000de;
  width: 245px;
  height: 24px;
  gap: 0px;
  opacity: 0px;
  font-family: Clash Grotesk Variable;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.0015em;
  text-align: left;
  text-decoration-skip-ink: none;
}

#name-book1:hover,
#name-book2:hover,
#name-book3:hover,
#name-book4:hover,
#name-book5:hover,
#name-book6:hover,
#name-book7:hover,
#name-book8:hover,
#name-book9:hover,
#name-book10:hover,
#name-book11:hover,
#name-book12:hover {
  color: blue;
}

.card-mid {
  width: 154px;
  height: 32px;
  gap: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.comment {
  border: 1px solid #000000de;
  width: 55px;
  height: 32px;
  padding: 8px 12px;
  gap: 4px;
  border-radius: 31px;
  opacity: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.comment-count {
  color: #000000de;
  width: 11px;
  height: 16px;
  gap: 0px;
  opacity: 0px;
  font-family: Clash Grotesk Variable;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0015em;
  text-decoration-skip-ink: none;
}

.comment-logo {
  width: 15px;
  height: 14px;
  gap: 0px;
  opacity: 0px;
  background-image: url("assets/comment-logo.png");
}

.rating {
  border: 1px solid #000000de;
  width: 91px;
  height: 32px;
  padding: 8px 12px;
  gap: 4px;
  border-radius: 47px;
  opacity: 0px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.rating-avg {
  color: #000000de;
  width: 17px;
  height: 16px;
  gap: 0px;
  opacity: 0px;
  font-family: Clash Grotesk Variable;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0015em;
  text-align: left;
  text-decoration-skip-ink: none;
}

.rating-logo {
  color: #000000de;
  width: 14px;
  height: 14px;
  gap: 0px;
  opacity: 0px;
  background-image: url("assets/star-logo.png");
}

.rating-count {
  color: #000000de;
  width: 26px;
  height: 16px;
  gap: 0px;
  opacity: 0px;
  font-family: Clash Grotesk Variable;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0015em;
  text-align: left;
  text-decoration-skip-ink: none;
}

.card-bottom {
  width: 138px;
  height: 32px;
  gap: 8px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.price-before {
  color: #00000061;
  width: 64px;
  height: 24px;
  gap: 0px;
  opacity: 0px;
  font-family: Clash Grotesk Variable;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.0015em;
  text-align: left;
  vertical-align: middle;
  line-height: 24px;
  text-decoration-line: line-through;
  text-decoration-skip-ink: none;
}

.price-after {
  color: #000000de;
  width: 66px;
  height: 32px;
  gap: 0px;
  opacity: 0px;
  font-family: Clash Grotesk Variable;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.0015em;
  text-align: left;
  vertical-align: middle;
  line-height: 32px;
  text-decoration-skip-ink: none;
}

.section-4 {
  background-color: #2a2c2e;
  width: 1248px;
  height: 128px;
  position: absolute;
  bottom: 0px;
}

.main-41 {
  height: 88px;
  padding-right: 24px;
  padding-left: 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.child-41 {
  width: 204px;
  height: 48px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

#grandchild-411 {
  width: 33.98px;
  height: 35px;
  background-image: url("assets/bigbookshelf-logo.png");
}

#grandchild-412 {
  color: #ffffff;
  width: 148.64px;
  height: 14.31px;
  font-weight: bolder;
  font-size: 128.2%;
  text-align: center;
  vertical-align: middle;
  line-height: 14.31px;
  position: relative;
  right: 20px;
}

.child-42 {
  width: 104px;
  height: 24px;
  gap: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#instagram-logo {
  width: 17.98px;
  height: 18px;
  opacity: 0px;
  color: #ffffff;
  background-image: url("assets/instagram-logo.png");
}

#facebook-logo {
  width: 8.31px;
  height: 18px;
  opacity: 0px;
  color: #ffffff;
  background-image: url("assets/facebook-logo.png");
}

#twitter-logo {
  width: 17.23px;
  height: 14px;
  opacity: 0px;
  color: #ffffff;
  background-image: url("assets/twitter-logo.png");
}

.main-42 {
  background-color: #000000de;
  height: 40px;
  padding: 12px 24px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.child-421 {
  width: 197px;
  height: 16px;
  gap: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#terms {
  color: #ffffff;
  width: 150px;
  height: 16px;
  font-family: Clash Grotesk Variable;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0015em;
  text-align: center;
  vertical-align: middle;
  line-height: 16px;
  text-decoration-skip-ink: none;
}

#policy {
  color: #ffffff;
  width: 100px;
  height: 16px;
  font-family: Clash Grotesk Variable;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0015em;
  text-align: center;
  vertical-align: middle;
  line-height: 16px;
  text-decoration-skip-ink: none;
}

.child-422 {
  width: 234px;
  height: 16px;
  gap: 16px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#phone-number {
  color: #ffffff;
  width: 100px;
  height: 16px;
  font-family: Clash Grotesk Variable;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0015em;
  text-align: center;
  vertical-align: middle;
  line-height: 16px;
  text-decoration-skip-ink: none;
}

#email {
  color: #ffffff;
  width: 134px;
  height: 16px;
  font-family: Clash Grotesk Variable;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0.0015em;
  text-align: center;
  vertical-align: middle;
  line-height: 16px;
  text-decoration-skip-ink: none;
}