/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */




body {

  background-color: black;
  color: #ffffff;
  font-family: monospace;
  letter-spacing: 1px;
  
}

#libraryButton { 
  margin: auto;
  text-decoration: none;
  background-image: url("https://i.imgur.com/bzs1I2b.gif"); 
  background-position-y: center;
  width: 95%;
  
}

#libraryButton:hover {
  transform: scale(1.003);
}

header {
  text-align: center;
  border-style: hidden hidden dotted hidden;
  border-color: #ff2da0;
}

h1 { 
  font-family: Karantina, monospace; 
  text-align: center; 
  color: #ff2da0;
  font-size: 6em;
  border-style: hidden;
  padding: 0px;
  margin-top: 0px;
  margin-bottom: 0.1em;
  text-shadow: 
  2px 0 1px black,
  0 2px 1px black,
  -2px 0 1px black,
  0 -2px 1px black;

} 

h3 {
  font-size: 1.6em;

}

h4 {
  font-size: 3em;
  color: #2dff8c;
  text-align: center;
  border-style: solid;
  padding: 1em;
  text-shadow: 0px 0px 0.5em black;
  
}

a:link { 
  color:#ff2da0;
  
}

a:visited {
  color:#ff2da0;
  
}

a:hover {
  color:#f52dff;
  
}

.subTitle {
  font-family: Karantina, Monospace;
  font-size: 2em;
  text-shadow: 
  2px 0 1px black,
  0 2px 1px black,
  -2px 0 1px black,
  0 -2px 1px black;
  
}

.noUnderline {
  text-decoration: none;
  
}
.pronouns {
  vertical-align: super;
  font-size: 0.38em;
  color: grey;
  
}

.DESCRIPTION {
  border-style: hidden hidden dotted hidden;
  border-color: #ff2da0;
  padding: 0.2em;
  text-align: left;
  
}

.STORYDESCRIPTION {
  border-style: hidden hidden hidden hidden;
  border-color: #ff2da0;
  padding: 0.2em;
  text-align: left;
}

.content {
  border-style: solid;
  border-color: #ff2da0;
  border-radius: 4px;
  max-width: 80%;
  margin: auto;
  background-color: rgb(255 45 160 / 30%);
  text-align: center;
  
}

.LIBRARY {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-style: hidden hidden dotted hidden;
  border-color: #ff2da0;
  
}

.BOOK {
  display: flex;
  border-style: solid;
  border-radius: 8px;
  border-width: 2px;
  border-color: #ff2da0;
  margin: 0.4em;
  text-decoration: none;
  text-align: left;
  
}

.BOOK:hover {
  transform: scale(1.003);
  background-color: rgb(255 255 255 / 10%);
  
}
a.BOOK:link {
  color: #2dff8c;
  
}

a.BOOK:hover {
  color: #81ffba;
  
}

a.BOOK:visited {
  color: #2dff86;
  
}

.BOOKRight {
  display: flex;
  flex-direction: row-reverse;
  border-style: solid;
  border-radius: 8px;
  border-width: 2px;
  border-color: #ff2da0;
  margin: 0.4em;
  text-decoration: none;
  
}

.BOOKRight:hover {
  transform: scale(1.003);
  background-color: rgb(255 255 255 / 10%);
}

a.BOOKRight:link {
  color: #2dff8c;
  
}

a.BOOKRight:hover {
  color: #81ffba;
  
}

a.BOOKRight:visited {
  color: #2dff86;
  
}

.coverImage {
  width: 20em;
  height: 30em;
  padding: 0.4em;
  border-radius: 7px;
  
}

.LibraryTitle {
  font-size: 6em;
  padding: 0em;
  margin: 0em;
  color: #2dff86;
  text-align: left;
  
}

.LibraryTitleRight {
  font-size: 6em;
  padding: 0em;
  margin: 0em;
  text-align: right;
  color: #2dff86;
  
}

.LibraryAuthor {
  font-size: 4em;
  margin: 0em;
  text-align: left;
  
}

.LibraryParagraph {
  font-size: 2em;
  font-family: Cutive Mono, monospace;
  
}


.LibraryAuthorRight {
  font-size: 4em;
  margin: 0em;
  text-align: right;
  
}


/* ALL THE STUFF BELOW IS FOR THE E-READER */

#chapterTitle {
  font-size: 4em;
  padding: 0px;
  margin: 0px 0px 5px 0px;
  border-style: hidden hidden dotted hidden;
  border-color: #ff2da0;
  
}

.eReader {
  display: flex;
  flex-direction: row;
  
}
.tableOfContents {
  display: flex;
  flex-direction: column;
  font-size: 1em;
  font-family: Karantina, monospace;
  text-align: left;
  border-style: solid;
  border-radius: 8px;
  padding-right: 4px;
  padding-left: 4px;
  margin-right: 6px;
  border-color: #ff2da0;
  min-width: fit-content;
  
}

select {
  font-size: 2em;
  border: solid #ff2da0;
  border-radius: 8px;
  font-family: monospace;
  background-color: rgb(0 0 0 / 0%);
  color: white;
  text-align: left;
  
}

button {
  font-size: 2em;
  border: solid #ff2da0;
  border-radius: 8px;
  font-family: monospace;
  background-color: rgb(0 0 0 / 0%);
  color: white;
  text-align: left;
  margin-bottom: 5px;
  min-width: fit-content;
  
}

button:hover {
  background-color: rgb(255 255 255 / 10%);
  cursor: pointer;

}

label {
  font-size: 4em;
  text-align: left;
  font-family: Karantina, monospace;
  
}

option {
  font-size: 1em;
  border-style: hidden hidden dashed hidden;
  border-width: 1px;
  border-color: grey;
  
}

option:hover {
  background-color: rgb(255 255 255 / 10%);
  
}


#chapter {
  font-size: 1.5em;
  
}

.STORY {
  border-style: solid;
  border-color: #ff2da0;
  border-radius: 8px;
  padding: 5px;
  max-width: stretch;
  align-self: center;
  
}