@import url('https://fonts.googleapis.com/css2?family=Montaga&display=swap');

body{
  font-family: 'Montaga', serif;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content:center;
  align-items: center;
}
input{
  display: none;
}
img{
  width: 100%;
  height: 100%;
}
.container{
  display: flex;
}
#cover{
  width: 400px;
  height: 400px;
}
.page-container{
  width: 400px;
  height: 400px;
  position: relative;
  perspective: 1500px;
}
.page{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: left;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: 0.5s;
  color: rgb(141, 55, 15);
  text-align: center;
}
.front, .back{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.front, .back p{
  font-size: 20px;
  font-weight: 500;
}

.front{
  background-color: #c4e91e;
  box-sizing: border-box;
  padding: 0 13px;
}
.back{
  transform: rotateY(180deg);
  backface-visibility: hidden;
}
.next-btn{
  position: absolute;
  bottom: 13px;
  right: 13px;
  cursor: pointer;
}
.back-btn{
  position: absolute;
  bottom: 13px;
  left: 13px;
  cursor: pointer;
}
#p1{
  z-index: 4;
}
#p2{
  z-index: 3;
}
#p3{
  z-index: 2;
}
#p4{
  z-index: 1;
}
#c1:checked ~ .page-container #p1{
  transform: rotateY(-180deg);
  z-index: 1;
}
#c2:checked ~ .page-container #p2{
  transform: rotateY(-180deg);
  z-index: 2;
}
#c3:checked ~ .page-container #p3{
  transform: rotateY(-180deg);
  z-index: 3;
}
#c4:checked ~ .page-container #p4{
  transform: rotateY(-180deg);
  z-index: 4;
}
#c5:checked ~ .page-container #p5{
  transform: rotateY(-180deg);
  z-index: 4;
}
#p5{
  background: #c4e91e;
}