#shelf {
    display: flex;
    justify-content: center;
    padding-top: 3rem;
  }
  
  /* BOOK BINDINGS */
  .book-bg {
    overflow: hidden;
    height: 32rem;
    margin: 2px;
    cursor: pointer;
    transition: margin 0.3s ease-in-out, box-shadow 0.3s ease-in-out,
      transform 0.3s ease-in-out;
    filter: grayscale(25%);
    border-radius: 4px;
    background: grey;
    box-shadow: 0 0.5rem 1rem 0rem rgba(0, 0, 0, 0.4);
    border-top-style: solid;
    border-top-width: 1px;
    border-image: linear-gradient(
      to right,
      #333,
      #333 15%,
      antiquewhite 30%,
      antiquewhite 70%,
      #333 85%,
      #333
    );
    border-image-slice: 1;
    order: 200;
  }
  .book-bg:hover {
    box-shadow: 0 0.5rem 3rem -0.5rem rgba(0, 0, 0, 0.4);
    z-index: 10;
    margin-top: -15px;
    transform: scale(1.03, 1.03);
  }
  /* END BOOK BINDINGS */
  
  /* BOOK WIDTHS */
  .graphic {
    width: 6rem;
  }
  .data {
    width: 9rem;
  }
  .data2 {
    width: 7rem;
  }
  /* END BOOK WIDTHS */
  
  /* TITLE SHADOWS */
  .book h1,
  h2,
  h3,
  h4,
  h5 {
    text-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.8);
  }
  .web .book h1,
  h3 {
    text-shadow: 0 0 0.25rem rgba(0, 0, 0, 0.6);
  }
  /* END TITLE SHADOWS */
  
  /* DEFAULT BOOK ATTRIBUTES */
  .book {
    display: flex;
    height: 100%;
    width: 100%;
    box-shadow: inset -0.35rem 0 0.5rem rgba(0, 0, 0, 0.4),
      inset 0.35rem 0 0.5rem rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
    writing-mode: vertical-rl;
  }
  .contents {
    opacity: 0;
  }
  /* END DEFAULT BOOK ATTRIBUTES */
  
  /* GRAPHIC DESIGN */
  .graphic .book {
    align-items: center;
    background: radial-gradient(
        ellipse at top,
        rgba(255, 145, 0, 0.75),
        rgba(82, 44, 0, 0.75)
      ),
      radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
    font-family: "Unica One", cursive;
    color: darkorange;
  }
  /* END GRAPHIC DESIGN */
  
  /* DATA VISUALIZATION */
  .data .book {
    background: radial-gradient(
        ellipse at top,
        rgba(90, 22, 153, 0.55),
        rgba(0, 0, 0, 0.75)
      ),
      radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
    font-family: "Smooch Sans", sans-serif;
    color: rgb(221, 206, 206);
  }
  /* END DATA VISUALIZATION */
  


    /* GRAPHIC DESIGN */
    .data2 .book {
      align-items: center;
      background: radial-gradient(
          ellipse at top,
          rgba(0, 4, 255, 0.75),
          rgba(5, 0, 82, 0.75)
        ),
        radial-gradient(ellipse at bottom, rgba(70, 70, 70, 0.5), transparent);
      font-family: "Unica One", cursive;
      color: rgb(25, 0, 255);
    }
    /* END GRAPHIC DESIGN */