/*
   __   __   __  
  |  \ |  | |  | |   /
  |--> |  | |  | |__/
  |__/ |__| |__| |  \ [.] css
  
  Vityea. 2025 Tue 11 Mar
*/

/* Container for each book item */
.book-container {
  position: relative;
  display: flex;
  align-items: center; /* Aligns the book title, author, description, and cover vertically centered */
  width: 100%; /* Width of the whole book item container will take full width */
  max-width: 500px; /* Limiting max width for larger screens */
  height: auto; /* Allowing height to adjust based on content */
  margin-bottom: 20px; /* Adds space between items */
  box-sizing: border-box; /* Ensures padding and border are included in width/height */
}

/* Title and other book info container on the left */
.book-info {
  flex: 1; /* Takes up the remaining space on the left */
  padding: 10px; /* Adds padding around the title */
  overflow: hidden; /* Prevents overflow issues */
}

/* Book title styling */
.book-title {
  font-size: 1.25rem; /* Title font size */
  font-weight: bold;
  margin: 0; /* Removes default margin */
  white-space: nowrap; /* Prevents the title from wrapping */
  overflow: hidden; /* Prevents the title from overflowing */
  text-overflow: ellipsis; /* Adds '...' if the title overflows */
}

/* Author name styling */
.book-author {
  font-size: 1rem; /* Author font size */
  color: gray; /* Light gray color for author */
  margin: 5px 0; /* Adds space between author and description */
  font-style: italic; /* Optional: makes the author name italic */
}

/* Book description styling */
.book-description {
  font-size: 0.875rem; /* Smaller font size for description */
  color: #555; /* Slightly darker gray for description */
  margin-top: 5px; /* Adds space above the description */
  white-space: normal; /* Allows the description to wrap into multiple lines */
  overflow: hidden; /* Prevents overflowing text */
  text-overflow: ellipsis; /* Optional: adds '...' if description overflows */
}

/* User uploader link styling */
.book-uploader {
  font-size: 0.875rem; /* Smaller font size for the uploader */
  margin-top: 10px; /* Adds space above the uploader */
  color: #333; /* Default color for the uploader text */
}

.uploader-link {
  color: #007bff; /* Blue color for the link */
  text-decoration: none; /* Removes underline from the link */
}

.uploader-link:hover {
  text-decoration: underline; /* Adds underline when hovered */
}

/* Book cover image (icon) on the right */
.book-cover {
  width: 80px; /* Width of the book cover */
  height: 80px; /* Height of the book cover */
  object-fit: cover; /* Ensures the image fits well inside the container */
  display: block;
  border: 5px solid black;
}

/* Mobile responsive adjustments */
@media (max-width: 600px) {
  .book-container {
    flex-direction: column; /* Stack the book title, author, description, uploader, and cover vertically */
    height: auto; /* Let height adjust based on content */
    width: 100%; /* Full width of the screen */
  }

  .book-cover {
    width: 60px; /* Smaller book cover */
    height: 60px; /* Smaller book cover */
  }

  .book-info {
    padding: 5px; /* Smaller padding on mobile */
  }

  .book-title {
    font-size: 1rem; /* Smaller font size for mobile */
  }

  .book-author {
    font-size: 0.875rem; /* Smaller font size for the author on mobile */
  }

  .book-description {
    font-size: 0.75rem; /* Even smaller font size for the description */
  }

  .book-uploader {
    font-size: 0.75rem; /* Smaller font size for the uploader */
  }
}


canvas#the-canvas {
  border: 1px solid black;
  direction: ltr;
}