body {
	height: 100%;
}
article {
	height: 100%;
	padding: 75px 0 40px;
	#book-list {
		list-style: none;
		width: 100%;
		overflow: hidden;
		padding: 0;
		position: relative;
		height: 100%;
		opacity: 0;
		animation: fade-in 1s forwards;
		li {
			text-align: center;
			position:absolute;
			max-height: 100%;
			max-width: 90vw;
			top: 50%;
			left: 50%;
			transition: all .3s;
			> img {
				border:5px solid var(--complementary-color);
				border-radius: 40px;
				height: auto;
				object-fit: contain;
				max-width: 70vw;
				max-height: calc(100vh - 75px - 40px);
				box-shadow: 0 41px 40px -42px #000;
				cursor: pointer;
			}
			&.active {
				z-index: 2;
				filter: blur(0);
				transform: translate(-50%, -50%) scale(1);
			}
			&.away-1 {
				filter: blur(2px);
				z-index: 1;
				transform: translate(0, -60%) scale(.6);
				&.negative {
					transform: translate(-100%, -60%) scale(.6);
				}
			}
			&.away-2 {
				filter: blur(6px);
				z-index: 0;
				transform: translate(35%, -60%) scale(.3);
				&.negative {
					transform: translate(-135%, -60%) scale(.3);
				}
			}
			&.away-3 {
				filter: blur(8px);
				z-index: -1;
				transform: translate(50%, -60%) scale(.2);
				&.negative {
					transform: translate(-150%, -60%) scale(.2);
				}
			}
			&.away-4 {
				filter: blur(10px);
				z-index: -2;
				transform: translate(59%, -60%) scale(.13);
				&.negative {
					transform: translate(-159%, -60%) scale(.13);
				}
			}
		}
	}
	#book-content{
		li {
			position:fixed;
			height:0;
			width:0;
			bottom:0;
			right:0;
			z-index: 3;
			display: block;
			background-color: var(--primary-color);
			border-radius:100% 0 0 0;
			transition: all 1s;
			transition-delay: .5s;
			align-content: center;
			.book-deets {
				opacity: 0;
				transition: opacity .6s;
				transition-delay: 0s;
				max-width: 600px;
				margin: 0 auto;
			}
			.close {
				bottom:-100px;
				position: fixed;
				left: 50%;
				transform: translateX(-50%);
				background-color: var(--bg-color);
				padding: 15px 15px 8px;
				border-radius: 20px 20px 0 0;
				transition: all .6s;
				transition-delay: 0;
				cursor: pointer;
				svg {
					width:20px;
					fill: var(--primary-color);
				}
			}
			&.open {
				width: 100%;
				height: 100%;
				padding: 40px;
				overflow-y: auto;
				border-radius: 0;
				transition-delay: 0s;
				.book-deets {
					display: block;
					opacity: 1;
					transition-delay: 1s;
				}
				h1 {
					padding-top:0;
				}
				p, h1, a{
					color: var(--bg-color);
				}
				p {
					margin-bottom: 1rem;
				}
				.close {
					bottom:0;
					transition-delay: 1.3s;
				}
			}
		}
	}
	#book-nav{
		#books-left {
			background-color: var(--secondary-color);
			position: fixed;
			top: 50%;
			left: -100px;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 2;
			padding: 10px 10px 10px 5px;
			border-radius: 0 20px 20px 0;
			outline: none;
			border: none;
			animation: left-button-in 1s forwards;
			svg {
				width: 30px;
				height: auto;
				fill: var(--secondary-comp-color);
				transition: all .3s;
			}
		}
		#books-right {
			background-color: var(--secondary-color);
			position: fixed;
			top: 50%;
			right: -100px;
			transform: translateY(-50%);
			cursor: pointer;
			z-index: 2;
			padding: 10px 5px 10px 10px;
			border-radius: 20px 0 0 20px;
			outline: none;
			border: none;
			animation: right-button-in 1s forwards;
			svg {
				fill: var(--secondary-comp-color);
				transition: all .3s;
				width: 30px;
				height: auto;
			}
		}
	}
}
@keyframes fade-in {
	100% {
		opacity: 1;
		filter: blur(0);
	}
}
@keyframes left-button-in {
	100% {
		left:0
	}
}
@keyframes right-button-in {
	100% {
		right:0
	}
}
@media screen and (min-width: 940px) {
	article {
		#book-nav{
			#books-left {
				padding: 10px;
				border-radius: 0 20px 20px 0;
				svg {
					width: 40px;
					&:hover {
						fill: var(--complementary-color);
					}
				}
			}
			#books-right {
				padding: 10px;
				border-radius: 20px 0 0 20px;
				svg {
					width: 40px;
					&:hover {
						fill: var(--complementary-color);
					}
				}
			}
		}
	}
}
@media screen and (min-width: 1200px) {
	article {
		#book-list {
			transition: 1s;
			&.is-open {
				width: 60%;
				overflow: visible;
				
			}
		}
		#book-content {
			li {
				width: 0;
				height: 0;
				opacity: 0;
				right:0;
				bottom: 0;
				transform: translateY(-50%);
				right: auto;
				bottom:auto;
				overflow-y: hidden;
				transition: opacity .6s;
				transition-delay: 0s;
				z-index: 1;
				&.open {
					top: 50%;
					left: 50%;
					width: calc(50% - 80px);
					height: 70vh;
					opacity: 1;
					transition-delay: 1s;
					overflow-y: hidden;
					border-radius: 40px;
					z-index: 1;
				}
			}
		}
	}
}