/* RMIT University Vietnam
  Course: COSC2430 Web Programming
  Semester: 2023A
  Assessment: Assignment 1
  Author: Do Le Long An
  ID: s3963207
  Acknowledgement: 
  MDN Web Docs, RMIT Canvas (HTML, CSS learning materials)
  shapedivider.app (For wavy divider svg), 
  sketchfab.com (For the 3D background)
  unplash.com (For quality images)
  flaticon.com, fontawesome.com (For icons and fonts)
  dribble.com, canva.com, Codepen.com (For design idea inspiration) */

.btn {
  padding: 0.6rem 1.3rem;
  text-decoration: none;
  border: 0;
}

.wrapper,
.section3-wrapper {
  position: relative;
  display: grid;
  grid-gap: 20px;
  color: #f5f5f5;
}

.wrapper {
  margin: 200px 50px 0 50px;
  transform: translateY(-25%);
}

.section3-wrapper {
  margin: 5% 50px 0 50px;
}

@media screen and (min-width: 1000px) {
  .wrapper {
    transform: translateY(-30%);
  }
}

/* Top Container */
.book-category-section2, 
.book-section2 {
  display: grid;
  grid-gap: 20px;
  grid-template-areas:
    "showcase showcase top-box-a"
    "showcase showcase top-box-b";
}

.book-category-section2 {
  margin: -5% 0;
}

.book-section2 {
  padding: 20px;
  margin-top: 30%;
}

.book-section2 p,
.book-category-section2 p {
  font-family: var(--raleway);
}

.book-section2 h2,
.book-category-section2 h2 {
  font-family: var(--roboto);
}

/* Showcase */
.showcase {
  grid-area: showcase;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: black; */
  position: relative;
}

.showcase .showcase-book--1,
.showcase .showcase-book--2,
.showcase .showcase-book--3 {
  transform: scale(5.4);
  background-repeat: no-repeat;
  background-size: 40%;
  animation: animate 25s ease-in-out infinite;
  height: 100px;
  margin-top: 20%;
  width: 120px;
  z-index: 1;
}

.showcase .showcase-book--1 {
  background-image: url("../../.././assets/clean-code.jpeg");
}

.showcase .showcase-book--2 {
  background-image: url("../../.././assets/harry-potter/harry-potter-5.jpeg");
}

.showcase .showcase-book--3 {
  background-image: url("../../.././assets/influence-ppl.png");
}

@keyframes animate {
  0%,
  100% {
    background-position: left top;
  }
  25% {
    background-position: right bottom;
  }
  50% {
    background-position: left bottom;
  }
  75% {
    background-position: right top;
  }
}

.showcase .showcase-book-info {
  font-size: 1.3rem;
  display: grid;
  gap: 25px;
  position: relative;
  z-index: 0;
  background-color: black;
  padding: 5%;
  opacity: 0.9;
  border-radius: 12px;
  border: 2px solid #f5f5f5;
  max-width: 50%;
}

.showcase .showcase-add-to-cart a .showcase-book--1,
.showcase .showcase-add-to-cart a .showcase-book--2,
.showcase .showcase-add-to-cart a .showcase-book--3 {
  font-size: 1.2rem;
  /* background: transparent; */
  margin: 0 auto;
}

/* Top Box */
.top-box {
  padding: 1.5rem;
  background-color: black;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 2px solid #f5f5f5;
  border-radius: 12px;
  margin: 0 auto;
  aspect-ratio: 4/3;
}

.top-box-a {
  grid-area: top-box-a;
}

.top-box-b {
  grid-area: top-box-b;
}

.book-image {
  width: 100%;
  height: 300px;
  border-radius: 5px;
}

.book-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.book-info {
  flex-grow: 1;
  margin-left: 20px;
}

.book-info h2 {
  font-size: 24px;
  margin: 0;
}

.book-info p {
  font-size: 16px;
  margin: 10px 0;
}

.book-info .add-to-cart {
  padding-top: 50px;
  height: 100px;
}

/* Media Queries */
@media (max-width: 780px) {
  .book-section2, .book-category-section2 {
    grid-template-areas:
      "showcase showcase"
      "top-box-a top-box-b";
  }

  .book-category-section2 {
    margin: -10% auto;
  }

  .showcase {
    min-height: 300px;
  }

  .showcase .showcase-book--1,
  .showcase .showcase-book--2,
  .showcase .showcase-book--3 {
    font-size: 2.5rem;
    transform: scale(2.5);
    height: 120px;
    width: 200px;
    background-size: 30%;
  }

  .book-section2 {
    margin-top: 30%;
  }
}
@media (max-width: 550px) {
  .book-section2, .book-category-section2 {
    grid-template-areas:
      "showcase"
      "top-box-a"
      "top-box-b";
  }

  .book-category-section2 {
    margin-bottom: -50%;
  }

  .showcase .showcase-book--1,
  .showcase .showcase-book--2,
  .showcase .showcase-book--3 {
    width: 120px;
    background-size: 50%;
  }
  .book-section2 {
    margin-top: 200%;
  }
}