/* 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." */

@font-face {
  font-family: 'LibreBarcode39';
  src: url(https://daedalusmachine.neocities.org/FONTS/LB39.ttf);
}

@font-face {
  font-family: 'Courier';
  src: url(https://daedalusmachine.neocities.org/FONTS/COUR.ttf);
}

@font-face {
  font-family: 'Helvetica';
  src: url(https://daedalusmachine.neocities.org/FONTS/HELV.ttf);
}

@font-face {
  font-family: 'EBGaramond';
  src: url(https://daedalusmachine.neocities.org/FONTS/EBG.ttf);
}

@font-face {
  font-family: 'IBMPlexSans';
  src: url(https://daedalusmachine.neocities.org/FONTS/IBMPS.ttf);
}

@font-face {
  font-family: 'Verdana';
  src: url(https://daedalusmachine.neocities.org/FONTS/VERD.ttf);
}

@font-face {
  font-family: 'LibreBaskerville';
  src: url(https://daedalusmachine.neocities.org/FONTS/LBBV.ttf);
}

@font-face {
  font-family: 'Roboto';
  src: url(https://daedalusmachine.neocities.org/FONTS/ROBO.ttf);
}

@font-face {
  font-family: 'IBMPlexSerif';
  src: url(https://daedalusmachine.neocities.org/FONTS/IBMPSER.ttf);
}

* {
  box-sizing: border-box;
}

figure {
  display: inline-block; 
}

body {
  background-color: black;
  font-family: Courier, monospace;
  opacity: 0;
  transition: opacity .5s;
}

/* custom divs */

.NAME {
  font-family: LibreBarcode39;
  font-size: 350%;
  background-color: transparent;
  transition: 1s;
}

.NAME:hover {
  font-family: LibreBarcode39;
  font-size: 450%;
  font-weight: bold;
  background-color: transparent;
  padding: 0.25em;
  border-width: 0.25em;
  cursor:pointer;
}

.GOAWAYFOREVER {
  margin-top: -100%;
  transition: 2s;
}

.backButton {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  left: 14.5%;
  bottom: 2em;
  padding: 1%;
  width: 7%;
  height: 7%;
  text-align: center;
  background-color: black;
  transition: 1s;
  vertical-align: middle;
}

.backButton:hover {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  left: 14.5%;
  bottom: 1.75em;
  padding: 1.25%;
  width: 7.5%;
  height: 7.5%;
  text-align: center;
  vertical-align: middle;
}

.nextButton {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  right: 13%;
  bottom: 2em;
  padding: 1%;
  width: 7%;
  height: 7%;
  text-align: center;
  background-color: black;
  transition: 1s;
  vertical-align: middle;
}

.nextButton:hover {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  right: 13%;
  bottom: 1.75em;
  padding: 1.25%;
  width: 7.5%;
  height: 7.5%;
  text-align: center;
  vertical-align: middle;
}

.backButtonBig {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  left: 14.5%;
  bottom: 2em;
  padding: 1%;
  width: 9%;
  height: 9%;
  text-align: center;
  background-color: black;
  transition: 1s;
  vertical-align: middle;
}

.backButtonBig:hover {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  left: 14.5%;
  bottom: 1.75em;
  padding: 1.25%;
  width: 10%;
  height: 10%;
  text-align: center;
  vertical-align: middle;
}

.nextButtonBig {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  right: 13%;
  bottom: 2em;
  padding: 1%;
  width: 10.5%;
  height: 10.5%;
  text-align: center;
  background-color: black;
  transition: 1s;
  vertical-align: middle;
}

.nextButtonBig:hover {
  border-width: 0.25em; 
  border-style: solid;
  float: right;
  position: fixed;
  right: 13%;
  bottom: 1.75em;
  padding: 1.25%;
  width: 11%;
  height: 11%;
  text-align: center;
  vertical-align: middle;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: #333333;
  height: 0.5rem;
}

input[type="range"]::-moz-range-track {
  background: #333333;
  height: 0.25em;
}

input[type="range"]::-webkit-slider-thumb {
  background: #333333;
  height: 0.5rem;
  cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
  background: #333333;
  height: 0.5rem;
  cursor: pointer;
}

.uiOne {
  background-color: #3a3a3a;
  float: left;
  left: 1em;
  width: 12.5%;
  padding: 0.25%;
  position: fixed;
  height: 100%;
  transition: 1s;
  overflow-y: scroll;
  overflow-x: hidden;
}

.uiTwo {
  background-color: #111111;
  float: left;
  width: 100%;
  height: 15%;
  padding: 3%;
  display: block;
  overflow-y: scroll;
  overflow-x: hidden;
}

.uiThree {
  background-color: #000000;
  color: #c5c5c5;
  float: left;
  width: 100%;
  height: 84.25%;
  padding: 1%;
  display: block;
  line-height:150%;
  font-size:95%;
  overflow-y: scroll;
  overflow-x: hidden;
}

.uiFour {
  background-color: #000000;
  color: #dddddd;
  float: left;
  width: 80%;
  height: 100%;
  padding: 1%;
  margin-left: 12.5%;
  overflow-y: scroll;
  overflow-x: scroll;
}

.LIST:hover {
  text-decoration: underline; 
  cursor: pointer;
}

.footnoteHover{
  cursor: help; 
}

.footnoteContent {
  display:none;
  position: absolute;
  transition: fade 2s;
  background-color: black;
  padding: 0.2em;
  border-width: 0.1em;
  border-style: solid;
  width: 15%;
  animation-name: footnoteCreator;
  animation-duration: 1s; 
  margin:0px auto;
  overflow:auto;
}

@keyframes footnoteCreator {
  0% {width: 0%; height: 0%; border-width: 0.1em; border-style: solid;}
  100% {width: 15%; border-width: 0.1em; border-style: solid;}
}

.footnoteHover:hover > .footnoteContent {
  display: inline-block;
  z-index: 1;
}

.inPlainSight {
  text-decoration: none;
  cursor: help;
  color: inherit;
}

/* Characters */

.TERM {
  color: #00ff00;
  border-color:#00ff00;
}

.LIMIT {
  font-weight: bold;
}

.HAI {
  color: #ff0000;
  border-color:#ff0000;
}

.DIA {
  color: #ea7300; 
}

.NAR0 {
  color: #ffffff;
}

.NAR0A {
  color: #999999;
  font-family: Verdana;
}

.NAR0B {
  color: #7f7f7f;
  font-family: Verdana;
}

.NAR0C {
  color: #999999;
}

.NAR1 {
  color: #000000;
  border-color: #ffffff;
}

.NAR1A {
  background-color: white;
  border-color: #000000;
}

.NAR2 {
  color: #000000;
  border-color: #ffffff;
  font-family: Verdana;
}

.NAR2A {
  background-color: white;
  border-color: #000000;
}

.NAR3 {
  color: #000000;
  border-color: #efefef;
  font-family: Verdana;
}

.NAR3A {
  background-color: #efefef;
  border-color: #000000;
}

.NAR4 {
  color: #666666;
  border-color: #666666;
  font-family: Verdana;
}

.NAR4A {
  background-color: #cccccc;
  border-color: #000000;
}

.NAR5 {
  color: #2d2d2d;
  border-color: #2d2d2d;
  font-family: Verdana;
}

.CH1 {
  color: #c80000;
  border-color:#c80000;
}

.CH2 {
  color: #0f847c;
  border-color:#0f847c;
}

.CH3 {
  color: #7500ff;
  border-color:#7500ff;
}

.CH4 {
  color: #b694f2;
  border-color:#b694f2;
}

.CH5 {
  color: #ccab22;
  border-color:#ccab22;
}

.SYNE {
  color: #ffcc33;
  border-color: #ffcc33;
  font-family: IBMPlexSans;
}

.VIS1 {
  color: #ffc000;
}

.VIS2 {
  font-family: LibreBaskerville; 
  font-size: 140%;
}

.VIS3 {
  font-family: Verdana; 
}

.MARCY {
  color: #921911; 
}

.MARCYfont {
  font-family: Verdana; 
  font-size: 40%;
}

.PLU {
  color: #666666;
  border-color: #666666;
}

.vash {
  color: #9e009e; 
}

.PHOEBE {
  color: #4a0000; 
}

.TRI1 {
  color: #b506fe;
}

.TRI2 {
  color: #ff7c00;
}

.VEL {
  color: #24247c;
}

.TRUTH {
  color: #00ffff; 
}

.SENSE {
  color: #ff7f00; 
}

.OCEAN {
  color: #0087ff; 
}

.NARRATOR {
  color: #000000;
  font-family: IBMPlexSerif;
}

.SUR {
  color: #273442;
}

.useRobotoWhateverManIDontEvenGiveAShitThisClassWontAppearMoreThanOnce {
  font-family: Roboto;
}

/* Nic Cage */

.NicCage {
  color: #cccccc;
}