/* Copyright ©2021 Anna Rose Johnson, Mike Edwards */
html,
body,
h1,
div,
object,
button,
p {
  display: block;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  margin: 0;
  margin-block: 0;
  margin-inline: 0;
  background-color: rgb(255, 248, 248);
}

.page-image {
  height: 100%;
  width: 100%;
  pointer-events: none;
}

#illustration-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 80%;
  width: 100%;
  z-index: 1;
  visibility: hidden;
}

#illustration-image {
  z-index: 2;
}

#previous-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 5%;
  width: 10%;
  z-index: 3;
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0);
}

#previous-image {
  z-index: 4;
  background-color: rgba(255, 255, 255, 0);
}

#readAgain-box {
  position: fixed;
  top: 0;
  left: 0;
  height: 5%;
  width: 40%;
  z-index: 3;
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0);
}

#next-box {
  position: fixed;
  top: 0;
  left: 90%;
  height: 5%;
  width: 10%;
  z-index: 3;
  visibility: hidden;
  background-color: rgba(255, 255, 255, 0);
}

#next-image {
  z-index: 4;
  background-color: rgba(255, 255, 255, 0);
}

button {
  height: 100%;
  width: 100%;
  padding: 10%;
  border-width: 3px;
  border-style: outset;
  border-left-color: rgba(128, 128, 128, 0.3);
  border-top-color: rgba(128, 128, 128, 0.3);
  border-bottom-color: rgba(128, 128, 128, 0.7);
  border-right-color: rgba(128, 128, 128, 0.7);
  background-color: rgba(128, 128, 128, 0.4);
}

button:active {
  border-style: inset;
  border-left-color: rgba(128, 128, 128, 0.7);
  border-top-color: rgba(128, 128, 128, 0.7);
  border-bottom-color: rgba(128, 128, 128, 0.3);
  border-right-color: rgba(128, 128, 128, 0.3);
}

button:focus {
  outline: none;
}

#readAgain-button {
  padding: 0;
}

#text-box {
  position: fixed;
  top: 80%;
  left: 0;
  height: 20%;
  width: 100%;
  z-index: 1;
  overflow: scroll;
  visibility: hidden;
}

#text-inner-box {
  z-index: 2;
  padding: 5%;
}

h1 {
  padding-bottom: 5%;
  text-align: left;
  text-indent: 5%;
  font-family: "Georgia", "Times New Roman", "serif";
  font-style: normal;
  font-weight: bold;
  font-size: calc(20px + (24 - 20) * ((100vw - 360px) / (1600 - 360)));
  line-height: 150%;
}

.body-text {
  font-family: "Georgia", "Times New Roman", "serif";
  font-style: normal;
  font-size: calc(16px + (20 - 16) * ((100vw - 360px) / (1600 - 360)));
  line-height: 150%;
}

.narrative-text {
  text-align: left;
  text-indent: 5%;
}

.dedication {
  padding-bottom: 5%;
  font-style: italic;
}

#signatures {
  padding-top: 5%;
  text-indent: 0%;
  font-style: italic;
}

#ending {
  text-align: center;
  font-style: italic;
}

#readAgain-text {
  font-family: "Georgia", "Times New Roman", "serif";
  font-style: italic;
  font-size: calc(16px + (20 - 16) * ((100vw - 360px) / (1600 - 360)));
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  color: rgb(255, 246, 181);
}

.title {
  font-family: "Georgia", "Times New Roman", "serif";
  font-style: normal;
  font-weight: bold;
  font-size: calc(20px + (24 - 20) * ((100vw - 360px) / (1600 - 360)));
  line-height: 150%;
}

.subtitle {
  padding-bottom: 5%;
  font-family: "Georgia", "Times New Roman", "serif";
  font-style: italic;
  font-weight: bold;
  font-size: calc(20px + (24 - 20) * ((100vw - 360px) / (1600 - 360)));
  line-height: 150%;
}

.epilogue-lists {
  list-style-position: inside;
  padding-left: 5%;
}