body, html {
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: 100%;
  background: linear-gradient(to bottom, #151828 0%, #181d36 75%, #2E1C40 100%); /* 渐变背景色 */
  font-family: "Poppins",sans-serif;
  position: relative;
}

body::-webkit-scrollbar {
  display: none;
}

#container {
  display: flex;
  justify-content: center; /* 水平居中 */
  height: calc(100vh - 20px); /* Reduced height by 20px to give space for indicator */
  transition: transform 0.5s ease-in-out;
}

#title {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 36px 0px 0px 0px;
  font-size: 3.0em;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  color: #ffffff; /* 设置文字颜色 */
  transition: margin-top 0.5s ease-in-out; /* 添加过渡效果 */
}

#subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: -9px 0px 54px 0px;
  font-size: 1.5em;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #bdbcec; /* 设置文字颜色 */
}

.screen {
  display: grid;
  grid-template-columns: repeat(3, minmax(300px, 360px)); /* 3列，每列最小200px，最大360px */
  grid-column-gap: 80px; /* 横向间隙为80px */
  grid-row-gap: 20px; /* 纵向间隙为40px */
  width: 100%; /* 容器宽度为100%，确保占满整个屏幕 */
  box-sizing: border-box; /* 确保内边距和边框包含在元素的宽度和高度中 */
  padding: 0 20px; /* 添加内边距，确保整体布局有空间 */
  position: absolute;
  justify-content: center; /* 水平居中 */
}

.icon-with-text {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: left; /* 水平居中标题和描述 */
  margin-bottom: 17px; /* 在每个图标组合之间添加间距 */
  opacity: 1;
  animation: opacity 0.4s ease-in-out;
}

.icon-with-text.hover-active::after {
  /* 半透明的背景色和圆角矩形的样式 */
  content: "";
  position: absolute;
  bottom: -10px;
  right: -30px;
  left: -30px;
  top: -20px;
  padding: 20px 30px 10px 30px;
  background-color: rgba(215, 223, 255, 0.08); /* 半透明的背景色 */
  border-radius: 10px; /* 圆角矩形的圆角半径 */
  pointer-events: none; /* 阻止鼠标悬停时指针变为小手 */
  animation: opacity 0.4s ease-in-out;
}

.icon {
  width: 100%; /* 图标宽度为网格列宽的100% */
  background-color: #33333300; /* 图标背景颜色 */
  color: white; /* 图标文字颜色 */
  display: flex; /* 使用flex布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border-radius: 10px; /* 图标圆角 */
  height: 120px; /* 设置图标高度 */
  margin-bottom: 11px; /* 图标与标题之间的间距 */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); /* 定义裁剪路径 */
  overflow: hidden; /* 隐藏超出边界的部分 */
  pointer-events: none; /* 阻止鼠标悬浮时指针变为小手 */
  z-index: 1000;
}

.icon-outline {
  border: 2px dashed rgba(255, 255, 255, 0.2); /* 虚线描边 */
  background-color: #ffffff12;
}

/* 确保图片在裁剪区域内 */
.icon img {
  width: auto; /* 图片宽度为icon宽度 */
  height: 100%; /* 图片高度自动调整 */
}

.start img {
  cursor: pointer;
  width: 20px; 
  height: 20px; 
  position: absolute;
  right: 20px;
  margin-top: -40px;
  display: none;
  animation: opacity 0.4s ease-in-out;
}

.start img.show {
  width: 20px; 
  height: 20px; 
  position: absolute;
  right: 20px;
  margin-top: -40px;
  display: block;
  opacity: 1;
  animation: opacity 0.4s ease-in-out;
}

.icon-title {
  font-size: 1.2em; /* 设置小标题字体大小 */
  margin: 0; /* 重置标题的外边距 */
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: white; /* 图标文字颜色 */
}

.icon-description {
  font-size: 1em; /* 设置描述词字体大小 */
  font-weight: 300;
  margin: 0 0 4px 0; /* 重置描述词的外边距 */
  color: #bdbcecc2; /* 描述词颜色 */
}

.screen1 {
  left: 0;
}

.screen2 {
  top: 0px;
  left: 0; /* 修改这里，确保 screen2 不会被推到视口外 */
  transform: translateX(100vw); /* 使用 transform 替代 left 来移动 screen2，避免影响布局 */
}

#footer {
  position: relative; /* Fixed positioning relative to the viewport */
  bottom: 25px; /* 10px from the bottom */
  width: 100%; /* Full width */
  z-index: 1000;
  transition: margin-top 0.5s ease-in-out; /* 添加过渡效果 */
}

#indicator {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed; /* Fixed positioning relative to the viewport */
  bottom: 25px; /* 10px from the bottom */
  width: 100%; /* Full width */
  z-index: 1000;
  transition: margin-top 0.5s ease-in-out; /* 添加过渡效果 */
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%; /* 圆点是圆形的 */
  background-color: #ffffff30; /* 默认颜色 */
  margin: 0 5px; /* 圆点之间的间距 */
  z-index: 1000;
}

.dot.active {
  background-color: #ffffffa8; /* 高亮颜色 */
  z-index: 1000;
}

.poweredby {
  position: fixed; /* 使用固定定位 */
  bottom: 25px; /* 距离底部一定距离 */
  right: 100px; /* 距离右侧一定距离 */
  z-index: 1000;
}

.beian {
  position: fixed; /* 使用固定定位 */
  bottom: 25px; /* 距离底部一定距离 */
  left: 100px; /* 距离左侧一定距离 */
  z-index: 1000;
}

.beian a {
  color: #ffffff60;
  text-decoration: none;
  font-size: 14px;
  font-family: 'Poppins', sans-serif;
}

