body{
  margin:0;
  font-family: "Helvetica", Arial, sans-serif;
  background:#111;
}

/* Hamburger */
.hamburger{
  position:fixed;
  top:10px;
  left:10px;
  font-size:32px;
  cursor:pointer;
}

/* Nav */
nav{
  position:fixed;
  top:50px;
  left:-220px;
  width:200px;
  background:white;
  transition:.6s;
  padding:10px;
}

nav.show{
  left:10px;
}

.stage{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
}

/* Paper */
.paper{
  width:320px;
  height:420px;
  perspective:800px;
  transition:.8s;
}

.cover-img{
  width:100%;
  box-shadow:0 0 15px rgba(0,0,0,.5);
}

/* Trạng thái gấp */
.folded{
  transform: rotateX(25deg) rotateY(-25deg);
}

/* Khi trải phẳng */
.flat{
  transform:none;
  width:80%;
  height:80%;
}

/* Reader */
.reader{
  display:flex;
  width:90%;
  height:90%;
  background:white;
}

.hidden{
  display:none;
}

/* Scroll sections */
.section{
  display:none;
  padding:20px;
}

.section img{
  width:100%;
}

/* Zoom effect */
.zoomed{
  transform: scale(1.15);
  transition:.5s;
}

.toc{
  width:150px;
  border-right:1px solid #ddd;
  padding:10px;
}

.toc button{
  width:100%;
  margin-bottom:8px;
}