body {
  font-family: "Astropog", sans-serif;
  background: #000 url("img/bg.jpg") fixed;
  color: #fff;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
h1::before{
  content: "";
  display: block;
  position: absolute;
  width:500px;
  height: 180px;
  bottom:-15px;
  background: url("img/kira.gif")  0 0;
  background-size: 32%;
  z-index: -9999;
}
h1{  
  display: flex;
  position: relative;
  justify-content: center;
  color:#870808;
  font-family: "Mella", sans-serif;
  margin: 80px auto;
  font-weight: normal;
  letter-spacing: 2px;
  font-size: 9em;
  line-height: .8;
}
h2{
  font-family: "Mella", sans-serif;
  font-weight: normal;
  font-size: 5em;
  color: #0707f9;
  margin: 20px 0;  
  padding: 0;
}
a{
  color:#ccc;
}
a:hover,#about li a:hover{
  color:#fff;
  text-shadow:0 0 10px #870808;
  background: url("img/kira.gif")  0 0;
  background-size: 50%;
}
#about,#copyright,#views{
  text-align: center;
}
#copyright,#views{
  font-size: 1em;
  color: #888;
  line-height: 1.2;
  margin: 20px 0;
}
#about{
  margin: 100px auto 50px;
}
#links{
  margin: 0 auto;  
  width:600px;
  display: flex;
  justify-content: center; /*使子项目水平居中*/
  /* align-items: center; 使子项目垂直居中*/
}
article#pagenotfound{
  text-align: center;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
#links h2::before,#links h2::after{
  content: "+";
  padding: 15px;
  font-size: .35em;
}
#inside,#outside{
  background: rgba(0, 0, 0,0.55);
  padding: 20px;
  margin: 30px auto;
}
#inside{
  float: left;
  height: 200px;
}
#about img{
  max-width: 220px;
}

#about li{
  margin: 0 0 20px 0;
  list-style: none;
  color:#870808;
  font-weight: bold;
}
/*
#about li::before{
content: "∷ ";
}
#about li::after{
content: " ∷";
}*/

#about li a{
  font-size: 1.9em;
  padding: 3px;
  letter-spacing: 4px;
  text-shadow:0 0 4px #1b89dd;
}

@media screen and (max-width:600px) {
  #links{
  width:100%;
  display: block;
  }
  h1{
    width: 80%;
  }
  #inside,#outside{
  float:none;
  width: 200px;
  }
  #outside{
    margin: 230px auto 130px;
  }
  h1::before{
  width:250px;
  bottom: 30px;
  }
}

@media screen and (max-width:850px) {
body {
  background-attachment: scroll;
  }
}