@charset "UTF-8";
@media (orientation: landscape) {
  #control {
    width: 8%;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1vh;
    background: rgba(10, 75, 120, 0.05);
    border-radius: 15px;
  }
  #header {
    transform-origin: right top;
    transform: translate(0, 0);
    position: absolute;
    top: 0;
    left: 0;
  }
  #main {
    background: url("../img/1_main.png") no-repeat;
    background-size: cover;
  }
  #main #main-search-container {
    width: 70%;
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 25px;
  }
  #main #main-search-container fieldset {
    border-radius: 25px;
    font-size: 1.5rem;
    font-family: TongMeng, sans-serif;
  }
  #main #main-search-container input[type=search] {
    width: 100%;
    outline: none;
    text-align: center;
    font-size: 2rem;
    background: transparent;
    border: 1px rgba(255, 215, 0, 0.25) solid;
    border-radius: 10px;
    font-family: ZiHun, sans-serif;
  }
  #main #main-search-container div {
    text-align: right;
  }
  #main #main-search-container div input[type=submit] {
    outline: none;
    background: transparent;
    border: none;
    font-size: 2rem;
    font-family: Aa, sans-serif;
  }
  #main #main-music-button {
    position: absolute;
    right: 0;
    top: 0;
    width: 5%;
  }
  #main #main-link {
    background-color: rgba(0, 0, 0, 0.3);
    color: #F5F5F5;
    width: 100%;
    position: absolute;
    display: flex;
    gap: 1%;
    bottom: 0;
    left: 0;
    font-size: 1.3rem;
    font-family: ZiHun, sans-serif;
  }
  #article {
    background: url("../img/1_article.png") no-repeat;
    background-size: cover;
    display: flex;
  }
  #article button {
    display: none;
  }
  #article #article-sidebar {
    border-right: 5px double #0a4b78;
    transition: all 500ms;
  }
  #article #article-sidebar h1 {
    text-align: center;
    font-family: Aa, sans-serif;
  }
  #article #article-sidebar details summary {
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    outline: none;
    background: rgba(255, 238, 238, 0.3);
    font-family: TongMeng, sans-serif;
    font-size: 1.4rem;
  }
  #article #article-sidebar details div {
    background: rgba(255, 238, 238, 0.1);
    text-indent: 2rem;
    font-family: ZiHun, sans-serif;
    font-size: 1.2rem;
  }
  #article #article-sidebar details .active {
    background: #409eff;
    color: #fff;
  }
  #article #article-sidebar details[open] {
    animation: fadeIn 0.5s;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  #article #article-content {
    flex: 1;
    width: 80%;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 0 10% 0 10%;
  }
  #article #article-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  #article #article-content::-webkit-scrollbar-track {
    width: 6px;
    background: rgba(16, 31, 28, 0.1);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  #article #article-content::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color 0.3s;
    cursor: pointer;
  }
  #article #article-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.3);
  }
  #about {
    background: url("../img/1_about.jpg") no-repeat;
    background-size: cover;
  }
  #about #about-header {
    background: rgba(255, 250, 250, 0.25);
    display: flex;
    justify-content: flex-end;
    gap: 1%;
    padding-right: 1%;
  }
  #about #about-header .head-link {
    display: flex;
  }
  #about #about-header .head-link ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  #about #about-main {
    flex: 1;
    padding: 0 10px 0 10px;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
  }
  #about #about-main #about-main-left {
    width: 20%;
  }
  #about #about-main #about-main-left #about-main-left-img {
    padding: 3%;
    text-align: center;
    margin: 3%;
    border-radius: 15px;
    color: snow;
    font-family: ZiHun, sans-serif;
  }
  #about #about-main #about-main-left #about-main-left-img img {
    height: 20vh;
  }
  #about #about-main #about-main-left #about-main-left-sidebar {
    position: relative;
    padding: 25px;
    margin: 5%;
    color: snow;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  #about #about-main #about-main-right {
    width: 80%;
  }
  #about #about-main #about-main-right #about-main-right-introduce {
    position: relative;
    padding: 1% 3% 1% 3%;
    margin: 5%;
    color: snow;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    text-indent: 2rem;
  }
  #about #about-footer {
    background: rgba(255, 150, 150, 0.5);
    display: flex;
    justify-content: center;
    font-family: ZiHun, sans-serif;
  }
  #archive { /*归档页面*/
    background: url("../img/1_archive.jpg") no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }
  #archive #archive-sidebar { /*归档页面顶栏*/
    text-align: center;
    background: rgba(195, 202, 202, 0.25);
  }
  #archive #archive-sidebar h1 {
    font-family: TongMeng, sans-serif;
  }
  #archive #archive-content { /*归档页面列表*/
    width: 91%;
    flex: 1;
    overflow-y: auto;
  }
  #archive #archive-content::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  #archive #archive-content::-webkit-scrollbar-track {
    width: 6px;
    background: rgba(16, 31, 28, 0.1);
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
  }
  #archive #archive-content::-webkit-scrollbar-thumb {
    background-color: rgba(144, 147, 153, 0.5);
    background-clip: padding-box;
    min-height: 28px;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;
    border-radius: 2em;
    transition: background-color 0.3s;
    cursor: pointer;
  }
  #archive #archive-content::-webkit-scrollbar-thumb:hover {
    background-color: rgba(144, 147, 153, 0.3);
  }
  #archive #archive-content .archive-list { /*归档页面列表项*/
    padding: 10px 10px 10px 10px;
    border: snow 2px solid;
    margin: 10px;
    border-radius: 25px;
    display: flex;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
  }
  #archive #archive-content .archive-list .archive-list-leftbar { /*归档页面列表项左侧栏*/
    padding: 0 5px 0 0;
    text-align: right;
    border-right: #F5F5F5 2px solid;
    width: 10%;
    align-content: center;
    position: relative;
  }
  #archive #archive-content .archive-list .archive-list-leftbar img {
    width: 8vw;
  }
  #archive #archive-content .archive-list .archive-list-leftbar .link {
    position: absolute;
    left: 0;
    top: 0;
    transform: rotate(-20deg);
    font-size: 2rem;
    font-family: Aa, sans-serif;
    color: gold;
    font-weight: 400;
    text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
  }
  #archive #archive-content .archive-list .archive-list-content { /*归档页面列表项内容*/
    flex: 1;
    padding: 0 2px 0 2px;
  }
  #archive #archive-content .archive-list .archive-list-content h1 {
    text-align: center;
    margin: 0;
    font-family: TongMeng, sans-serif;
  }
  #archive #archive-content .archive-list .archive-list-content p {
    font-family: ZiHun, sans-serif;
    font-size: 1.5rem;
    text-indent: 2rem;
    margin: 0;
  }
  #archive #archive-content .archive-list .archive-list-rightbar { /*归档页面列表项右侧栏*/
    padding: 0 0 0 5px;
    border-left: #F5F5F5 2px solid;
    font-family: ZiHun, sans-serif;
    font-size: 1.5rem;
    width: 30%;
  }
}
@media (orientation: portrait) {
  #control {
    position: absolute;
    display: flex;
    flex-direction: column;
    left: 0;
    bottom: 0;
  }
  #control button {
    width: 12vw;
    height: 100%;
  }
  #header {
    transform-origin: left bottom;
    transform: translate(100%, -100%) rotate(-90deg);
    position: absolute;
    top: 93%;
    right: 0;
  }
  #main {
    background: url("../img/2_main.jpg") no-repeat;
    background-size: cover;
  }
  #main #main-search-container {
    width: 100%;
    position: absolute;
    transform: translate(-50%, 0);
    left: 50%;
    top: 0;
    background: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 25px;
  }
  #main #main-search-container fieldset {
    position: relative;
    border-radius: 25px;
  }
  #main #main-search-container legend {
    position: absolute;
    background: rgba(255, 250, 250, 0.5);
    transform: translate(0, 50%);
    bottom: 0;
    left: 0;
    font-family: ZiHun, sans-serif;
    font-size: 1.5rem;
  }
  #main #main-search-container div {
    display: none;
  }
  #main #main-search-container input[type=search] {
    width: 100%;
    outline: none;
    text-align: center;
    font-size: 2rem;
    background: transparent;
    border: 1px rgba(255, 215, 0, 0.25) solid;
    border-radius: 10px;
    font-family: TongMeng, sans-serif;
  }
  #main #main-music-button {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 7%;
  }
  #main #main-header {
    position: absolute;
    right: 0;
    top: 0;
  }
  #main #main-link {
    display: none;
  }
  #article {
    background: url("../img/2_article.jpg") no-repeat;
    background-size: cover;
  }
  #article button {
    position: absolute;
    width: 15%;
    right: 0;
  }
  #article #article-sidebar {
    width: 50%;
    padding: 0 2% 2% 2%;
    position: absolute;
    left: 100%;
    background: snow;
    transition: all 500ms;
    font-family: ZiHun, sans-serif;
  }
  #article #article-sidebar h1 {
    display: none;
  }
  #article #article-content {
    height: 100%;
    overflow: auto;
  }
  #about {
    background: url("../img/2_about.jpg") no-repeat;
    background-size: cover;
  }
  #about #about-header {
    background: rgb(255, 250, 250);
    display: flex;
    justify-content: flex-start;
    gap: 1%;
    padding-right: 1%;
    font-family: ZiHun, sans-serif;
  }
  #about #about-header .head-link {
    display: flex;
  }
  #about #about-header .head-link ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  #about #about-main {
    flex: 1;
  }
  #about #about-main #about-main-left {
    padding: 1% 2% 0 2%;
    display: flex;
  }
  #about #about-main #about-main-left #about-main-left-img {
    margin: 1%;
    text-align: center;
    border-radius: 15px;
    font-family: ZiHun, sans-serif;
  }
  #about #about-main #about-main-left #about-main-left-img img {
    height: 20vh;
  }
  #about #about-main #about-main-left #about-main-left-sidebar {
    flex: 1;
    position: relative;
    padding: 25px;
    margin: 1%;
    color: snow;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  #about #about-main #about-main-right #about-main-right-introduce {
    position: relative;
    margin: 5%;
    color: snow;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.5);
    overflow: hidden;
  }
  #about #about-main #about-main-right #about-main-right-introduce pre {
    text-indent: 2rem;
  }
  #about #about-footer {
    background: rgba(255, 150, 150, 0.5);
    text-align: center;
    font-family: ZiHun, sans-serif;
  }
  #about #about-footer span {
    display: block;
  }
  #archive {
    background: url("../img/2_archive.jpg") no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
  }
  #archive #archive-sidebar { /*归档页面顶栏*/
    font-size: 0.6rem;
    text-align: center;
  }
  #archive #archive-content { /*归档页面列表*/
    flex: 1;
    overflow: auto;
  }
  #archive #archive-content .archive-list {
    position: relative;
    margin: 10px;
    padding: 10px;
    display: flex;
    border: #6a6a6a 2px solid;
    border-radius: 35px;
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.5);
  }
  #archive #archive-content .archive-list .archive-list-leftbar {
    width: 25%;
  }
  #archive #archive-content .archive-list .archive-list-leftbar .link {
    font-family: Aa, sans-serif;
    background: rgba(205, 205, 0, 0.5);
    border-radius: 25px;
    transform: rotate(25deg);
    position: absolute;
    top: 0;
    right: 0;
    color: gold;
    font-size: 1.5rem;
    font-weight: 600;
    text-shadow: 1px 0 #000, -1px 0 #000, 0 1px #000, 0 -1px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000;
  }
  #archive #archive-content .archive-list .archive-list-leftbar img {
    width: 100%;
  }
  #archive #archive-content .archive-list .archive-list-content {
    flex: 1;
  }
  #archive #archive-content .archive-list .archive-list-content h1 {
    text-align: center;
    font-size: 2rem;
    margin: 0;
    font-family: ZiHun, sans-serif;
  }
  #archive #archive-content .archive-list .archive-list-content p {
    text-indent: 2rem;
    font-family: TongMeng, sans-serif;
    font-size: 1.5rem;
  }
  #archive #archive-content .archive-list .archive-list-rightbar {
    display: none;
  }
}
@font-face {
  font-family: "head";
  src: url("./../ttf/ZiHunDunHuangJingYunKai(ShangYongXuShouQuan)-2.ttf");
}
@font-face {
  font-family: "code";
  src: url("./../ttf/MonaspaceRadonVarVF[wght,wdth,slnt].ttf");
}
@font-face {
  font-family: "paragraph";
  src: url("./../ttf/ZiTiGuanJiaFangSongTi-2.ttf");
}
@font-face {
  font-family: "sign";
  src: url("./../ttf/AaBaoChiKeAiBuTanLianAi-2.ttf");
}
@font-face {
  font-family: "rest";
  src: url("./../ttf/TongMengZhuangYuanKai9558-Regular-2.ttf");
}
.article_css h1, .article_css h2, .article_css h3, .article_css h4, .article_css h5, .article_css h6 {
  position: relative;
  font-family: head, rest, sans-serif;
}
.article_css h1 {
  text-align: center;
}
.article_css h2, .article_css h3, .article_css h4, .article_css h5, .article_css h6 {
  width: max-content;
}
.article_css h2::after {
  font-family: sign, rest, sans-serif;
  content: "h2";
  font-size: 0.7em;
  position: absolute;
  transform: translate(100%, -50%);
  top: 0;
  right: 0;
  color: #888;
}
.article_css h3::after {
  font-family: sign, rest, sans-serif;
  content: "h3";
  font-size: 0.7em;
  position: absolute;
  transform: translate(100%, -50%);
  top: 0;
  right: 0;
  color: #888;
}
.article_css h4::after {
  font-family: sign, rest, sans-serif;
  content: "h4";
  font-size: 0.7em;
  position: absolute;
  transform: translate(100%, -50%);
  top: 0;
  right: 0;
  color: #888;
}
.article_css h5::after {
  font-family: sign, rest, sans-serif;
  content: "h5";
  font-size: 0.7em;
  position: absolute;
  transform: translate(100%, -50%);
  top: 0;
  right: 0;
  color: #888;
}
.article_css h6::after {
  font-family: sign, rest, sans-serif;
  content: "h6";
  font-size: 0.7em;
  position: absolute;
  transform: translate(100%, -50%);
  top: 0;
  right: 0;
  color: #888;
}
.article_css code {
  font-family: code, rest, sans-serif;
  font-weight: bolder;
}
.article_css p {
  font-family: paragraph, rest, sans-serif;
}

