body {
  background-color: #d18262;
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc2MDAnIGhlaWdodD0nNCc+Cgk8ZGVmcyBpZD0nZGVmczQnPgoJCTxmaWx0ZXIgeT0nMCcgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSdzUkdCJyBpZD0ndCc+CgkJCTxmZVR1cmJ1bGVuY2UgdHlwZT0nZnJhY3RhbE5vaXNlJyBiYXNlRnJlcXVlbmN5PScuOCAwJyByZXN1bHQ9J291dDEnIG51bU9jdGF2ZXM9JzEnLz4KCQkJPGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIGluPSdvdXQxJyByZXN1bHQ9J291dDInIHZhbHVlcz0nMCcvPgoJCQk8ZmVDb21wb3NpdGUgb3BlcmF0b3I9J2FyaXRobWV0aWMnIGsxPScwJyBrMj0nMC41NycgazM9JzAnIGs0PScwJyBpbj0nb3V0MicgaW4yPSdvdXQxJy8+CgkJPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8cmVjdCBmaWxsPScjZmZiYjk0JyBmaWxsLW9wYWNpdHk9JzAuMzI5JyB4PSc1JScgeT0nLTUlJyB3aWR0aD0nMTAlJyBoZWlnaHQ9JzExMCUnLz4KCTxyZWN0IGZpbGw9JyNmZmJiOTQnIGZpbGwtb3BhY2l0eT0nMC4xMzE2JyB4PSc2JScgeT0nLTUlJyB3aWR0aD0nMTAlJyBoZWlnaHQ9JzExMCUnLz4KCTxyZWN0IGZpbGw9JyNmZmJiOTQnIGZpbGwtb3BhY2l0eT0nMC4xMzE2JyB4PSc3JScgeT0nLTUlJyB3aWR0aD0nMTQlJyBoZWlnaHQ9JzExMCUnLz4KCTxyZWN0IGZpbGw9JyNmZmJiOTQnIGZpbGwtb3BhY2l0eT0nMC4xMzE2JyB4PSc5JScgeT0nLTUlJyB3aWR0aD0nMjAlJyBoZWlnaHQ9JzExMCUnLz4KCTxyZWN0IGZpbGw9JyNmZmJiOTQnIGZpbGwtb3BhY2l0eT0nMC4xMzE2JyB4PScxMSUnIHk9Jy01JScgd2lkdGg9JzEwJScgaGVpZ2h0PScxMTAlJy8+Cgk8cmVjdCBmaWxsPScjZmZiYjk0JyBmaWxsLW9wYWNpdHk9JzAuMjYzMicgeD0nNTUlJyB5PSctNSUnIHdpZHRoPSc0MCUnIGhlaWdodD0nMTEwJScvPgoJPHJlY3QgZmlsbD0nI2ZmYmI5NCcgZmlsbC1vcGFjaXR5PScwLjA5ODcnIHg9JzYyJScgeT0nLTUlJyB3aWR0aD0nMzUlJyBoZWlnaHQ9JzExMCUnLz4KCTxyZWN0IGZpbGw9JyNmZmJiOTQnIGZpbGwtb3BhY2l0eT0nMC4yMzAzMDAwMDAwMDAwMDAwMycgeD0nMzglJyB5PSctNSUnIHdpZHRoPScyMCUnIGhlaWdodD0nMTEwJScvPgoJPHJlY3QgZmlsbD0nI2ZmYmI5NCcgZmlsbC1vcGFjaXR5PScwLjA5ODcnIHg9Jzg1JScgeT0nLTUlJyB3aWR0aD0nNDAlJyBoZWlnaHQ9JzExMCUnLz4KCTxyZWN0IGZpbGw9JyNmZmJiOTQnIGZpbGwtb3BhY2l0eT0nMC4xNjQ1JyB4PSc1MiUnIHk9Jy01JScgd2lkdGg9JzQwJScgaGVpZ2h0PScxMTAlJy8+Cgk8cmVjdCBzdHlsZT0nZmlsdGVyOnVybCgjdCknIHg9Jy0xJScgeT0nLTElJyB3aWR0aD0nMTAyJScgaGVpZ2h0PScxMDAlJy8+Cjwvc3ZnPg==');
}

.book {
  padding: 15px 0 0 0;
  margin: auto;
}
a:before { /* Just to give a little puddle of a shadow without adding another element */
  content: '';
    display: block;
    width: 80%;
    height: 1em;
    background: rgba(0,0,0,.35);
    border-radius: 50%;
    position: absolute;
    bottom:-10px;
    -webkit-filter: blur(5px);
    filter: blur(5px);
    z-index:-5;
}
.shelf {
  border-bottom: 30px solid #804832;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  top: -15px;
  z-index: -10;
}
/*Example adding pseudo element to give shelf depth*/
.shelf:after {
  content: '';
  background: #522e1f;
  height: 20px;
  width: calc(100% + 40px); /*IE9+*/
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
  z-index: 1;
  margin: 0 -20px;
}