body {
    background-color: rgb(0,0,0);
    text-align: center;
}
.portal {
  width: 320px;
  height: 240px;
  background-color: rgb(127,127,127);
  margin-top: 3px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  border: 3px solid rgb(255,0,255);
}
h1 {
    color: rgb(127,255,127);
    background-color: rgb(0,0,0);
  }

  h2 {
    color:rgb(255,255,0);
    background-color: rgb(0,0,0);
  }
  h3 {
    color: rgb(255,0,0);
    background-color: rgb(0,0,0);
  }
  h4{
    color: rgb(0,255,255);
    background-color: rgb(0,0,0);
  }

  h1, h2, h3, h4, {
    text-align: center;
  }

  .sfw {
    font-style: bold;
    font-size: 21px;
    text-align: left;
    color: rgb(0,0,255);

  }
  .nsfw {
    text-align: right;
    color: rgb(255,255,255);
  }


  .capbar{
    width: 320px;
    background-color: rgb(127,127,127);
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border: 3px solid rgb(255,0,255);
  }
  .soundbar{
    width: 320px;
    background-color: rgb(0,0,0);
    margin-left: auto;
    margin-right: auto;
    margin-top: 3px;
    padding: 20px;
    border: 3px solid rgb(255,0,255);
    
  } 
  .menubar {
    width: 320px;
    padding:20px;
    margin-top: 3px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgb(0,0,0);
    border: 3px solid rgb(255,0,255);
  }

  footer {
    width: 320px;
    background-color: rgb(0,0,0);
    margin-top: 8px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border: 3px solid rgb(255,0,255);
  }

  /*nav shiiiiii*/
.navblock {
  width: 320px;
  height: 320px;
  background-color: rgb(0,0,0);
  margin-top: 3px;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid rgb(255,255,255);
  text-align: center;
}
.buttons {
  width: 320px;
  height: 320px;
  border: 3px solid rgb(255,0,255);
  margin: 3px;
  transition-duration: 1618ms;
}

/*.row0{
margin: auto;
  border-top:1px solid rgb(127,255,0);
  border-bottom:1px solid rgb(127,255,0);
}
.row0:hover{
  margin: auto;
  border:1px solid rgb(0,0,0);
  }
*/
.row1{
margin: auto;
  border-top:1px solid rgb(127,255,0);
  border-bottom:1px solid rgb(127,255,0);
}
.row1:hover{
  margin: auto;
  border:1px solid rgb(0,0,0);
  }
.row2{
  border-top:1px solid rgb(127,255,0);
  border-bottom:1px solid rgb(127,255,0);
  margin: auto;
}
.row2:hover{
  margin: auto;
  border:1px solid rgb(0,0,0);
  }
.row3{
  border-top:1px solid rgb(127,255,0);
  border-bottom:1px solid rgb(127,255,0);
  margin: auto;
}
.row3:hover{
  margin: auto;
  border:1px solid rgb(0,0,0);
  }
.row4{
  border-top:1px solid rgb(127,255,0);
  border-bottom:1px solid rgb(127,255,0);
  margin: auto;
}
.row4:hover{
  margin: auto;
  border:1px solid rgb(0,0,0);
  }
.row5{
  border-top:1px solid rgb(127,255,0);
  border-bottom:1px solid rgb(127,255,0);
  margin: auto;
}
.row5:hover{
  margin: auto;
  border:1px solid rgb(0,0,0);
  }
.row6{
  border-top:1px solid rgb(127,255,0);
  border-bottom:1px solid rgb(127,255,0);
    margin: auto;
  }
.row6:hover{
    margin: auto;
    border:1px solid rgb(0,0,0);
    }
.char{
  width: 55px;
  height: 34px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.char:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.one {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.one:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.two {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.two:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.three {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.three:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.inv{
  width: 55px;
  height: 34px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.inv:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.four {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.four:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.five {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.five:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.six {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.six:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.log{
  width: 55px;
  height: 34px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.log:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.seven {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.seven:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.eight {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.eight:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.nine {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.nine:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.home{
  width: 55px;
  height: 34px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.home:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(277,0,255);
}
.star {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.star:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.zero {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.zero:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.sharp {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.sharp:hover {
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}

.skills{
  width: 55px;
  height: 34px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
  .skills:hover {
    width: 55px;
    height: 55px;
    margin: 3px;
    border: 3px solid rgb(255,0,255);
  }
.s1{
  width: 34px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.s1:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(0,255,255);
}
.s2{
  width: 34px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.s2:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,0);
}
.s3{
  width: 34px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.s3:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,0,255);
}
.s4{
  width: 34px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.s4:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(0,255,0);
}
.s5{
  width: 34px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(127,0,255);
}
.s5:hover{
  width: 55px;
  height: 55px;
  margin: 3px;
  border: 3px solid rgb(255,255,127);
}
/*end navigation shiiiii*/