@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&display=swap');

:root {
    --spine-pyramid: linear-gradient(
      315deg,
      transparent 75%,
      rgba(255, 255, 255, 0.1) 0
      ),
      linear-gradient(
        45deg,
         transparent 75%,
          rgba(255, 255, 255, 0.1) 0
      ),
      linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.2) 166px,
        transparent 0
      ),
      linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.1) 75%,
        transparent 0
      );
      background-size: 20px 20px;
    --spine-stairs: repeating-linear-gradient(
        63deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 3px,
        transparent 0
      ),
      linear-gradient(
        127deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 90px,
        transparent 55%,
        transparent 0
      ),
      linear-gradient(
        transparent 51%,
        rgba(0, 0, 0, 0.1) 170px
      );
      background-size: 70px 120px;
    --spine-argyle: repeating-linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 60px
      ),
      repeating-linear-gradient(
        60deg,
        rgba(255, 255, 255, 0.1),
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 60px
      ),
      linear-gradient(
        60deg,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.1) 75%,
        rgba(0, 0, 0, 0.1)
      ),
      linear-gradient(
        120deg,
        rgba(0, 0, 0, 0.1) 25%,
        transparent 25%,
        transparent 75%,
        rgba(0, 0, 0, 0.1) 75%,
        rgba(0, 0, 0, 0.1)
      );
    background-size: 70px 120px;
    --spine-tartan: repeating-linear-gradient(
        transparent,
        transparent 50px,
        rgba(0, 0, 0, 0.4) 50px,
        rgba(0, 0, 0, 0.4) 53px,
        transparent 53px,
        transparent 63px,
        rgba(0, 0, 0, 0.4) 63px,
        rgba(0, 0, 0, 0.4) 66px,
        transparent 66px,
        transparent 116px,
        rgba(0, 0, 0, 0.5) 116px,
        rgba(0, 0, 0, 0.5) 166px,
        rgba(255, 255, 255, 0.2) 166px,
        rgba(255, 255, 255, 0.2) 169px,
        rgba(0, 0, 0, 0.5) 169px,
        rgba(0, 0, 0, 0.5) 179px,
        rgba(255, 255, 255, 0.2) 179px,
        rgba(255, 255, 255, 0.2) 182px,
        rgba(0, 0, 0, 0.5) 182px,
        rgba(0, 0, 0, 0.5) 232px,
        transparent 232px
      ),
      repeating-linear-gradient(
        270deg,
        transparent,
        transparent 50px,
        rgba(0, 0, 0, 0.4) 50px,
        rgba(0, 0, 0, 0.4) 53px,
        transparent 53px,
        transparent 63px,
        rgba(0, 0, 0, 0.4) 63px,
        rgba(0, 0, 0, 0.4) 66px,
        transparent 66px,
        transparent 116px,
        rgba(0, 0, 0, 0.5) 116px,
        rgba(0, 0, 0, 0.5) 166px,
        rgba(255, 255, 255, 0.2) 166px,
        rgba(255, 255, 255, 0.2) 169px,
        rgba(0, 0, 0, 0.5) 169px,
        rgba(0, 0, 0, 0.5) 179px,
        rgba(255, 255, 255, 0.2) 179px,
        rgba(255, 255, 255, 0.2) 182px,
        rgba(0, 0, 0, 0.5) 182px,
        rgba(0, 0, 0, 0.5) 232px,
        transparent 232px
      ),
      repeating-linear-gradient(
        125deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.2) 2px,
        rgba(0, 0, 0, 0.2) 3px,
        transparent 3px,
        transparent 5px,
        rgba(0, 0, 0, 0.2) 5px
      );
  }
  
  .bookshelf {
    width: 100%;
    margin-top: 70px;
    display: flex;
    flex-wrap: wrap;
    opacity: 0;
    transition: opacity 0.3s ease;
    visibility: hidden;
  }
  
  .bookshelf.loaded {
  opacity: 1;
  visibility: visible;
  }
  
  .book {
    width: 75px;
    height: 420px;
    position: relative;
    margin-left: 1px;
    transform-style: preserve-3d;
    transform: translateZ(0) rotateY(0);
    transition: transform 1s;
  }
  
  .side {
    position: absolute;
    border: 2px solid black;
    border-radius: 3px;
    font-weight: bold;
    color: black;
    text-align: center;
    transform-origin: center left;
  }
  
  .spine {
    position: relative;
    width: 75px;
    height: 420px;
    /* Patterns from: https://projects.verou.me/css3patterns/ */
    background-image: var(--tartan);
    transform: rotateY(0deg) translateZ(0px);
  }
  
  .spine-title-wrapper {
    position: absolute;
    top: 0;
    bottom: 60px; /* reserve space for author name */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
  }

  .spine-title {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-family: 'Cormorant Garamond', serif;
    font-size: 16px;
    color: gold;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    line-height: 1.1;
    max-height: 100%;
    max-width: 90%;
  }

  .spine-author {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Cormorant Garamond', serif;
    font-size: 10px;
    color: goldenrod;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    width: 90%;
    height: 48px;        /* ~4 lines at 10px font-size + line-height */
    line-height: 1.2;
    overflow: hidden;
  }
  
  .top {
    width: 75px;
    height: 285px;
    top: -2px;  /* hmm, why -2 and not 0? */
    background-image: linear-gradient(90deg, white 90%, gray 10%);
    background-size: 5px 5px;
    transform: rotateX(90deg) translateZ(142.5px) translateY(-142.5px);
  }
  
  .cover {
    width: 285px;
    height: 420px;
    top: 0px;
    background-image: url("https://picsum.photos/190/280");
    background-size: contain;
    background-repeat: round;
    left: 75px;
    transform: rotateY(90deg) translateZ(0);
    transition: transform 1s;
  }
  
  .book:hover {
    z-index: 1;
    transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px)
      translateX(-30px);
  }