body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: "Arial", "Segoe UI", "Microsoft Yahei", "黑体", "sans-serif";
  background-color: #000;
  overflow-x: hidden;
  overflow-Y: hidden;
}

/* 滚动条的轨道 */
::-webkit-scrollbar {
  width: 2.5px; /* 宽度 */
}

/* 滚动条的轨道背景 */
::-webkit-scrollbar-track {
  background-color: #060606; /* 背景颜色 */
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #495377; /* 滑块颜色 */
  border-radius: 6px; /* 圆角 */
}

/* 当滚动条处于活动状态（鼠标悬停在滚动条上）时的滑块样式 */
::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}


.grid {
  display: flex;
  flex-wrap: wrap;
  width: 96%;
  margin: 0 auto;
}

.grid__item {
  box-sizing: border-box;
  width: calc(33.33% - 20px);
  margin: 10px;
  overflow: hidden;
  user-select: none; 
}

.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.grid__sizer {
  width: calc(33.33% - 20px);
  margin: 10px;
  min-height: 150px; 
}

.grid-item--width2 {
  width: calc(33.33% - 20px);
}

.grid-item img {
  max-width: 100%;
  height: auto;
}

/* 三列时的宽度调整 */
@media (max-width: 1600px) {
  .grid__item {
    width: calc(33.33% - 20px);
  }
}

/* 两列时的宽度调整 */
@media (max-width: 1000px) {
  .grid__item {
    width: calc(50% - 20px);
  }
}

/* 一列时的宽度调整 */
@media (max-width: 600px) {
  .grid__item {
    width: calc(100% - 20px);
  }
}
/* 图片容器阴影和圆角边框 */
.grid__item img,
.grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.grid__item,
.grid-item {
  box-sizing: border-box;
  margin: 10px;
  overflow: hidden;
  user-select: none;
  position: relative;
  min-height: 150px;
  transition: box-shadow 0.3s ease, transform 0.3s ease; /* 在正常状态下添加过渡效果 */
}

/* 鼠标悬停时放大效果 */
.grid__item:hover,
.grid-item:hover {
  transform: scale(1.05);
}




 #navbar {
      position: relative;
      width: 100%;
	  height: 12em; /* 调整高度为适当的值 */
      line-height: 12em; /* 保持与高度一致 */
      background-color: #000;
      box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.2);
      color: #fff;
      text-align: center;
      z-index: 800;
      transition: opacity 0.5s ease; /* 添加淡出效果 */
	  user-select: none;
    }


/* 移动端 */
@media only screen and (max-width: 767px) {
  #navbar {
	  white-space: nowrap; /* 禁止自动换行 */
	  height: 15em; /* 调整高度为适当的值 */
  }
}

	
#navbar a {
  color: #e09855;
  top: 5%;
  right:3%;
  text-decoration: none;
  margin: 0 32px;
  font-size: 22px;
  font-weight: bold; /* 添加粗体 */	
  position: relative;
  z-index: 910
}

/* 移动端 */
@media only screen and (max-width: 767px) {
  #navbar a {
    top: 5.8em;
    left: -0.3em;
    margin: 0 0.3em;
    font-size: 1.3em;
    max-width: calc(100% / 3); /* 设置最大宽度，根据需要调整分割比例 */
    flex: 1 1 auto; /* 让按钮根据可用空间自动调整 */
    text-align: center; /* 居中文字 */
    box-sizing: border-box; /* 包含内边距和边框在内的总宽度 */
  }
}

#rightCornerText {
  position: absolute;
  top: 40%;
  right: 0%;
  padding: 8px;
  color: #b6b6b6e0;
  font-size: 14.5px;
  font-weight: bold; /* 添加粗体 */
  user-select: none;	
  z-index: 900; /* 提高 z-index 避免被其他元素遮挡 */
  font-family: 'Bree Serif', "Segoe UI";
}

/* 移动端 */
@media only screen and (max-width: 767px) {
  #rightCornerText {
    position: absolute;
    top: 57%;
    right: 50%;
    line-height: 1.2;
    transform: translateX(50%);
    font-size: 10px;
  }
}

