@font-face {
font-family: 'Adler';
src: url('/fonts/Adler.ttf') format("truetype");
}
@font-face {
font-family: 'CALIBURN';
src: url('/fonts/CALIBURN13%20abandon.ttf') format("truetype");
}
@font-face {
font-family: 'RadioNewsman';
src: url('/fonts/RadioNewsman.ttf') format("truetype");
}
@font-face {
font-family: 'edosz';
src: url('/fonts/edosz.ttf') format("truetype");
}
@font-face {
font-family: 'OverdriveSunset';
src: url('/fonts/Overdrive Sunset.otf') format("opentype");
}
@font-face {
font-family: 'Scratchy';
src: url('/fonts/SCRATCHL.ttf') format("truetype");
}
@font-face {
font-family: 'rounddigitalio';
src: url('/fonts/round-digitalio.ttf') format("truetype");
}
@font-face {
font-family: 'Unique';
src: url('/fonts/Unique.ttf') format("truetype");
}
@font-face {
font-family: 'edosz';
src: url('/fonts/edosz.otf') format("opentype");
}
@font-face {
font-family: 'Prozak';
src: url('/fonts/prozak.ttf') format("truetype");
}
@font-face {
font-family: 'SpecialElite';
src: url('/fonts/SpecialElite.ttf') format("truetype");
}
@font-face {
font-family: 'DirtyEnough';
src: url('/fonts/DirtyEnough.ttf') format("truetype");
}
@font-face {
font-family: 'PunkKid';
src: url('/fonts/punkkid.ttf') format("truetype");
}
::selection {
  background: #270011;
  color: #d77898;
}
::-moz-selection {
  background: #270011;
  color: #d77898;
}
::-webkit-selection {
  background: #270011;
  color: #d77898;}
body {
font-family:Verdana, Helvetica;
color:#ffccdd;
background-color: #010001;
background-image: url("/images/background20.png");
background-repeat:repeat;cursor:url('/graphics/Cursor1.png'),auto;
scrollbar-color: #98d5c2 #090909;
scrollbar-width: thin;}
h1{font-family:'Prozak';font-size:25px;color:#98d5a8;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
h2{font-family:'PunkKid';color:#3b7c83;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
h4 {font-family:'RadioNewsman';color:#98d5a8;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
h3{font-family:'DirtyEnough';color:#3b7c83;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
h5,h6{font-family:'edosz';color:#98d5a8;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
p {font-size:13px;font-family:edosz;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
a {color:#98d5a8;text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
.blue {font-family:'Courier New', monospace;color:#3b7c83;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
.pink {font-family:'Courier New', monospace;color:#833b61;text-shadow: -1px -1px 0 #27000f, 1px -1px 0 #27000f, -1px 1px 0 #27000f, 1px 1px 0 #27000f;
}
.green {font-family:'Courier New', monospace;color:#98d5a8;text-shadow: -1px -1px 0 #002717, 1px -1px 0 #002717, -1px 1px 0 #002717, 1px 1px 0 #002717;
}
.red {font-family:'Courier New', monospace;color:#c31f1f;text-shadow: -1px -1px 0 #270000, 1px -1px 0 #270000, -1px 1px 0 #270000, 1px 1px 0 #270000;
}
.red2 {font-family:rounddigitalio;color:#c31f1f;text-shadow: -1px -1px 0 #270000, 1px -1px 0 #270000, -1px 1px 0 #270000, 1px 1px 0 #270000;
}
.red3 {font-family:'Courier New', monospace;color:#e82828;text-shadow: -1px -1px 0 #270000, 1px -1px 0 #270000, -1px 1px 0 #270000, 1px 1px 0 #270000;
}
a:hover {color:#dcf1e1;cursor:url('/graphics/Cursor2.png'),auto;}
img {width:50%;height:auto;}
.spoilerbutton {
  display: block;
  margin: 5px 0;
  background-color:rgba(0, 93, 84, 0.2);
  font-family: 'rounddigitalio';
  font-variant-caps: all-petite-caps;
  letter-spacing:0.3px;
  color:#ff1818;
  border:none;
  padding:10px;
  border-radius: 5px;
}
.spoilerbutton:hover{cursor:url('/graphics/Cursor2.png'),auto;}
.spoiler {
  overflow: hidden;
}

.spoiler>div {
  overflow: hidden;
  transition: all 1s ease;
}

.spoilerbutton[value="WARNING: This file is unsafe for those with photosensitive epilepsy"]+.spoiler>div {
  max-height: 0;
}

.spoilerbutton[value="Hide"]+.spoiler>div {
  max-height: 350px; /*use a big value here*/
}
.header {
  background-color: #0b161a;
  border: rgb(11, 22, 26, 0.8) 2px solid;
  border-radius:5px;
  padding: 15px;
  box-shadow:0 2px 2px 0 rgb(11, 22, 26, 0.8);
  background-image: url("/images/background21.png");
}
.footer {
  background-color: #1a0917;
  border: #0b161a 2px 0b161a;
  border-radius:5px;
  text-align:center;
  padding: 15px;
  margin-top: 8px;
  background-image: url("/images/background24.png");
  background-size: 500px;
}
* {
  box-sizing: border-box;
}
.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4, end) 900ms infinite;
  animation: ellipsis steps(4, end) 900ms infinite;
  content: "\2026";
  /* ascii code for the ellipsis character */
  width: 0;
}

@keyframes ellipsis {
  to {
    width: 40px;
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 40px;
  }
}
.menu {
  float: left;
  width: 20%;
}
.menuitem {
  background-image:url('/images/torn1.png');
  background-size:100px 50px;
  background-repeat: no-repeat;
  color:#98d5c2;
  padding: 2px;
  margin-top: 7px;
  line-height:0;
}
.menuitem2 {
  background-image:url('/images/torn2.png');
  background-size:100px 50px;
  background-repeat: no-repeat;
  color:#98d5c2;
  padding: 2px;
  margin-top: 7px;
  line-height:0;
}
.bioitem, .bioitem2, .bioitem3 {
  margin: 2%;
  padding:1%;
  margin-top: 7px;
  float: left;
  overflow-y:scroll;
  border-radius:0.5%;
}
.bioitem { background-image:url('/images/background24.png');
  background-size:contain;
  height:515px;
  width: 95%;}
.bioitem2 {height:270px;
  width: 25%;}
.bioitem3 { background-image:url('/images/background24.png');
  background-size:contain;
  height:370px;
  width: 65%;}
.digital {
  font-family: "rounddigitalio";
  font-size: 15px;
  color: #98d5c2;
  text-shadow:
    -1px -1px 0 #002717,
    1px -1px 0 #002717,
    -1px 1px 0 #002717,
    1px 1px 0 #002717;
}
.digital2 {
  font-family: "rounddigitalio";
  font-size: 15px;
  color: #f00;
  text-shadow:
    -1px -1px 0 #002717,
    1px -1px 0 #002717,
    -1px 1px 0 #002717,
    1px 1px 0 #002717;
}
.marker {
  font-family: "edosz";
  color: #98d5a8;
  text-shadow:
    -1px -1px 0 #1f000d,
    1px -1px 0 #1f000d,
    -1px 1px 0 #1f000d,
    1px 1px 0 #1f000d;
}
.main {
  float: left;
  width: 60%;
  padding: 0 20px;
  overflow: hidden;
}
.right {
  background-color: #1a0917;
  border:#0d0506 solid 2px;
  border-radius:5px;
  float: left;
  width: 20%;
  padding: 10px 15px;
  margin-top: 7px;
  background-image: url('/images/background24.png');
  background-repeat:repeat;
}
.biodesc2 {
  font-size: 15px;
  letter-spacing: -1px;
}
.bio0 {
  width: 30%;
  height: auto;
  overflow-y: auto;
}
.bio1 {
  width: 70%;
  height: auto;
}
.bio2 {
  width: 90%;
  height: auto;
}
.bio3 {
  width: 90%;
  height: auto;
}
.duobio1 {
  width: 48%;
  height: auto;
}
.book 
{width:75%;
margin:2% auto;
margin-top: -10%;
padding:20%;
background-image:url("/graphics/book.png");
background-size: cover;
margin-bottom:125px;
}
.book p {margin-top:12%;}
.book:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 1s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
.spacer {height:300px;width:0;}
@media only screen and (max-width:800px) {
  /* For tablets: */
.main {
    width: 80%;
    padding: 0;
  }
.right {
    width: 100%;
  }
.bioitem, .bioitem3 {
  height:650px;
  width: 95%;
  float: left;
  margin:5%;}
  
.bioitem2 {
  width: 0;
  height: 0;
  margin: 0;
}
.bio0 {
  width: 50%;
  height: auto;
  overflow-y: auto;
}
.bio2 {
  width: 65%;
  height: auto;
}
.bio3 {
  width: 45%;
  height: auto;
}
.spacer {
  height: 0;
  width: 0;
}}

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width: 100%;
  }
 .bioitem, .bioitem3 {
  height:650px;
  width: 95%;
  float: left;}
.bioitem2 {
  width: 0;
  height: 0;
  margin: 0;
}
.book {
  width: 80%;
  margin: 0, auto;
  margin-bottom: 0;
}.book p {
  margin-top: 15%;
}
.biodesc {
  font-size: 13px;
}
  .stroke {
    text-shadow:
      -1px -1px 0 #000,
      1px -1px 0 #000,
      -1px 1px 0 #000,
      1px 1px 0 #000;
  }
.biodesc {
  font-size: 11px;
  word-spacing: -1px;
}
.biodesc2 {
  font-size: 10px;
  letter-spacing: -1px;
}
.duobio1 {
  width: 48%;
  height: auto;
}
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }}

@media only screen and (max-width: 500px) {
.loading:after {
  height:0;
  width:0;
  display:none;
}}