@font-face{
  font-family:"pixel";
  src: url("/assets/fonts/determination.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;}
@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;}
body{
    background-image:url("assets/images/agony.jpg");
    background-attachment:fixed;
    color:#b1ada8;
    font-family:pixel, monospace;}
.panel{
    background-color:#5e0000;
    border: 3px solid #505050;}
#maincontent {
  display: grid;
  grid-template:
    "header header"
    "tab tab" /* row 1 */
    "sidebar main"  /* row 2 */
    "footer footer" /* row 3 */
	/ 1fr 3fr;  /* column widths (1fr = one fraction) */
  grid-gap: 10px;   /* (optional) space between areas */
  text-align:center;
  max-width:100%;
  width:1100px;
  margin:auto;
  height:auto;}
.marquee{
    overflow:hidden;
    font-family:"Bluescreen", serif;
    font-size:50px;
    font-weight:600;
    padding:8px 0;
    color:#198514;
    background-color:#090909;
    border:0px;}
/* assign your elements to the areas you defined in the grid-template rule: */
.header { grid-area: header; }
.aside { grid-area: sidebar; background-image:url("assets/images/redfaces.gif");}


.main{grid-area:main;
  background-color: rgba(94, 0, 0, 0);}
.intro {
  background-image:url('assets/images/theslime.jpg');
  display:grid;
  grid-template:
      "blank6 fishtank eyeball"
      "thatsme blank2 blank3"
      "pooltable skellydance pronouns" / 1fr 2fr;
  grid-gap:5px;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 30% 100%, 0 60%);
}

.footer { grid-area: footer;

}
.tab{grid-area:tab;}
#welcome{
  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:30px;
  border: 2px solid #505050;
  transform:rotate(-15deg);
  padding:5px;
  position:absolute;
  display:inline-block;
  top:180px;
  left:400px;
  z-index:2;}
.options{
    display:grid;
    grid-template:auto auto auto auto; 
    grid-gap:10px;
    grid-auto-flow:column;
}
.options div{
  text-align:center;
}
.thatsme{grid-area:thatsme;
height:100px; width:300px;font-size:20px; position:relative; left:20px;
  background-color:#505050;
  border:2px solid #2c0000;}
.fishtank{grid-area:fishtank; position:relative; left:50px;}
.blank2{grid-area:blank2;}
.blank3{grid-area:blank3;}
.pooltable{grid-area:pooltable; position:relative; right:-120px;}
.eyeball{grid-area:eyeball; position:relative; right:-75px; top:70px;}
.pronouns{grid-area:pronouns;
  height:125px;
  width:fit-content;
  position:relative;
  right:20px;
  bottom:70px;
  background-color:#505050;
  border:2px solid #2c0000;}
.blank6{grid-area:blank6;}
.skellydance{
  grid-area:skellydance;
  position:relative;
  top:-55px;
}
#drawingofme{
    float:left;
    height:95%;
    margin:5px;
}
.putershapes{
  display:inline-block;
  position:relative;
  bottom:80px;
}
.name{
  display:inline-block;
  position:relative;
  transform:rotate(-15deg);
  width:400px;
  left:-100px;
  top:45px;
}
.guestbook{
  display:inline-block;
  width:400px;
  height:400px;
  position:relative;
  left:75px;
}
.guestbook iframe{
  height:350px;
}
.guestbookref {
  display:inline-block;
  position:relative;
  bottom:75px;
}
.guestbookref a{color:#b1ada8;}
#homoonline{width:300px;position:relative; right:20px; bottom:20px;display:inline-block;}
.myfriends {
  font-size:2em;
  text-align:center;
  height:500px;
}
.myfriends div{
  height:350px;
  display:inline-block;
  position:relative;
  top:20px;
  margin-left:25px;
  margin-right:25px;
  transition:1s;
  color:#b1ada8;
}
.myfriends div img{
  height:250px;
  width:250px;
  position:relative;
  top: 40px;
  
}
.myfriends div span{
  border: 3px dotted #b1ada8;
  padding:10px;
  padding-left:20px;
  padding-right:20px;
  position:relative;
  top:20px;
}
.myfriends div:hover{
  transition:1s;
  transform:scale(1.1);
}