html{
  height:100%;
  width:100%;
}
body{
  padding-top:55px;
  background-position:center center;
  background-image: url(https://img.xjh.me/random_img.php?type=bg&ctype=nature&return=302);
  background-attachment: fixed;
  background-size:auto 100%;
  margin: 0;
  height:100%;
  width:100%;
}
a:link {
  text-decoration:none;
}
.center{
  text-indent:0px;
  text-align:center;
}
/*loading overlay*/
#loading{
  position:fixed;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  z-index:9999;
  background-color:white;
  text-align:center;
}
#loading span.fas{
  color:black;
  line-height:100vh;
  font-size:40px;
}
/*img link*/
img.link{
  width:128px;
  height:32px;
  transition-duration:0.3s;
  -moz-transition-duration:0.3s; 
  -webkit-transition-duration:0.3s; 
  -o-transition-duration:0.3s; 
}
img.link:hover{
  width:153.6px;
  height:38.4px;
}
.fa-spin{
  text-indent:0px;
}
/*sidemenu overlay*/
#overlay{
  position:fixed;
  top:50px;
  left:0;
  width:100%;
  height:100vh;
  background-color:rgba(0,0,0,0.5);
  display:none;
  overflow: hidden;
}
/*mobile*/
@media (max-width: 767px) {
  /*main body*/
  #main-body{
    box-align:center;
    margin-left:0;
  }
  /*navbar align*/
  #mynav{
    text-align:left;
  }
  #mynav span.header{
    margin-left:20px;
  }
}
/*pc*/
@media (min-width: 768px) {
  /*main body*/
  #main-body{
    position:absolute;
    left:180px;
    right:0;
  }
  /*navbar align*/
  #mynav{
    text-align:center;
  }
  #mynav span.header{
    margin-left:0;
  }
}
.theme{
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.theme .dn-mode-index{
  color:#eee;
}
.plus{
  float:right;
  margin:10px 20px 0 0;
}
.menu-icon{
  color:#a3fae6;
  margin-right:20px;
}
/*index system*/
.index-body{
  height:100%;
  width:100%;
  background-color:rgba(222,222,222,0.2);
}
.clock{
  height:10%;
  width:100%;
  text-align:left;
  color:#fff;
  font-size:80px;
  line-height:200%;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.clocksub{
  height:3%;
  width:100%;
  text-align:left;
  color:#fff;
  line-height:100%;
  white-space:pre;
}
.weather{
  text-align:center;
  height:10%;
  width:100%;
  font-size:80px;
  color:#eee;
  line-height:200%;
}
.weathersub{
  height:3%;
  width:100%;
  text-align:center;
  color:#fff;
  line-height:100%;
}
.apps{
  width:100%;
  height:57%;
  line-height:92px;
}
.apps .box{
  border-radius:5px;
  background-color: #000;
  display:inline-block;
  height:48px;
  width:48px;
  line-height:100%;
}
.apps .app{
  border-radius:5px;
}
.apps .app:hover{
  opacity:0.7;
}
#beian{
  position:fixed;
  top:93%;
  left:0px;
  height:7%;
  width:100%;
  z-index:9999;
  text-align: center;
  background-color: rgba(222,222,222,0.5);
}