:root {
  --light-blue: #90D5FF;
  --light-purple: #AF69EE;
  --dark-orange: #8B4000;
}

html {
 background: rgb(10, 10, 10);
 font-family: regular2;
 color: white;
}

.next { /* this works absolutely wonderful, but: the width leaks out into empty space of the page which is something i need do to about */
  display: block;
  width: 100%;
  max-width: 100%;
  height: 270px;
  box-sizing: border-box;
  background-image: url('/img/storyimg/hallwaynext.gif'); 
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}

.nextnotext { /* this works absolutely wonderful, but: the width leaks out into empty space of the page which is something i need do to about */
  display: block;
  width: 100%;
  max-width: 100%;
  height: 270px;
  box-sizing: border-box;
  background-image: url('/img/storyimg/hallway.webp'); 
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}

.next:hover { /* for ++interactiveness++ insert sparkles */
  opacity: 80%;
  cursor: pointer; /* i have no idea what the other cursor names are but this will do for now */
}

.nextnotext:hover { /* for ++interactiveness++ insert sparkles */
  opacity: 80%;
  cursor: pointer; /* i have no idea what the other cursor names are but this will do for now */
}

.label {
  font-size: 0.7em;
  opacity: 0.5;
  display: block;
  margin-bottom: 2px;
  font-family: regular2;
  letter-spacing: 0.05em;
}

.maddison .label {
  text-align: right;
}

/* gap between different speakers */
.gap {
  margin-top: 0.8rem;
}

.chat { /* woa... chatlogess */
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.msg { /* woa.. message bubbl */
  display: inline-block;
  max-width: 75%;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-size: 1.1em;
  line-height: 1.5;
  clear: both;
  }
  
/* characters */
.narrator {
  font-family: regular;
  color: white;
  border-left: 3px solid white;
  border-right: 3px solid white;
  background: #303234;
  align-self: center;
}

.bb {
  font-family: regular;
  color: var(--light-blue);
  border-left: 3px solid var(--light-blue);
  background: rgba(144, 213, 255, 0.05);
  align-self: flex-start;
}

.maddison {
  font-family: regular;
  color: pink;
  border-right: 3px solid pink;
  background: rgba(255, 182, 193, 0.05);
  align-self: flex-end;
  text-align: right;
}

.circa {
  font-family: regular2;
  color: #4477cc;
  border-left: 3px solid #4477cc;
  background: rgba(68, 119, 204, 0.05);
  align-self: flex-start;
}

.bb404 { /* if the reader decides to, for some reason, stray from the website's paths */
 font-family: unorthodox;
 font-size: 3em;
 padding-left: 15%;
 color: var(--light-blue);
}

.maddison404 { /* if the reader decides to, for some reason, stray from the website's paths */
  font-family: regular;
  padding-left: 20%;
  font-size: 2.5em;
  color: pink
}

/* other stuff/miscellaneous */
.wip {
  border: solid yellow 10px;
  font-family: regular;
  display: inline-block; /* makes it so it doesn't extend all the way to the other side of the page */
  color: orange;
  font-size: 3em;
}

h1 {
  padding-left: 15%;
}

.centered {
  display: block;
  margin: 0 auto;
}

@font-face {
  font-family: 'regular';
  src: url('/fonts/regular.woff2') format('woff2'), url('/fonts/regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }
  
@font-face {
  font-family: 'regular2';
  src: url('/fonts/regular2.woff2') format('woff2'), url('/fonts/regular2.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }
  
  @font-face {
  font-family: 'unorthodox';
  src: url('/fonts/unorth.woff2') format('woff2'), url('/fonts/unorth.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }

@font-face {
  font-family: 'crystal';
  src: url('/fonts/tivan.woff2') format('woff2'), url('/fonts/tivan.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }
  
@font-face {
  font-family: 'ovarian';
  src: url('/fonts/mara.woff2') format('woff2'), url('/fonts/mara.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  }