/* edited from Kurt Trowbridge's "Responsive CSS Bookshelf". Thanks Kurt! https://codepen.io/KurtTrowbridge/pen/vGWWNX */
*, *:after, *:before {
	box-sizing: inherit;
}



/* for presentation's sake */
body {
  background: black;
}
.bookshelf--frame {
  max-width: 800px;
  margin: 0 auto;
}

.bookshelf--frame {
	background: tan;
	background: url('https://static.tumblr.com/8x9m588/C8ho55ylx/bg-wood2.png'), #9A8548;	
	background-size: auto, 10px 300px;
	border-left: 10px solid #9A8548;
	border-right: 10px solid #9A8548;
	text-align: center;
}

.bookshelf--frame:first-of-type {
		border-top: 10px solid #9A8548;
	}

.book-wrapper {
		display: inline-block;
		width: 290px;
		vertical-align: bottom;
		height: 280px;
		position: relative;
		margin: 10px 0;
		max-width: 100%;
  }
  
.book-wrapper img {
      height: auto;
      width: auto;
			position: absolute;
			bottom: 0;
			left: 50%;
      transform: translateX(-50%);
			max-height: 100%;
			max-width: 100%;
	}
	

.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
}

#bottomlayer {
  z-index: 0;
}

#layer1 {
  z-index: 1;
}

#layer2 {
  z-index: 2;
}
#layer3 {
  z-index: 3;
}



.cabinet {
  display: flex;
  flex-direction: column;
  background: red;
  background-image: url("/imgs/bgs/red.png");
  background-size: 400px;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 800px;
  height: 105%;
  min-height: 105vh;
  padding-top: 10%;
  padding-bottom: 10%;
  border: 5px ridge red;
}

.shelf {
  display: flex;
  margin: 0 auto;
  width: 98%;
  max-width: 800px;
  height: auto;
  align-items: flex-end;
  border-bottom: 5px solid #A8050E;
  border-radius: 0px 0px 5px 5px;
  margin-top: -5%;
  padding-left: 1%;
  padding-right: 1%;
}

.shelf-shadow {
  box-shadow: 0px 10px 25px maroon;
  clip-path: polygon(0 0, 100% 0, 100% 200%, 0 200%);
}

.box {
  flex-grow: 1;
  max-width: 800px;
  /* border-bottom: 13px solid white; */
  border-image: url("/imgs/bgs/woodborder.png") 80 stretch;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-bottom: 15px solid;
  margin-right: 10px;
}

.box img {
  width: 100%;
  margin-bottom: -7px;
}

/*
.set:nth-child(4) {
  max-width: 90%;
}

.set:nth-child(3) {
  max-width: 80%;
 }

.set:nth-child(2) {
  max-width: 70%;
}

.set:nth-child(1) {
  max-width: 60%;
}
*/