body {
  background-color: #f5391c;
  color: #fecc11;
  margin: 0;
  position: relative;
  /* 字体区 */
  /* 云峰飞云体 */
  /* font-family: "YFFYT";
  font-weight: normal; */

  /* 网格主题 */
  /* --color: rgba(114, 114, 114, 0.3);
  background-color: #1a1919;
  background-image: linear-gradient(
      0deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    ),
    linear-gradient(
      90deg,
      transparent 24%,
      var(--color) 25%,
      var(--color) 26%,
      transparent 27%,
      transparent 74%,
      var(--color) 75%,
      var(--color) 76%,
      transparent 77%,
      transparent
    );
  background-size: 55px 55px; */
}
.time_zone {
  display: flex;
  gap: 20px;
  font-size: 10cqw;
  justify-content: center;
  align-items: center;
  height: 100vh;
  user-select:none;
}

/* 文字大小响应式布局 */

@media (max-width: 600px) {
  .time_zone {
    font-size: 9cqw;
  }
}


@media (max-width: 330px) {
  .time_zone {
    font-size: 7cqw;
  }
}

@media (max-width: 160px) {
  .time_zone {
    font-size: 6cqw;
  }
}

.title {
  position: absolute;
  top: calc(50% - 0cqw);
  left: 50%;
  transform: translate(-50%, -100%);
  text-align: center;
  z-index: 5;
  font-size: 4.5cqw;
  color: inherit;
  white-space: nowrap;
  user-select: none;

}

/* 标题响应式布局 */
@media (max-width: 600px) {
  .title {
    font-size: 3.5cqw;
    top: calc(50% - 0cqw);
  }
}

@media (max-width: 400px) {
  .title {
    font-size: 3cqw;
    top: calc(50% - 0cqw);
  }
}

@media (max-width: 300px) {
  .title {
    font-size: 2.5cqw;
    top: calc(50% - 0cqw);
  }
}

.navbar_button {
  display: flex;
  width: 50px;
  height: 50px;
  background-color: #ffffff00;
  /* border: 1px solid #fff; */
  position: absolute; /* 设置为绝对定位，使其不参与flex布局 */
  z-index: 10; /* 确保在其他元素之上 */
}
.settings_page{
    /* width: 50cqw;
    height: 35cqw; */
    border-radius: 20px;
    position: absolute;
    z-index: 10;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.settings_item{
    display: flex;
    margin: 10px 10px;
}
.settings_item > div:first-child {
    white-space: nowrap;
}
.settings_item_close{
    display: flex;
    justify-content: space-between;
    margin: 10px 10px;
}
.frosted_glass_effect{
    height: 30px;
    background-color: #00000000;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    color: #8d8d8d;
    border: 0px solid #fff;
}
.settings_item_save{
  margin: 10px 10px;
}
.settings_item_buttons{
    margin: 10px 10px;
    display: flex;
    justify-content: space-between;
}