.beian a:hover {
  color: #ffffff90;
}

.poweredby2 {
  position: fixed; /* 使用固定定位 */
  top: -305px; /* 距离底部一定距离 */
  left: 40px; /* 距离右侧一定距离 */
  z-index: 0;
}

.gloweffect {
  position: absolute; /* 使用固定定位 */
  top: -400px; /* 距离底部一定距离 */
  left: -720px; /* 距离右侧一定距离 */
  opacity: 0; /* Start with 0 opacity */
  transition: opacity 0.5s ease;
  z-index: 0;
}

/* 禁用横向滑动 */
.disable-horizontal-scroll {
  overflow-x: hidden;
}

.no-select {
  user-select: none; /* For Windows */
  -webkit-user-select: none; /* For Mac */
  -moz-user-select: none; /* For Firefox */
  -ms-user-select: none; /* For IE10+ */
  -o-user-select: none; /* For Opera */
}


/* (orientation: portrait) 竖屏设备的判定 */

@media (max-height: 800px) {
  body, html {
    overflow-y: auto;
  }
}

@media (max-width: 1100px) and (max-height: 1100px) {
  body, html {
    overflow-y: auto;
  }
}

@media  (min-width: 768px) and (max-height: 800px) {
  .poweredby {
    display: none; /* 在手机端隐藏 poweredby 组件 */
  }
}

@media  (max-width: 768px)  {
  .poweredby {
    display: none; /* 在手机端隐藏 poweredby 组件 */
  }
}

@media  (max-width: 1060px) and (max-height: 1160px) {
  .poweredby {
    display: none; /* 在手机端隐藏 poweredby 组件 */
  }
}

/* 针对不同屏幕宽度的响应式样式 */
@media (max-width: 1440px) { /* 当视窗宽度小于1440px时，调整为3列 */
  .screen {
    grid-template-columns: repeat(3, minmax(200px, 360px));
    padding: 0 80px; /* 在浏览器宽度较小时，增加两侧间距 */
  }
}

@media (max-width: 1100px) { /* 当视窗宽度小于1000px时，调整为2列 */
  .screen {
    grid-template-columns: repeat(2, minmax(200px, 360px));
  }
}


@media (max-width: 540px) { /* 当视窗宽度小于600px时，调整为1列 */
  body, html {
    overflow-y: auto;
  }
  .screen {
    grid-template-columns: minmax(200px, 360px);
    padding: 0 14%; /* 在浏览器宽度较小时，增加两侧间距 */
  }
  .icon {
    height: 120px; /* 在小屏幕上减小图标高度 */
  }
}

@media (max-width:  540px) { /* 大屏手机的适配 */
  body, html {
    overflow-y: auto;
  }
  .screen {
    grid-template-columns: minmax(200px, 360px);
    padding: 0 15%; 
    grid-row-gap: 0px; /* 纵向间隙为0px */
  }
  .icon {
    height: 110px; /* 在小屏幕上减小图标高度 */
  }
  #title {
    font-size: 2.6rem;
    margin: 20px 0px 0px 0px;
  }
  #subtitle {
    font-size: 1.2rem;
    margin: 0px 0px 30px 0px;
  }
  .icon-title {
    font-size: 1.2em; /* 设置小标题字体大小 */
  }
  .icon-description {
    font-size: 1em; /* 设置描述词字体大小 */
    margin: 0 0 6px 0; /* 重置描述词的外边距 */
  }
  .icon-with-text.hover-active::after {
    background-color: rgba(215, 223, 255, 0); /* 半透明的背景色 */
  }
}

@media (max-width: 420px) { /* 小屏手机的适配，如 mini & 6s */
  body, html {
    overflow-y: auto;
  }
  .screen {
    grid-template-columns: minmax(200px, 360px);
    padding: 0 12%; 
    grid-row-gap: 0px; /* 纵向间隙为0px */
  }
  .icon {
    height: 100px; /* 在小屏幕上减小图标高度 */
  }
  #title {
    font-size: 2.4rem;
    margin: 20px 0px 0px 0px;
  }
  #subtitle {
    font-size: 1.1rem;
    margin: 0px 0px 30px 0px;
  }
  .icon-title {
    font-size: 1.2em; /* 设置小标题字体大小 */
  }
  .icon-description {
    font-size: 1em; /* 设置描述词字体大小 */
    margin: 0 0 0 0; /* 重置描述词的外边距 */
  }
  .icon-with-text.hover-active::after {
    background-color: rgba(215, 223, 255, 0); /* 半透明的背景色 */
  }
}


@media (min-height: 800px) and (min-width: 768px)  { 
  #title {
    margin-top: 2.5vh;
  }
}

@media (min-height: 800px) and (min-width: 768px)  { 
  #title {
    margin-top: 4vh;
  }
}

@media (min-height: 1080px) and (min-width: 960px)  { 
  #title {
    margin-top: 8vh;
  }
}


@media (min-height: 1150px) and (min-width: 960px)  { 
  #title {
    margin-top: 8vh;
  }
}

@media (min-height: 700px) and (min-width: 1800px)  { 
  #title {
    margin-top: 5vh;
  }
}

@media (min-height: 900px) and (min-width: 1800px)  { 
  #title {
    margin-top: 8vh;
  }
}

@media (min-height: 1080px) and (min-width: 1800px)  { 
  #title {
    margin-top: 11vh;
  }
}

@media (min-height: 1280px) and (min-width: 1100px)  { 
  #title {
    margin-top: 15vh;
  }
}

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* @media only screen and (max-device-width: 767px) {
  .poweredby {
    display: none; 
  }
} */