body {
	font-family: "Poppin", sans-serif;
	background-color: #2e3537;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.book {
	width: 14cm;
	height: 21cm;
	position: relative;
	transition-duration: 1s;
	perspective: 1500;
}

.cover, .back-cover {
	background-color:mistyrose;
	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: 17;
	transition: transform 1s;
}

.cover label {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.back-cover {
	position: relative;
	z-index: -16;
}

.page {
	position: absolute;
	background-color: white;
	width: 13cm;
	height: 20cm;
	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: 0.75rem;
}

.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: 16;
}

#page2 {
	z-index: 15;
}

#page3 {
	z-index: 14;
}

#page4 {
	z-index: 13;
}

#page5 {
	z-index: 12;
}

#page6 {
	z-index: 11;
}

#page7 {
	z-index: 10;
}

#page8 {
	z-index: 9;
}

#page9 {
	z-index: 8;
}

#page9 {
	z-index: 7;
}

#page10 {
	z-index: 6;
}

#page11 {
	z-index: 5;
}

#page12 {
	z-index: 4;
}

#page13 {
	z-index: 3;
}

#page14 {
	z-index: 2;
}

#page15 {
	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;
}

#checkbox-page3:checked ~ .book #page3 {
	transform: rotateY(-180deg);
	z-index: 4;
}

#checkbox-page4:checked ~ .book #page4 {
	transform: rotateY(-180deg);
	z-index: 5;
}

#checkbox-page5:checked ~ .book #page5 {
	transform: rotateY(-180deg);
	z-index: 6;
}

#checkbox-page6:checked ~ .book #page6 {
	transform: rotateY(-180deg);
	z-index: 7;
}

#checkbox-page7:checked ~ .book #page7 {
	transform: rotateY(-180deg);
	z-index: 8;
}

#checkbox-page8:checked ~ .book #page8 {
	transform: rotateY(-180deg);
	z-index: 9;
}

#checkbox-page9:checked ~ .book #page9 {
	transform: rotateY(-180deg);
	z-index: 10;
}

#checkbox-page10:checked ~ .book #page10 {
	transform: rotateY(-180deg);
	z-index: 11;
}

#checkbox-page11:checked ~ .book #page11 {
	transform: rotateY(-180deg);
	z-index: 12;
}

#checkbox-page12:checked ~ .book #page12 {
	transform: rotateY(-180deg);
	z-index: 13;
}

#checkbox-page13:checked ~ .book #page13 {
	transform: rotateY(-180deg);
	z-index: 14;
}

#checkbox-page14:checked ~ .book #page14 {
	transform: rotateY(-180deg);
	z-index: 15;
}

.footer {
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  height:80px;
  background-color: rosybrown;
  border-top: dotted;
}

.footer-text-left {
  font-size:30px;
  padding-left:30px;
  float:left;
  word-spacing:25px;
  text-decoration: none;
}

a.menu:hover {
  background-color:plum;
  font-size: 35px;
  border:groove;
  transition: all 1s ease-in;
}

a:link { text-decoration: none;}
a:visited { text-decoration: none; }
a:hover { text-decoration: wavy underline; }
a:active { text-decoration: wavy underline; }