@font-face {
  font-family: "ZiHun";
  src: url("./../ttf/ZiHunDunHuangJingYunKai(ShangYongXuShouQuan)-2.ttf");
}
@font-face {
  font-family: "Aa";
  src: url("./../ttf/AaBaoChiKeAiBuTanLianAi-2.ttf");
}
@font-face {
  font-family: "TongMeng";
  src: url("./../ttf/TongMengZhuangYuanKai9558-Regular-2.ttf");
}
* {
  user-select: none;
  -webkit-user-drag: none;
  box-sizing: border-box;
}

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

body {
  top: 0;
  left: 0;
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  overscroll-behavior-y: contain;
}
body a {
  text-decoration: none;
  color: inherit;
  outline: none;
}
body a:link, body a:visited, body a:hover, body a:active, body a:focus {
  text-decoration: none;
}
body button {
  border: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  border-radius: 25%;
  transition: all 0.5s;
}
body button svg {
  height: 5%;
  width: 5%;
}
body button:hover {
  background-color: rgb(205, 41, 41);
}
body #container {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: all 500ms;
}
body input[type=range] {
  accent-color: #4e4e4e;
  background: transparent;
}
body #main, body #article, body #archive, body #about, body #top {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-origin: top center;
}
body #top {
  background: url("../img/top.png") no-repeat;
  background-size: cover;
}
body #main {
  display: flex;
  justify-content: center;
}
body #about {
  display: flex;
  flex-direction: column;
}
body #article {
  display: flex;
}