@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: 'VeteranTypewriter';
src: url('/fonts/VeteranTypewriter.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: 'Cuomotype';
src: url('/fonts/Cuomotype.otf') format("opentype");
}
::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/background1.gif");
background-size:200px;
background-repeat:repeat;cursor:url('/graphics/Cursor1.png'),auto;
scrollbar-color: #98d5c2 #090909;
scrollbar-width: thin;}
h1{font-family:'CALIBURN';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:'OverdriveSunset';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:'Unique';color:#3b7c83;text-shadow: -1px -1px 0 #001d27, 1px -1px 0 #001d27, -1px 1px 0 #001d27, 1px 1px 0 #001d27;
}
h5,h6{font-family:'VeteranTypewriter';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:VeteranTypewriter;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:50%;}
.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;
  background-image: url("/images/scanlinesbg.jpg");
}
.footer {
  background-color: #1a0917;
  border: #0b161a 2px 0b161a;
  border-radius:5px;
  text-align:center;
  padding: 15px;
  margin-top: 8px;
  background-image: url("/images/backgroundsemitransparent27.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 {
  color:#98d5c2;
  padding: 2px;
  margin-top: 7px;
  border-bottom: 1px solid #d2ffcc;
  line-height:0;
}
.bioitem, .bioitem2, .bioitem3 {
  margin: 2%;
  padding:1%;
  margin-top: 7px;
  float: left;
  border-radius:0.5%;
}
.bioitem { background-image:url('/images/backgroundsemitransparent20.png');
  background-size:contain;
  height:270px;
  width: 65%;
  overflow-y:scroll;}
.bioitem2 {height:270px;
  width: 25%;
  overflow:hidden;}
.bioitem3 { background-image:url('/images/backgroundsemitransparent20.png');
  background-size:contain;
  height:370px;
  width: 65%;
  overflow-y:scroll;}
.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;
}
.typewriter {
  font-family: "Cuomotype";
  color: #bd8a9e;
  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/backgroundsemitransparent20.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: 350px;
}
.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: 300px;
}
}

@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); }}