nav{
    display: flex;
    width: 100%;
    background-color: cadetblue;
    position: relative;
    justify-content: space-between;
    text-align: center;
    padding: 15px 30px;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
nav .icon{
    font-size: 30px;
    font-weight: 800;
    color: black;
    cursor: pointer;
}
body {
	font-family: "Poppin", sans-serif;
	background-color: #2e3537;
	height: 90vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.book{
    margin: auto;
	width: 550px;
	height: 650px;
	position: relative;
	transition-duration: 1s;
	perspective: 1500;
}
input {
	display: none;
}
.cover, .back-cover {
	background-color:brown;
	width: 100%;
	height: 100%;
	border-radius: 0 15px 15px 0;
	box-shadow: 0 0 5px rgb(41, 41, 41);
	display: flex;
	align-items: center;
	justify-content: center;
	transform-origin: center left;
}
.cover {
	position: absolute;
	z-index: 4;
	transition: transform 1s;
}
.cover label {
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.back-cover {
	position: relative;
	z-index: -1;
}
.page {
	position: absolute;
	background-color: lightblue;
	width: 530px;
	height: 630px;
	border-radius: 0 15px 15px 0;
	margin-top: 10px;
	transform-origin: left;
	transform-style: preserve-3d;
	transform: rotateY(0deg);
	transition-duration: 1.5s;
}
.page img {
	width: 100%;
	height: 100%;
	border-radius: 15px 0 0 15px;
}
.front-page {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	box-sizing: border-box;
	padding: 1rem;
}
.back-page {
	transform: rotateY(180deg);
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	z-index: 99;
}
.next, .prev {
	position: absolute;
	bottom: 1em;
	cursor: pointer;
}
.next{
	right: 1em;
}
.prev{
	left: 1em;
}
#page1{
	z-index: 3;
}
#page2{
	z-index: 2;
}
#page3{
	z-index: 1;
}
#checkbox-cover:checked ~ .book {
	transform: translateX(200px);
}
#checkbox-cover:checked ~ .book .cover {
	transition: transform 1.5s, z-index 0.5s 0.5s;
	transform: rotateY(-180deg);
	z-index: 1;
}
#checkbox-cover:checked ~ .book .page {
	box-shadow: 0 0 3px rgb(99, 98, 98);
}
#checkbox-page1:checked ~ .book #page1 {
	transform: rotateY(-180deg);
	z-index: 2;
}
#checkbox-page2:checked ~ .book #page2 {
	transform: rotateY(-180deg);
	z-index: 3;
}
footer{
    background-color: blanchedalmond;
    width: 100%;
    padding: 10px;
    text-align: center;
}