body{
    background-color: black;
}
h1{
    color: white;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-size: 50px;
}

p{
    color: white;
    font-family: 'Times New Roman', Times, serif;
    text-align: center;
    font-size: 30px;

}


.shelf{
    background-color: rgb(62, 11, 11);
    padding: 7px;
    width: 600px;
    height: 100px;
    margin: 10px auto;
    border: solid;
    border-color: rgb(166, 109, 39);
    border-width: 3px;
    border-radius: 3px;
    box-shadow: 2px 2px 10px -1px rgb(166, 109, 39);
    
}

.book {
    width: 12px;
    height: 100px;
    display:inline-block;
    margin: 3px;
    box-shadow: -1px -1px 10px -1px black;
    transform-style: preserve-3d;
    transform: translateZ(0) rotateY(0);
    transition: transform 1s;
  }
  
  .side {
    position: absolute;
    border: solid black;
    font-weight: bold;
    color: black;
    text-align: center;
    transform-origin: center left;
  }
  
  .spine {
    position: relative;
    width: 12px;
    height: 100px;
    background-color: beige;
    transform: rotateY(0deg) translateZ(0px);
  }
  

  .top {
    width: 12px;
    height: 67.85px;
    top: 0; 
    left: 0;
    background-image: linear-gradient(90deg, white 90%, gray 10%);
    background-size: 5px 5px;
    transform: rotateX(-90deg) translateY(0px);
    transform-origin: top left;
  }
  
  .cover {
    width: 67.85px;
    height: 100px;
    top: 0px;
    /* background-image: url(../images/books/arianddante.jpg); */
    background-size: contain;
    background-repeat: round;
    left: 12px;
    transform: rotateY(90deg) translateZ(0);
    transition: transform 0.5s;
  }
  
  .book:hover {
    z-index: 1;
    transform: rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px)
      translateX(-30px);
  }

  .credit{
    text-align: center;
    position: absolute;
    bottom: 5px;
  }