body {
    line-height: 1.3;
  }
  @media (max-width:1600px){
    html{
      font-size: 14px;
    }
  }
  @media (max-width:1400px){
    html{
      font-size: 13px;
    }
  }
  @media (max-width: 1200px) {
    html {
  
      font-size: 12px;
    }
  
  }
  a{
    text-decoration: none;
  }
  .banner {
    background-image: 
        radial-gradient(closest-side,rgb(105, 177, 219,1),rgba(248,192,147,0)),
        radial-gradient(closest-side,rgb(230, 60, 173,1),rgba(243,11,164,0)),  
        radial-gradient(closest-side,rgb(155, 118, 255,1),rgba(170,142,245,0)), 
        radial-gradient(closest-side,rgb(253, 128, 247),rgba(254,234,131,0)),   
        radial-gradient(closest-side,rgb(233, 141, 122),rgba(235,105,78,0)) 
        ;   
        /*radial-gradient(closest-side,rgb(226, 100, 226),rgba(235,105,78,0)),  
        radial-gradient(closest-side,rgb(252, 127, 144),rgba(254,234,131,0));*/  
         
    background-size:
    38vmax 38vmax,
    36vmax 36vmax,
    32vmax 32vmax,
    34vmax 34vmax,
    35vmax 35vmax;   
    background-position: 
    -5vmax -5vmax,
    18vmax -14vmax,
    36vmax -8vmax,
    55vmax -18vmax,
    78vmax -7vmax;   
    
    animation: 6s movement linear infinite;
    background-repeat: no-repeat;
    /*background-color: #e493d0;*/
    background-color: #e9bddc;
    color:#ffffff;
    /*border-bottom:3px solid #e67c7c;*/
    border-bottom:3px solid #7ca6e6;
    padding: 1.8% 0px;
    height:100%;
    line-height:1;
  }
  .banner .intro{
    margin-left:12.5%;
    font-size: 120%;
    font-family: Courier;
    font-weight: bold;
  }
  .banner .logo{
    width:27%;
    margin-left:12%;
    margin-top:30px;
    display: inline-block;
  }
  .nav a{
    -webkit-transition: background-color 250ms linear;
    -ms-transition: background-color 250ms linear;
    transition: background-color 250ms linear;
  }
  .nav {
    color:#ffffff;
    background-color:#1b1b1b;
    font-size:140%;
    text-align:center;
    font-family:Helvetica;
    line-height:1;
    font-weight: 550;
    a:link, a:visited {
      color: #ffffff;
      background-color: #1b1b1b;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      padding: 0.6% 3.5%;
    }
    a:hover, a:active {
      background-color: #7ca6e6;
    }
  }
  .nav :first-child {
    margin-left:15%;
  }
  .nav .login{
    float: right;
    margin-right: 7.5%;
  }
  .side-bar{
    background-color: #1b1b1b;
    width:15%;
    /*height: calc(100vh - 60px);*/
    float:left;
    position:fixed;
    height: 100%;
    /*border-right: solid #8e83aa*/
  }
  .side-bar .logo{
    width: 85%;
    margin-left:7%;
    margin-top: 18%;
  }
  #pre-logo{
    display:block;
  }
  .side-bar .pre-logo{
    width: 45%;
    margin-left:28%;
    margin-top: 70%;
    filter:drop-shadow(0px 0px 5px rgba(205, 228, 250, 0.18));
    animation: 2s halo linear infinite;
  }
  @keyframes halo {
    0%,100%{
      filter:drop-shadow(0px 0px 5px rgba(146, 200, 252, 0.18));
    }
    50%{
      filter:drop-shadow(0px 0px 10px rgba(205, 228, 250, 0.4));
    }
  }
  #side-bar-content{
    display: none;
    transition: all 300ms;
  }
  .side-bar .tag-list :first-child {
   margin-top: 10px;
  }
  .side-bar .tag-list a{
    display: block;
    padding:25px;
    text-align: center;
    color: #8a8a8a;
    font-weight: 1000;
    font-size: 130%;
    transition: all 500ms;
    
  }
  .side-bar .tag-list a:hover{
    color:#ddf0fd;
    text-shadow: rgb(97, 156, 243) 1px 0 20px;
  }
  .main {
    width: 85%;
    background-image: url('../../img/yuki1.jpg');
    background-color: #ffffff;
    border-top-left-radius: 30px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: contain;
    background-position: right;
    /*margin: 0 18%;*/
    float:right;
    box-shadow: inset 5px 5px 10px -5px #000000;

  }
  .article-list{
    margin-right: 33%;
    padding: 1.8% 0px;
    margin-left:13%;
    height: 100vh;
    
  }
  .world{
    margin-bottom: 7%;
    border-radius: 30px;
    box-shadow: 0 0 12px #a1a1a1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:22dvh;
    background-color: #000000;
    min-width: 810px;
    aspect-ratio: 100/38;
  }
  .info{
    width: 100%;
    height: 100%;
    padding-top: 0.5%;
    /*background: linear-gradient(to bottom,rgb(39, 4, 46), rgb(6, 2, 59));*/
    position: relative
  }
  .back-to-legacy{
    display: inline-block; 
    margin-left: 2%; 
    margin-top: 0.2%;
    font-weight: bold; 
    color: rgb(214, 214, 214); 
    font-family: Microsoft Yahei;
  }
  .back-to-legacy:hover{
    color:#000000;
  }
  .sn{
    color:#ffffff;
    margin-left: 5%;
    margin-top: 3.5%;
    font-family: Microsoft Yahei;
    font-weight: bold;
    font-size: 110%;
  }
  .title{
    margin-left: 5%;
    font-size:230%;
    font-family: Tahoma;
    font-weight: 700;
    color: #4d97ec;
  }
  .article{
    line-height: 1.7;
    margin-left: 5%;
    top:36%;
    margin-right:0;
    font-size: 130%;
    font-family: Microsoft YaHei;
    font-weight: 600;
    color: #ffffff;
    position: absolute;
  }
  .download{
    padding-left: 4.7%;
    bottom: 0;
    margin-bottom: 4%;
    position: absolute; 
    width: 100%;
  }
  .button{
    padding: 1% 4%;
    background-color: #156ccf;
    display: inline-block;
    border-radius: 10px;
    font-size: 100%;
    font-family: Microsoft YaHei;
    font-weight: 600;
    -webkit-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
  }
  .button:link, .button:visited{
    color: rgb(255, 255, 255);
  }
  .button:hover, .button:active{
    color: rgb(255, 255, 255);
 
      background-color: #438adb;
  }
  .download-source{
    display: inline-block;
    margin-left:1.6%;
    font-family:microsoft yahei;
    font-weight: bold;
    color: rgb(189, 189, 189);  
  }
  li {
    list-style-type: none;
  }
  /*a:link, a:visited {
    color: rgb(255, 255, 255);
    background-color: #f44336;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    padding: 15px 25px;
  }
  a:hover, a:active {
    background-color: red;
  }*/
  .show{
    transition-duration: 1s;
  }
  @keyframes movement {
    0%,100%{
        background-size: 
        38vmax 38vmax,
        36vmax 36vmax,
        32vmax 32vmax,
        34vmax 34vmax,
        35vmax 35vmax;
        background-position: 
        -7vmax -5vmax,
        18vmax -14vmax,
        36vmax -8vmax,
        55vmax -18vmax,
        78vmax -7vmax;
    }
    25%{
        background-size: 
        40vmax 40vmax,
        38vmax 38vmax,
        36vmax 36vmax,
        33vmax 33vmax,
        38vmax 38vmax;      
        background-position: 
        -1vmax -10vmax,
        5vmax -10vmax,
        38vmax -10vmax,
        60vmax -12vmax,
        75vmax -10vmax;
    }
    50%{
        background-size: 
        38vmax 38vmax,
        35vmax 35vmax,
        40vmax 40vmax,
        38vmax 38vmax,
        33vmax 33vmax;  
        background-position: 
        -11vmax -17vmax,
        15vmax -5vmax,
        43vmax -5vmax,
        65vmax -8vmax,
        70vmax -12vmax;
    }
    75%{
        background-size: 
        42vmax 42vmax,
        40vmax 40vmax,
        34vmax 34vmax,
        35vmax 35vmax,
        35vmax 35vmax;       
        background-position: 
        -1vmax -12vmax,
        20vmax -10vmax,
        38vmax -9vmax,
        60vmax -12vmax,
        72vmax -10vmax;    
    }
  }
.copyright{
  color: #4e4e4e;
  position: absolute;
  bottom:30%;
  font-size: 80%;
  width: 100%;
  text-align: center;
  font-weight: bold;
}