@font-face{
  font-family: PTMono;
  src: url(/fonts/PTMono-Regular.ttf);
}
@font-face{
  font-family: Freakshow;
  src: url(/fonts/freakshow.regular.ttf);
}
@font-face{
  font-family: diediedie;
  src: url(/fonts/diediedie.regular.ttf);
}
@font-face{
  font-family: zombieholocaust;
  src: url(/fonts/zombie-holocaust.regular.ttf);
}
.flex-container{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-content: space-between;
}
h1{
  text-align: center
}
a:link{
  color: #a18a06;
}
a:visited{
  color: #a6450d;
}
a:hover{
  color: #829e05;
}
p.smallText { 
  padding: 0px 50px 0px 50px;
}
p.longText{
  padding: 20px 0px 0px 0px;  
}
/*classes for divboxes, the Page class has a nice yellowed color that calls to mind aged books. The main style class may receive Additonal Stylistic choices, but I don't want to overload the main class and strangle other creativity.*/
div.mainStyle{
 margin: 0 15% 0 15%;
}
div.Page{
  margin: 0% 15% 0% 15%;
  padding: 1.5% 1.4% 1.5% 1.4%;
  color: #000000;
  background-color: #f9ef7a;
  border-color: #bcb134;
  border: 5px;
  border-radius: 10px;
}
div.Notes{
  margin: 0% 15% 0% 15%;
  padding: 1.5% 1.4% 1.5% 1.4%;
  color: #000000;
  background-color: #6a686b;
  border-color: #464547;
  border: 5px;
  border-radius: 10px;
}
div.Notes a:link{
  color: #db1ac8;
}
div.Notes a:visited{
  color: #db1a67;
}
div.Notes a:hover{
  color: #ba5bb0;
}

div.marquee{
  position: relative;
  animation: marquee 5s linear 2s infinite normal;
  margin: 0% 15% 0% 15%;
}

@keyframes marquee{
  from {right: 100%;}
  to {right: 0%;}
}

body {
  word-wrap: break-word;
  background-color: #390252;
  color: #e8b3df;
  font-family: PTMono;

}
footer {
  margin: 0px 30% 0px 30%;
  text-align: center;
  background-color: #15011f;
  }