html {
  scroll-behavior: smooth;
}

body {
    background-color: #000000;
    /*background-image: url(../image/bg.jpg);*/
    background-repeat: repeat;
  background-attachment: fixed;
  background-size: cover;
  color:white;
}
h1 {
  font-family: 'Ubuntu', sans-serif;
  color:white;
}
h3 {
  font-family: 'Russo One', sans-serif;
  color:white;
}
pre {
  font-family: 'Ubuntu', sans-serif;
  color:white;
  font-size: 24px;
}

.side-bar{
  right: 0;
  left: 0;
  top: 0;
  margin-left: 5% auto;
  margin-right: 5% auto;
  margin-top: 0px;
  height: 100px;
  position: fixed;
  background-image: url(image/bg-grad.png);
}

.main{
  height:80%
}

a:link, a:visited {
  background-color: black;
  color: rgb(103, 230, 198);
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: rgb(68, 136, 240);
  color: rgb(236, 66, 35);
}

  /*menu back----------------------------*/
  .mback {
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    top:0%;
    left:0%;
  }
  .mback .img-h {
    width: 240px;
    height: 90px;
    display: table;
    position: fixed;
    z-index: -1;
  }
  .mback .img-nh{
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    
  }
  .mback:hover .img-nh{
  opacity: 0%;
  }
    /*peripherals----------------------------*/
    /*.peripheral {
      width: 240px;
      height: 90px;
      position: fixed;
      display: table;
      top:0%;
      left:0%;
    }
    .peripheral .img-h {
      width: 240px;
      height: 90px;
      display: table;
      position: fixed;
      z-index: -1;
    }
    .peripheral .img-nh{
      width: 240px;
      height: 90px;
      position: fixed;
      display: table;
      
    }
    .peripheral:hover .img-nh{
    opacity: 0%;
    }*/
      /*PC----------------------------*/
  /*.pc {
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    top:0%;
    left:0%;
  }
  .pc .img-h {
    width: 240px;
    height: 90px;
    display: table;
    position: fixed;
    z-index: -1;
  }
  .pc .img-nh{
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    
  }
  .pc:hover .img-nh{
  opacity: 0%;
  }*/
    /*setup----------------------------*/
 /* .setup {
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    top:0%;
    left:0%;
  }
  .setup .img-h {
    width: 240px;
    height: 90px;
    display: table;
    position: fixed;
    z-index: -1;
  }
  .setup .img-nh{
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    
  }
  .setup:hover .img-nh{
  opacity: 0%;
  }*/
      /*software----------------------------*/
  /*.software {
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    top:0%;
    left:0%;
  }
  .software .img-h {
    width: 240px;
    height: 90px;
    display: table;
    position: fixed;
    z-index: -1;
  }
  .software .img-nh{
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    
  }
  .software:hover .img-nh{
  opacity: 0%;
  }*/
      /*playstyle----------------------------*/
  /*.playstyle {
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    top:0%;
    left:0%;
  }
  .playstyle .img-h {
    width: 240px;
    height: 90px;
    display: table;
    position: fixed;
    z-index: -1;
  }
  .playstyle .img-nh{
    width: 240px;
    height: 90px;
    position: fixed;
    display: table;
    
  }
  .playstyle:hover .img-nh{
  opacity: 0%;
  }*/