@font-face{font-family:pc99;
src:url(pc99.ttf);

}
body {
 padding-top: 12px;
 background-color: #4f0862;
 color:  #4f0862 ;
 font-family: pc99;
 font-size: 14px;
 text-align: center;
 height: calc(100% - 12px);
 /*background-image: url( "https://sninkygle.neocities.org/the%20two%20moons.gif" );*/
 color:rgb(23, 32, 42);
 background-size: cover;
 margin: 0px;
 image-rendering:pixelated; image-rendering:-moz-crisp-edges;
}
p{
  opacity: 1;
color: #06c985;
  font-size: 20px;
transform: rotateX(-2.6deg) rotateY(.7deg) rotateZ(-4.9deg);

}
.main {
opacity: 0.7;
 background-color: #000000;
  width: 720px;
  max-width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: #000000;
  max-height: calc(100vh - 113px);
  overflow-y:scroll;
  margin: auto;
  padding: 10px;
 }

.top {
  color: #06c985;
  font-size: 50px;
transform: rotateX(11.6deg) rotateY(33.87deg) rotateZ(-3.9deg);

  text-align: center;
  text-shadow:2px 2px #034eb4

}
.nav ul {
 list-style-type: none;
 margin: auto;
 padding: 0;
 background-color: #E5D1FF;
 color:  #B999E7 ;
 height: 30px;
 border-style: solid;
 border-width: 1px;
 border-color: #B999E7;
 text-align: center;
}
.nav li {
 display: inline-block;
 text-align: center;
 padding: 6px;
 margin: auto;
}

p {
  opacity: 1;
 margin: 19px;
 padding: 5px;
 text-align: center;
 line-height: 1.15em;
text-shadow:1px 1px #034eb4;
}

b {
  color: #B999E7;
}

h1 {
 background-color: #397bda;
 color: #B999E7;
 width: 670px;
 height: 30px;
 border-style: solid;
 border-width: 1px;
 border-color: #dcd50b;
 text-align: center;
 margin: auto;
text-shadow:2px 2px #034eb4
}

.nav h2 {
 margin: auto;
margin-top: 24px;
 margin-left: 24px;
 margin-right: 24px;
 background-color: #397bda;
 color: #B999E7;
 border-style: solid;
 border-width: 1px;
 border-color: #dcd50b;
 text-align: center;
 padding: 3px;
 text-shadow:2px 2px #034eb4

}

.nav h3 {
 margin: auto;
 margin-left: 74px;
 margin-right: 74px;
 background-color: #397bda;
 color: #B999E7;
 border-style: solid;
 border-width: 1px;
 border-color: #dcd50b;
 text-align: center;
 padding: 3px;
}

a:link, a:link:active {
  color:   #08918b  ;
  text-decoration: underline;
  font-family: "pc-9800";
}

a:visited, a:visited:active {
  color: #e10e81;
  text-decoration: underline;
}

a:hover {
 text-decoration: solid;
}

b {
  color: #B999E7;
}

.strike {
  display: inline-block;
  text-decoration: line-through;
}

.center {
  display: inline-block;
  padding: 10px;
}

@media only screen and (max-width: 720px) {
  .main {
    padding: 0;
    max-height: 100%;
    border-left: none;
    border-right: none;
  }
  body {
    background-size: 100% auto;
  }
.glitch {
      color: #9cd9d0;
      font-size: 100px;
      margin: 0 auto;
      width: 400px;
    }
}