body {
  background-color: black;
  background-image: url(./Background/background-3.gif);
  background-repeat:repeat -y -x;
  font-family: Joan;
  color: #FFFFE0;
}

@font-face {
  font-family: Joan;
  src: url(./Joan-Regular.ttf);
  font-weight: normal;
}

.column {
  float: left;
}

.left {
  width: 30vw;
}

.right {
  width: 65%;
}

.top_place_holder
{
  height: 10vh;
}
/*
@media screen and (max-height: 900px) {
  .top_place_holder {
    height: 0;
  }
}
*/
.navbar {
  position: sticky;
  width: 130px;
  height: 81vh;
  background-color: black;
  float: right;
  margin-right: 1.5vh;
  margin-bottom: 10px;
  padding: 10px;
  border: 3px purple;
  border-radius: 10px;
  box-sizing: border-box;
  border-style: solid;

}

.title {
  width: 45vw;
  height: 15vh;
  background-color: black;
  margin-bottom: 1.5vh;
  padding: 10px;
  border: 3px purple;
  border-radius: 10px;
  box-sizing: border-box;
  border-style: solid;
  overflow: auto;
}
.title p {
  font-size: 8vh;
  text-align:center;
  margin-top: 0px; 
  margin-bottom: 0px; 
}

.content {
  width: 45vw;
  height: 64.5vh;
  background-color: black;
  margin-bottom: 10px;
  padding: 10px;
  border: 3px purple;
  border-radius: 10px;
  box-sizing: border-box;
  border-style: solid;
  overflow: auto;
}
.footer{  
  height: 10px;
}
.footer p {
  font-size: 10px;
  text-align:left;
}
/** ^電腦版通用^ **/
/** v简介/blog 页面v **/
.about_container{  
  display: grid;
  grid-template-columns: 15% 70% 15%;
}
.about_arrow_left {
  position: relative;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-right: 30px solid purple; /* Adjust the color as needed */
  margin: auto;
  margin-left: 25%;
}
.about_arrow_left::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* Center the small triangle */
  margin-left: 8px; /* Half of the width of the small triangle */
  margin-top: -10px; /* Half of the height of the small triangle */
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 18px solid black; /* Adjust the color and size as needed */
}
.about_content{
height: 100%;
}
.about_content_placeholder_top{
  height: 30px;
}
.about_photo{
  width: 90%;
  border: 0px solid black;
  border-radius: 10px;
}
.block-middle{
  overflow: auto;
  height: 550px;
}
.about_arrow_right{
  position: relative;
  width: 0;
  height: 0;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  border-left: 30px solid purple; /* Adjust the color as needed */
  margin: auto;
  margin-left: 25%;
}
.about_arrow_right::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%; /* Center the small triangle */
  margin-left: -26px; /* Half of the width of the small triangle */
  margin-top: -10px; /* Half of the height of the small triangle */
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 18px solid black; /* Adjust the color and size as needed */
}
/** ^電腦版^ **/

/** v手機版v **/

.page_m{  
  position: absolute;
  width: 90%;
  height: 90%;
  margin-left: 2.5%;
  justify-content: center; /* 将子项水平居中 */
}
.topbar_m{
  width: 100%;
  height: 10vh;
  background-color: black;
  margin-bottom: 10px;
  padding: 10px;
  border: 3px purple;
  border-radius: 10px;
  box-sizing: border-box;
  border-style: solid;
}
.navbar_m {
  position: absolute;
  display: flex;
  width: 100%;
  margin-top: -5vw;

}
.navbar_m a {
  margin-right: 8%; /* Adjust as needed for spacing between paragraphs */
  font-size: 2vw
  
}
.mid_placeholder_m {
  height: 3px;
}
.content_m {
  width: 100%;
  height: 70vh;
  background-color: black;
  margin-bottom: 10px;
  border: 3px purple;
  border-radius: 10px;
  box-sizing: border-box;
  border-style: solid;
  overflow: auto;
}

/** 图片框 **/
.photo-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 两列 */
  grid-gap: 10px; /* 设置网格项之间的间隔 */
}

.left-column,
.right-column {
  grid-gap: 10px; /* 设置网格项之间的间隔 */
}

.left-column img,
.right-column img {
  width: 100%; /* 图片宽度为100% */
  max-height: 100%; /* 图片高度最大为100% */
  object-fit: cover; /* 保持纵横比并填充整个容器 */
  border: 0px solid black;
  border-radius: 10px;
  align-self: start; /* 与容器顶部对齐 */
}

/** 随机图片 **/
.rand_image{
  height: 260px;
  border: 0px solid black;
  border-radius: 10px;
  margin: 3px;
}

/*** scroll bar ***/

/* width */
::-webkit-scrollbar {
  width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
  background: black;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: purple;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #00ff00;
}

/*** scroll bar end ***/

p {
  color: #FFFFE0;
}

a {
  text-decoration: none;
  color: #FFFFE0;
}

h2, h1 {
  text-decoration: none;
  color: #FFFFE0;
}

label {
  text-decoration: none;
  color: #FFFFE0;
}

.iconframe {
  width: 125px;
  height: 125px;
  position: absolute;
  margin-top: -10px;
  margin-left: -10px;

}

.icon {
  width: 100px;
  height: 100px;
  position: absolute;
  margin-top: 2px;
  margin-left: 3px;

}

.news {
  margin-top: 6px;
  margin-bottom: 6px;
}

.blog-block {
  
  display: grid;
  grid-template-columns: 15% 70% 15%;
  height: 90%;
}

.blog-title {
  font-size: 25px;
  margin-top: 25px;
  margin-bottom: 6px;
}

.blog-body {
  margin-top: 6px;
  margin-bottom: 6px;
}

.blog-middle {
}