/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
@font-face {font-family: 'CustomFont1';src: url('ZiXinFangHuanYeGeTeTi-2.ttf')format('truetype');font-weight: normal;font-style: normal;}   
body {
  background-color: white;
  color: black;
  font-family: Arial, 'CustomFont1';
}
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
scroll-behavior: smooth;
}
.topbar {
  width:100vw;height:64px;
  background-color:rgb(0, 0, 40);
  position:absolute;top:0;left:0;
  text-align: center;
  border-bottom: 4px solid rgb(0, 0, 255);
  box-shadow: 0 0 50px;
}
.topbar p{color:rgb(255 255 255);line-height:1;font-family: 'CustomFont1';font-size: 40px;margin:15px;
}
.topbarlinks{
  height:64px;
  position:absolute;top:10px;right:10px;
}
.background {
  width:100vw;height:100vh;
  background-image: url(Blue_Nebula_08.png);background-repeat: repeat;
  position:absolute;top:0;left:0;
  z-index: -1;
}
.navigation {
  width:250px;height:396px;
  position:absolute;top:80px;left:calc(50vw - 500px);
  border: 4px solid black;border-radius: 10px;border-color:rgb(0, 0, 255);
  background-color:rgb(0, 0, 40);
  overflow: hidden;
  box-shadow: 0 0 50px;
}
.navigation p {
  color: rgb(255 255 255) ;
  line-height:0;
  font-family: 'CustomFont1';
}
.recent {
  width:250px;height:calc(525px + 100vh - 1008px - 42px);
  position:absolute;top:500px;left:calc(50vw - 500px);
  border: 4px solid black;border-radius: 10px;border-color:rgb(0, 0, 255);
  background-color:rgb(0, 0, 40);
  box-shadow: 0 0 50px;
  overflow:hidden
}
.recent p {
  color: rgb(255 255 255);
  font-family: 'CustomFont1';
}
.recentcontent {
  width:210px;height:calc(447px + 100vh - 1008px - 45px);
  z-index: 1;
  overflow:scroll;
  scrollbar-width: none;
  border-top: 1px dashed rgb(0, 0, 255);
  padding: 0 20px;
}
.recentcontent p, h1, h2, h3, h4, h5, h6 {color:rgb(255 255 255);line-height:1px;font-family: Arial}
ol {
  font-family: Arial;
  list-style-type: none; 
  padding:0 0;
  margin:0 0;
}
.navigationbutton a {
  text-decoration: none; 
}
.navigationbutton li {
  white-space: pre-wrap;
  width:256px;height:32px;
  margin: 0 0;
  padding:10px 0;
  color:rgb(255, 255, 255);
  font-size: 20px;
  letter-spacing: 0px;
  background-color: rgb(0, 0, 40);
  border-top: 1px dashed rgb(0, 0, 255);
  transition:background-color 100ms ease-out,letter-spacing 250ms ease-out;
}
.navigationbutton li:hover {
  background-color: rgb(0, 0, 80);
  letter-spacing: 8px;
  transition:background-color 100ms ease-out,letter-spacing 250ms ease-out ;
}
.main {
  width:720px;height:calc(895px + 100vh - 1000px);
  position:absolute;top:80px;right:calc(50vw - 500px);
  border: 4px solid black;border-radius: 10px;border-color:rgb(0, 0, 255);
  background-color:rgb(0, 0, 40);
  box-shadow: 0 0 50px;
  overflow-x:hidden;overflow-y:scroll;
  scrollbar-width: none;
}
.maintitle{
  width:680px;height:100px;
  position:relative;top:20px;left: 20px;
}
.maintext{width:680px;position:relative;top:-20px;left: 20px;}
.main p, h6, h5{
  font-size: 20px;color:rgb(255 255 255);font-weight:normal;text-decoration: none;line-height:1.1;font-family: Arial}
.main h1, h2, h3, h4{
  font-weight:normal;color:rgb(255 255 255);text-decoration: none;line-height:0.5;font-family: 'CustomFont1'}
.mainlist a {
  text-decoration: none; 
}
.mainlist li {
  width:720px;height:200px;
  margin: 0 0;
  padding:0 0;
  overflow: hidden;
  border-top: 1px dashed rgb(0, 0, 255);
  background-color: rgba(0, 0, 80, 0);
  transition:background-color 100ms ease-out;
}
.mainlist li:hover {
  background-color: rgb(0, 0, 80);
  transition:background-color 100ms ease-out;
}
.mainlisttext{
  width:360px;height:160px;
  position:relative;top:28px;left:25px;margin:0;}
.mainlisttext h1{margin:0}
.mainlisttext p{line-height:1.2; color:white}
a:link {color:aquamarine;}
a:visited {color:aqua;}
.mainlistchara{
  width:auto;height:200px;
  position:relative;top:-160px;right:-420px;}
.mainlistvideo{width:302px;height:170px;
  position:relative;top:-149px;right:-399px;
  border: 4px solid rgb(255, 255, 255);
  border-radius: 10px;overflow: hidden;}
.mainlistimage{width:302px;height:170px;
  position:relative;top:-178px;right:4px;
  border: 4px solid rgb(255, 255, 255);
  overflow: hidden;z-index: 1;
  cursor: pointer;}
.mainlistbutton{
  white-space: pre-wrap;text-decoration: none; 
  position:relative;top:-194px;left:26px;
  width:100px;height:37px;
  margin: 0 0;
  padding:0 0;
  background-color: rgba(255, 255, 255, 0);
  border: 4px solid rgb(255, 255, 255);border-radius: 10px;
  transition:background-color 150ms ease-in-out, color 150ms ease-in-out;
}
.mainlistbutton p{color:rgb(255, 255, 255);transition:color 150ms ease-in-out;}
.mainlistbutton:hover{background-color: rgb(255, 255, 255);transition:background-color 150ms ease-in-out;}
.mainlistbutton:hover p{color:rgb(0, 0, 80);transition:color 150ms ease-in-out;}
.mainlistbar{
  width:720px;height:48px;
  margin: 0 0;
  padding:0px 0;
  overflow: hidden;
  text-align: center;
  color:rgb(0, 0, 255);
  white-space-collapse: preserve;
  background-color: rgb(0, 0, 80);
  border-top: 4px solid rgb(0, 0, 255);
  border-bottom: 4px solid rgb(0, 0, 255);
  z-index: 1;
}
.mainlistmisc{
  width:720px;height:48px;
  margin: 0 0;
  padding:0px 0;
  overflow: hidden;
  text-align: center;
  color:rgb(0, 0, 255);
  white-space-collapse: preserve;
  border-top: 1px dashed rgb(0, 0, 255);
  background-color: rgba(0, 0, 80, 0);
  transition:background-color 100ms ease-out;
  z-index: 1;
  line-height: 0;
}
.mainlistmisc:hover {
  background-color: rgb(0, 0, 80);
  transition:background-color 100ms ease-out;
}