* {
  box-sizing: border-box;
}

body {
  background-color: black;
  color: white;
  font-family: 'Brush Script MT', cursive;
  overflow-x: hidden;
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 5rem; 
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  background: center / cover no-repeat url('/Assets/NebulaBG.webp');
}

header {
  position: absolute;
  justify-content: center;
  display: flex;
  top: 2.5rem;
  left: 0;
  width: 100%;
  text-align: center; 
  padding: 1rem;
}

header h1 {
  width: fit-content;
}

.Book-Section {
  padding: 0 20rem;
}

[id^="Page"] {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.Invisible-Page {
  display: none !important;
  transition: display 0.3s allow-discrete;
}

.Visible-Page {
  display: flex !important;
  transition: display 0.3s allow-discrete;
}

.Book-Right-Side-Section, .Book-Left-Side-Section {
  align-content: center;
  padding: 1rem;
  width: 50%;
}