@import url(/global.css);

html {
  overflow-x: hidden;
}

main {
  padding: 0 1rem;
  position: relative;
  width: 100%;
  max-width: unset;

  > p {
    filter: drop-shadow(0 0 0.1rem var(--dark));
    max-width: 30rem;
    margin: 0 auto;
  }
}

#backdrop {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: -1;
}

#bookshelf {
  position: absolute;
  inset: 0;
  padding: 32rem 1rem 0;
  margin-top: 2rem;
}

.shelf {
  display: flex;
  gap: 0.3rem;
  max-width: 39rem;
  margin: 0 auto;
}

.book {
  flex: 0 0 auto;
  transform-style: preserve-3d;
  perspective: 40rem;

  > * {
    display: inline-block;
    transition: all 0.3s;
    pointer-events: none;
    transform-style: preserve-3d;
  }
}

.book:hover {
  z-index: 1;
  > * {
    transform: scale(1.2) translate(-4rem) rotate3d(0, 1, 0, -70deg);
  }
}

.spine {
  max-height: 15rem;
}

.cover {
  position: absolute;
  top: 0;
  left: 90%;
  height: 99%;

  transform-origin: left;
  transform: rotate3d(0, 1, 0, 90deg);

  > img {
    height: 100%;
  }
}

.title {
  position: absolute;
  top: 40%;
  left: 0.75rem;
  right: 0;

  > p {
    margin: 0 0.75rem;
    color: var(--light);
    text-align: center;
    font-family: serif;
    font-size: larger;
  }
}