/* Feel free to add more CSS here! */

p {
  font-family: Georgia;
  font-size: 14px;
}

h1, h2, h3 {
  font-family: Comic Sans MS;
  text-align: center;
}



/* The CSS below is for the way the website and book look. Be careful when making changes! */

body {
	/* Changing the style below will change the color of the background. */
  background-color: crimson;
}

#book {
  height: 500px;
  width: 720px;
  /* Changing the style below will change the color of the book. */
	background-color: limegreen;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  margin: auto;
}

.page {
  height: 500px;
  width: 350px;
  /* Changing the style below will change the color of the pages. */
  background-color: white; 
  /* Changing the style below will change the default color of the text on the pages. */
  color: black;
  margin: 0px;
  display: inline-block;
}

#inbetween {
  height: 500px;
  width: 20px;
  /* If you change the color of the pages, be sure to change the gradient below to match! */
  background-image: linear-gradient(to right, white, grey, white); 
  margin: 0px;
  display: inline-block;
}

#pages {
  display: none;
}

#buttoncontainer {
	width: fit-content;
  margin: auto;
  padding: 4px;
}

button {
  /* This style below is for the color of the buttons. */
  background-color: limegreen;
  border: none;
  color: black;
  width: 150px;
  padding: 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

button:active {
  /* This style is for the color of the buttons when they are clicked. */
  background-color: #AAFFAA;
}