#home {
  position: absolute;
  top: -42%;
  width: 100%;
  left: 0%;
  color: #619fffe0;
  font-size: 25px;
  user-select: none;
  font-weight: bold; /* 添加粗体 */	
  z-index: 860;
  font-family: 'Gochi Hand', "Segoe UI", cursive;
}

/* 移动端 */
@media only screen and (max-width: 767px) {
#home {
  position: absolute;
  top: 1em;
  right: 2em;
  padding: 8px;
  color: #619fffe0;
  font-size: 10px;
  user-select: none;
  font-weight: bold; /* 添加粗体 */	
}
  }

#navbar a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#navbar a:hover::after {
  opacity: 1;
}


#avatar {
  position: absolute;
  width: 100px;
  height: 100px;
  left: 0%;
  transform: translate(-90%, 30%); /* 调整 translate 的值 */
  /* background-color: #fff; */
  border-radius: 50%;
  z-index: 850;
  /* Add your avatar image or content here */
}

	
/* 移动端 */
@media only screen and (max-width: 767px) {

  #avatar {
    position: absolute;
    transform: translate(5.2em, -5.4em);
    max-width: 100px; /* 设置最大宽度，避免过度放大 */
    border-radius: 50%;
    z-index: 850;
    /* Add your avatar image or content here */
  }
}

    #galleryContainer {
      margin-top: -40px; /* 调整 margin-top 以避免内容和导航栏的重叠 */
    }
	
	#hitokoto {
  position: absolute;
  top: 23%;
  left: 50%;
  transform: translateX(-50%);
  color: #de3939;
  font-family: "LXGW WenKai", "Segoe UI", "Microsoft Yahei", 黑体, sans-serif;
  font-size: 14px;
  z-index: 870;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(197, 51, 51, 0.54); /* 优化：使用 rgba 代替 rgb + 透明度 */
}

/* 移动端 */
@media only screen and (max-width: 767px) {
  #hitokoto {
    top: 17.3em;
    font-size: 9px;
    line-height: 13px;
    font-weight: bold; /* 添加粗体 */
    text-shadow: 0 0 1px #e08255; /* 添加文字发光效果 */
    white-space: normal; /* 允许文本自动换行 */
    word-wrap: break-word; /* 当单词过长时进行换行 */
    width: auto; /* 设置宽度为自动，根据内容调整 */
  }
}

#myColorSwitch {
  position: absolute;
  top: 0;
  right: 2rem;
  font-size: 1.2em;
  transform: translateX(-50%);
  z-index: 999;
  padding: 10px;
  border: none !important;
  background: none; /* 去掉背景色 */
  outline: none; /* 去掉点击时的边框 */
  cursor: pointer; /* 鼠标样式 */
  color: #e08255;
  font-weight: bold; /* 添加粗体 */
  font-family: 'Gochi Hand', "Segoe UI", cursive;	
}

/* 移动端 */
@media only screen and (max-width: 767px) {
	#myColorSwitch {
  right: -4rem;
		}
}

/* --- 回到顶部按钮 --- */

#backToTopBtn {
  /* 1. 定位与层级 */
  position: fixed; /* 固定在视口，不随页面滚动 */
  bottom: 25px;    /* 距离底部25px */
  right: 25px;     /* 距离右侧25px */
  z-index: 999;    /* 确保它在最上层 */
  
  /* 2. 外观样式 */
  width: 45px;
  height: 45px;
  background-color: rgba(255, 255, 255, 0.15); /* 半透明背景 */
  -webkit-backdrop-filter: blur(5px);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%; /* 圆形 */
  cursor: pointer; /* 鼠标悬停时显示为手形 */
  outline: none;
  
  /* 3. 初始状态与动画效果 */
  opacity: 0; /* 默认完全透明 */
  visibility: hidden; /* 默认隐藏，无法点击 */
  transform: translateY(20px); /* 默认在下方一点的位置 */
  transition: opacity 0.3s ease, transform 0.3s ease; /* 平滑的过渡动画 */
}

/* 4. 显示时的状态 */
#backToTopBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0); /* 移动回原位 */
}

/* 5. 鼠标悬停时的效果 */
#backToTopBtn:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

/* 6. 按钮内的SVG箭头图标样式 */
#backToTopBtn svg {
  width: 20px;
  height: 20px;
  fill: white;
}