body{
  margin:0;
  
  background:url("purplestars.gif");
  background-size:cover;
  font-family:Georgia, serif;
  color:#2b1608;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

/*THE OPEN BOOK*/

.book{
  width:1000px;
  height:650px;
  display:flex;
  perspective:2000px;
}

/*BOTH PAGES*/

.page{
  width:50%;
  height:100%;
  box-sizing:border-box;
  padding:50px;
  background:#f4dfb5;
  border:3px solid #5a3518;
  box-shadow:inset 0 0 30px rgba(80, 40, 10, .3),
  0 10px 30px rgba(0,0,0,.5)
}

/*LEFT PAGE*/
.left-page{
  border-radius:0 15px 15px 0;
  border-left:1px solid #8b6337;
  position:relative;
}

/*RIGHT PAGE*/
.right-page{
  border-radius:0 15px 15px 0;
  border-left: 1px solid #8b6337;
  position:relative;
}

/*TITLES*/
h1,
h2{
  text-align:center;
  font-family:Georgia, serif;
}

/*STORY BUTTONS*/
.story-list button{
  display:block;
  width:100%;
  margin:15px 0;
  padding:12px;
  background:transparent;
  border:none;
  font-family: Georgia, serif;
  font-size:20px;
  text-align:left;
  cursor:pointer;
}

.story-list button:hover{
  text-decoration:underline;
}

/*STORY TEXT*/
#storyText{
  font-size:18px;
  line-height:1.7;
}

/*NAVIGATION*/
.navigation{
  position:absolute;
  bottom:30px;
  left:40px;
  right:40px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.navigation button{
  background:clear;
  border:1px solid #5a3518;
  padding:8px 15px;
  cursor:pointer;
  font-family:Georgia, serif;
}