body{
 font-family:pixel, monospace; 
}
@font-face{
  font-family:"Bluescreen";
  src: url("/assets/fonts/blue_screen/bluescreen.ttf") format("truetype");
  src: url("/assets/fonts/blue_screen/bluescreen.woff") format("woff");
  src: url("/assets/fonts/blue_screen/bluescreen.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
@font-face{
  font-family:"dyslexic";
  src: url("/assets/fonts/OpenDyslexic-Regular.ttf") format("truetype");
  src: url("/assets/fonts/OpenDyslexic-Regular.woff") format("woff");
  font-weight:normal;
  font-style:normal;
}
@font-face{
  font-family:"pixel";
  src: url("/assets/fonts/determination.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}
@font-face{
  font-family:"pressstart";
  src:url("/assets/fonts/PressStart2P.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}
@font-face{
  font-family:"pleasework";
  src:url("/assets/fonts/pixel.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}
@font-face{
  font-family:"fixedsys";
  src:url("/assets/fonts/fixedsys.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}
body {
  background-image: url("/assets/images/agony.jpg"); 
  background-attachment: fixed;
  color:#b1ada8;
}

.mainpage{
  position:relative;
  float:none;
  width:1200px;
  overflow:hidden;
  justify-content:center;
  margin:auto;
}

#welcome{
  text-align:center;
  font-family: monospace;
  color:#c7c7c7;
  text-shadow:1px 1px 0 #8b0000, 1px -1px 0 #8b0000, -1px -1px 0 #8b0000, -1px 1px 0 #8b0000;
  font-size:50px;
  position:relative;
  border: 2px solid #505050;
  display: inline-block;
  transform:rotate(-15deg);
  padding:5px;
  left:500px;
  z-index:4;
}
.panel{
  background-color:#5e0000;
  border:3px solid #505050;
  z-index:0;
}
#patternpanel{
  position:relative;
  height:800px;
  width:350px;
  float:right;
  top:-100px;
  z-index:0;
  background-image: url("/assets/images/theslime.jpg");
}
#pronouns{
 position:relative;
 float:right;
 height:200px;
 width:250px;
 transform:translate(-330px, 130px) skew(15deg, 0deg);
 font-size:125%;
 color:#b1ada8;
 text-align:center;
 font-family:fixedsys;
}
#pronouns p, #pronouns h2{
  transform:skew(-15deg, 0deg);
}
.drawingofme{
  height:215px;
  width:500px;
  position:relative;
  transform:translate(0px, -130px);
  border-right:none;
}
#imageofme{
  float:left;
  position:relative;
  width:200px;
  padding:20px;
}
#thatsme {
  position:absolute;
  float:left;
  transform: skew(0deg, -15deg) translate(0px, -75px);
  width:50%;
}
#fagdyke{
  text-align:center;
  font-family:dyslexic, sans-serif;
  font-size:160%;
  padding:15px;
  color:#c7c7c7;
  text-shadow:1px 1px 0px #505050, -1px -1px 0px #505050, 1px -1px 0px #505050, -1px 1px 0px #505050;
}
#likes{
  float:right;
  position: relative;
  width:350px;
  height:550px;
  text-align:center;
  transform:translate(356px, -500px);
}
#likes p{
  line-height:1.8;
  font-size:115%;
}
#name{
  width:570px;
  float:left;
  position:relative;
  font-size: 125%;
  text-align:center;
  line-height:1.5;
  transform:translate(0px,-650px);
}
.blinkieseparation{
  position:absolute;
  top:875px;
}
.blinkieseparation img{
  width:397px;
}
.myfriends{
  position:relative;
  height:500px;
  width:1200px;
  text-align:center;
  transform:translate(0px, -550px);
  display:inline-block;
}
.frend{
  width:auto;
  display:inline-block;
  margin-left:20px;
  margin-right:20px;
  position:relative;
  transition:1s;
}
.frend img{
  width:300px;
  height:300px;
}
.name{
  padding:5px;
  padding-left:20px;
  padding-right:20px;
  border:3px dotted #b1ada8;
}
.frend:hover{
  transition: 1s;
  transform: scale(1.1);
}