/* 定义 Moderustic 字体 */
@font-face {
  font-family: 'Moderustic';
  src: url('wiki_git\jilin-china\static\fonts\Moderustic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Moderustic';
  src: url('wiki_git\jilin-china\static\fonts\Moderustic-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Moderustic';
  src: url('wiki_git\jilin-china\static\fonts\Moderustic-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  /* ExtraBold 通常对应 800 */
  font-style: normal;
}

@font-face {
  font-family: 'Moderustic';
  src: url('wiki_git\jilin-china\static\fonts\Moderustic-Light.ttf') format('truetype');
  font-weight: 300;
  /* Light 通常对应 300 */
  font-style: normal;
}

@font-face {
  font-family: 'Moderustic';
  src: url('wiki_git\jilin-china\static\fonts\Moderustic-Medium.ttf') format('truetype');
  font-weight: 500;
  /* Medium 通常对应 500 */
  font-style: normal;
}

@font-face {
  font-family: 'Moderustic';
  src: url('wiki_git\jilin-china\static\fonts\Moderustic-SemiBold.ttf') format('truetype');
  font-weight: 600;
  /* SemiBold 通常对应 600 */
  font-style: normal;
}




html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-family: "Varela Round", sans-serif;
  background: #0b101a;
}

#header {
  /* background: url(https://upload.wikimedia.org/wikipedia/commons/0/06/Cloud_sky_over_Brest.jpg) no-repeat center top; */
  background-color: #333340;
  background-size: cover;
  position: fixed;
  height: 90%;
  bottom: 10%;
  right: 0;
  left: 0;
  top: 0;
}

#header .center {
  background: rgba(0, 0, 0, 0.25);
  text-align: center;
  position: absolute;
  color: #FFFFFF;
  color: #F5F7FA;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

#header .center .middle {
  position: absolute;
  margin-top: -8em;
  right: 0;
  left: 0;
  top: 50%;
}

#header .center .middle h1 {
  font-family: "Lusitana", serif;
  /* font-weight: normal; */
  line-height: 1.1em;
  font-size: 8em;
  margin: 0;
  font-weight: bolder;
  font-family: Arlon;
  color: #ffffff;
  letter-spacing: 5px;
  text-shadow: 2px 2px 15px #4cbed5b0;

}

#header .center .middle span {
  line-height: 5em;
  font-size: 1em;
}

#pageHr {
  background: #FFFFFF;
  position: relative;
  height: 5px;
  display: block;
  right: 0px;
  left: 0px;
  top: 90%;
  z-index: 1;
}

/* 可以放一个logo，设置一个小小的交互 */
#pageHr .logo {
  width: 150px;
  /* 设置宽度为 100px */
  height: 150px;
  /* padding-top: 55.56%; 根据图片的宽高比计算 padding-top */
  background-image: url(https://static.igem.wiki/teams/5446/img/logo/off.png);
  /* 默认图标 */
  background-size: contain;
  /* 保持图片的宽高比 */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  /* 居中显示 */
  transition: background-image 0.3s ease, box-shadow 0.3s ease;
  /* 添加过渡效果 */
  z-index: 2;
  /* 确保 logo 在圆点之上 */
}

#pageHr .logo:hover {
  background-image: url(https://static.igem.wiki/teams/5446/img/logo/on.png);
  /* 悬停时切换图标 */
}

#page {
  background-color: #1F2021;
  background: #fcf9f4;
  position: relative;
  /* height: 123.45%; */
  top: 90%;
  padding: 10% 40px;
  /* text-align: center; */
  /* margin-bottom: 200px; 增加底部的页边距 */
  /* border: 5px solid blue; 设置边框颜色和宽度 */
  box-shadow: 1000px 0 2000px 0 #1f2021, -1000px 0 2000px 0 #1f2021, 0px 0 2000px 0 #1f2021;
  /* 设置阴影颜色 */
  ;
  /* 设置阴影颜色 */
}

/* #page a {
  color: #fff;
} */