.is-clickable,
.modal-button {
  cursor: pointer;
}

/* Bookshelf Styling */
.bookshelf {
  border: 4px solid saddlebrown;
  background: sienna;
}

.book-slot {
  position: relative;
  overflow: visible;
  width: 100px;
  height: 300px; /* The tallest a book could be */
  border-bottom: 4px solid saddlebrown;
  margin: 10px 1px -4px !important;
}
.book-slot.is-thin {
  width: 80px;
}
.book-slot.is-thick {
  width: 120px;
}

.book {
  position: absolute;
  overflow: visible;
  top: 30px;
  right: 0;
  bottom: 0;
  left: 0;
}
.book.is-short {
  top: 60px;
}
.book.is-tall {
  top: 0;
}

.book .spine {
  position: relative;
  box-sizing: border-box;
  background: #c0ffee;
  border: 1px solid #aaa;
  width: 100%;
  height: 100%;
  margin-bottom: 4px;
  z-index: 1;
  transition: all 0.25s;
}
.book:hover .spine {
  width: 120%;
  margin-left: -10%;
  height: 120%;
  margin-top: -20%;
  z-index: 2;
}

.spine .text-container {
  width: 260px;
  height: 100px;
  transform: rotate(90deg) translateX(82px) translateY(80px);
  overflow: hidden;
  word-break: break-all;
}
.spine .title {
  font-size: 1.3em;
}
.spine .subtitle {
  font-size: 1.1em;
}

.book-slot.is-thin .book .spine .text-container {
  height: 80px;
  transform: rotate(90deg) translateX(92px) translateY(92px);
}
.book-slot.is-thick .book .spine .text-container {
  height: 120px;
  transform: rotate(90deg) translateX(72px) translateY(72px);
}

.book.is-short .spine .text-container {
  width: 230px;
  transform: rotate(90deg) translateX(68px) translateY(66px);
}
.book-slot.is-thin .book.is-short .spine .text-container {
  transform: rotate(90deg) translateX(78px) translateY(76px);
}
.book-slot.is-thick .book.is-short .spine .text-container {
  transform: rotate(90deg) translateX(58px) translateY(56px);
}
.book.is-short .spine .title {
  font-size: 1.1em;
}
.book.is-short .spine .subtitle {
  font-size: 0.9em;
}
.book.is-tall .spine .text-container {
  width: 290px;
  transform: rotate(90deg) translateX(98px) translateY(95px);
}
.book-slot.is-thin .book.is-tall .spine .text-container {
  transform: rotate(90deg) translateX(108px) translateY(106px);
}
.book-slot.is-thick .book.is-tall .spine .text-container {
  transform: rotate(90deg) translateX(88px) translateY(86px);
}
.book.is-tall .spine .title {
  font-size: 1.3em;
}
.book.is-tall .spine .subtitle {
  font-size: 1.1em;
}