* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 40px 20px;
  background: #f7f4ef;
  font-family: "Schoolbell", cursive;
  text-align: center;
  min-height: 100vh;

  overflow-x: hidden;
}

h1{
font-family:"Lacquer",system-ui;
font-size:4rem;
margin-bottom:25px;
}

.header-buttons{
display:flex;
justify-content:center;
gap:20px;
margin-bottom:40px;
flex-wrap:wrap;
}

.scribble-button{
width:180px;
height:80px;
background:url("../images/scribble-button.png") center center/contain no-repeat;
border:none;
background-color:transparent;
font-family:"Lacquer",cursive;
font-size:1.1rem;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:white;
}

.scribble-button-2{
width:180px;
height:80px;
background:url("../images/scribble-button-2.png") center center/contain no-repeat;
border:none;
background-color:transparent;
font-family:"Lacquer",cursive;
font-size:1.0rem;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
color:white;
}

.paper {
  width: min(800px, 92vw);
  margin: auto;

  background: url("../images/paper.png") center / 100% 100% no-repeat;

  padding: clamp(25px, 6vw, 80px);

  aspect-ratio: 3 / 4;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  filter: drop-shadow(0 8px 16px rgba(0,0,0,.15));

  position: relative;
}

#chapterTitle{
margin-bottom:7px;
}

#chapterBody {
  text-align: left;
  white-space: pre-wrap;
  line-height: 1.8;

  width: 100%;
  margin: 0;

  padding: 0;
}

.chapter-nav{
display:flex;
justify-content:space-between;
margin-top:30px;
}

.nav-arrow{
width:60px;
height:60px;
font-size:2rem;
border:none;
background:none;
cursor:pointer;
position:relative;
font-family:"Schoolbell",cursive;
}

.nav-arrow.disabled {
  background: url("../images/scribble.png") center / contain no-repeat;
  color: transparent;
}

#modalOverlay{
position:fixed;
inset:0;
display:none;
justify-content:center;
align-items:center;
}

#aboutModal{
width:min(700px,90vw);
padding:100px 100px;
margin: 10px;
background:url("../images/notebook-paper.png") center center/contain no-repeat;
position:relative;
}

#closeModal{
position:absolute;
top:20px;
left:20px;
border:none;
background:none;
cursor:pointer;
font-size:1.5rem;
}

details{
margin-bottom:20px;
padding:10px;
border-bottom:1px solid #ccc;
}

summary{
cursor:pointer;
font-weight:bold;
}

@media(max-width:700px){

h1{
font-size:2.5rem;
}

.paper{
padding:50px 40px;
width:95vw;
}

}

@media (max-width: 700px) {

  h1 {
    font-size: 2.2rem;
  }

  .paper {
    width: 90vw;
    padding: 30px;
    aspect-ratio: auto;
    min-height: 70vh;
  }

  #chapterBody {
    font-size: 1rem;
    line-height: 1.6;
  }

}