/* 
  全局样式：
  * 将所有元素的 margin 和 padding 设置为 0，并使用 border-box 盒模型。
  * 设置默认字体为 "Noto Sans"。
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans", sans-serif;
}

/* 
  .box 样式：
  * 绝对定位，充满父元素。
  * 设置圆角边框。
  * 设置 z-index 为 1000，使其显示在其他元素之上。
*/
.box {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1000;
}

/* 
  .box::after 伪元素样式：
  * 创建一个伪元素，用于显示指针。
  * 绝对定位，底部居中。
  * 设置宽度、高度、背景颜色和圆角边框。
*/
.box::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 30px;
  background: var(--clr);
  border-radius: 4px;
}

/* 
  .box:nth-child(1)::after 伪元素样式：
  * 设置第一个 .box 元素的指针的高度和宽度。
*/
.box:nth-child(1):after {
  height: 20px;
  width: 4px;
}

/* 
  .box:nth-child(2)::after 伪元素样式：
  * 设置第二个 .box 元素的指针的高度和宽度。
*/
.box:nth-child(2):after {
  height: 25px;
  width: 3px;
}

/* 
  body 样式：
  * 设置 flex 布局，水平居中。
  * 设置最小高度和高度为 100vh。
*/
body {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  height: 100vh;
  background: url("https://bing.img.run/1920x1080.php") no-repeat center center fixed;
  background-size: cover;

}



/* 
  background 样式：
  * 设置背景图片不重复、固定、居中显示、充满整个容器。
*/

/*
  .clock 样式：
  * 设置相对定位。
  * 设置 flex 布局，并设置元素之间的间 gap 为 20px。
*/
.clock {
  position: relative;
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

/* 
  .clock .digital 样式：
  * 设置相对定位。
  * 设置宽度、高度、背景颜色、圆角边框和阴影。
*/
.clock .digital {
  position: relative;
  width: 120px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #c9d5e0;
  border-radius: 30px;
  box-shadow: 20px 20px 20px -10px rgba(0, 0, 0, 0.15),
    inset 15px 15px 10px rgba(255, 255, 255, 0.5),
    -15px -15px 35px rgba(255, 255, 255, 0.35),
    inset -1px -1px 10px rgba(0, 0, 0, 0.2);
}

/* 
  .clock .digital .screen 样式：
  * 设置绝对定位。
  * 设置背景颜色、圆角边框和阴影。
*/
.clock .digital .screen {
  position: absolute;
  inset: 20px;
  background: #152b4a;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 15px 0 #152b4a66,
    inset 5px 5px 5px rgba(255, 25, 255, 0.35),
    -6px -6px 10px rgba(255, 255, 255, 1);
}

/* 
  .clock .digital .screen::before 伪元素样式：
  * 创建一个伪元素，用于显示标签文本。
  * 设置绝对定位，底部居中。
  * 设置字体大小、颜色、字母间距和文本转换。
*/
.clock .digital .screen::before {
  content: attr(data-text);
  position: absolute;
  bottom: -21px;
  left: 50%;
  transform: translateX(-50%) scale(0.75);
  letter-spacing: 0.1rem;
  color: #333;
  text-transform: uppercase;
}

/* 
  .clock .digital .time 样式：
  * 设置绝对定位。
  * 设置 flex 布局，水平居中。
*/
.clock .digital .time {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 
  .clock .digital .time div 样式：
  * 设置相对定位。
  * 设置字体大小、颜色和字母间距。
*/
.clock .digital .time div {
  position: relative;
  font-size: 2.9rem;
  color: var(--clr);
  letter-spacing: 0.1rem;
  margin-left: 0.1rem;
}

/* 
  .clock .digital:last-child::before 伪元素样式：
  * 为最后一个 .digital 元素创建一个伪元素，用于显示指示灯。
  * 设置绝对定位。
  * 设置宽度、高度、背景颜色、边框、圆角边框和 z-index。
*/
.clock .digital:last-child::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #152b4a;
  border: 2px solid #fff;
  z-index: 1000;
  border-radius: 50%;
}

/* 
  .clock .digital:last-child::after 伪元素样式：
  * 为最后一个 .digital 元素创建一个伪元素，用于显示指示灯背景。
  * 设置绝对定位。
  * 设置背景颜色、圆角边框和阴影。
*/
.clock .digital:last-child::after {
  content: "";
  position: absolute;
  inset: 20px;
  background: #152b4a;
  border-radius: 50%;
  box-shadow: 5px 5px 15px 0 #152b4a66,
    inset 5px 5px 5px rgba(255, 25, 255, 0.35),
    -6px -6px 10px rgba(255, 255, 255, 1);
}

/* 
  #ampm 样式：
  * 设置绝对定位，底部居中。
  * 设置字体大小、颜色和字母间距。
*/
#ampm {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.75);
  color: #333;
  letter-spacing: 0.1rem;
}


/* 样式平滑转动的设置 */
/*noinspection CssInvalidFunction*/
#hr, #mn, #sc {
    transition: transform 1s linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
}

#hr {
  z-index: 100;
  --clr:#ff2972;
}

#mn {
  z-index: 90;
  --clr:#fee800;
}

#sc {
  z-index: 80;
  --clr:#04fc43;
}



/* tnnd终于居中了 */
.date {
  position: absolute;  /* 绝对定位 */
  margin-top: 180px;  /* 留白 */
  color: white; /* 白色 */
  font-family: sans-serif;  /* 字体 */
  font-size: 1.7rem;  /* 大小 */
  text-shadow: 0 0 20px black;  /* 阴影 */
  text-align: center;  /* 水平居中对齐 */
  width: 100%;  /* 占满宽度以确保文字居中 */
  padding: 2px;  /* 添加内边距 */
}

.cd {
  position: absolute;  /* 绝对定位 */
  margin-top: 235px;  /* 留白 */
  color: white; /* 白色 */
  font-family: sans-serif;  /* 字体 */
  font-size: 1.7rem;  /* 大小 */
  text-shadow: 0 0 20px black;  /* 阴影 */
  text-align: center;  /* 水平居中对齐 */
  width: 100%;  /* 占满宽度以确保文字居中 */
  padding: 2px;  /* 添加内边距 */
}

/* 添加日期背景容器 */
.date::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 290px;  /* 固定宽度 */
  height: 100%;
  background-color: rgba(255, 255, 255, 0.0);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border-radius: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: -1;
  border: #bbbbbba3 solid 0.5px;
}

.cp {
  position: absolute;  /* 绝对定位 */
}

.cd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 350px;  /* 固定宽度 */
  height: 100%;
  background-color: rgba(255, 255, 255, 0.0);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border-radius: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: -1;
  border: #bbbbbba3 solid 0.5px;
}

.cp::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 680px;  /* 固定宽度 */
  height: 100%;
  background-color: rgba(255, 255, 255, 0.0);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
  border-radius: 300px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  z-index: -1;
  border: #bbbbbba3 solid 0.5px;
}







/* 课程表了个贝的 */
#scheduleTable {
  position: absolute;
  border-collapse: collapse;
  overflow: hidden; /* 避免内容溢出圆角 */
  width: 350px; 
  top: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.0); /* 半透明白色背景 */
  font-size: 1.3rem;
  -webkit-backdrop-filter: blur(50px); /* 高斯模糊 */
  backdrop-filter: blur(50px); /* 高斯模糊 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  border-radius: 10px; /* 圆角 */



}

table th, table td {
  border: 1px solid #333;
  padding: 0; /* qnmd内边距 */
  text-align: center;
  width: 12px; /* 设置单元格宽度为12px */
  height: 6px; /* 设置单元格高度为6px */
  text-shadow: 
  -0.8px -0.8px 0 rgb(200, 200, 200),   /* 左上 */
  0.8px -0.8px 0 rgb(200, 200, 200),    /* 右上 */
  -0.8px 0.8px 0 rgb(200, 200, 200),    /* 左下 */
  0.8px 0.8px 0 rgb(200, 200, 200);     /* 右下 */
  font-weight: bold; /* 加粗 */

}

table th {
  background-color: #acacac; /* 表头背景色 */
  cursor: pointer; /* 鼠标变为手形 */
}

/* 添加斑马纹效果：偶数行的背景色 */
table tr:nth-child(odd) {
  background-color: rgba(255, 255, 255, 0.6); /* 白色背景 */
}

/* 奇数行背景保持默认白色 */
table tr:nth-child(even) {
  background-color: rgba(200, 200, 200, 0.8); /* 灰色背景 */
}

/* 隐藏表格内容时的样式 */
table.collapsed tbody {
  display: none; /* 折叠表格内容 */
}

/* 值日表了个贝的 */
#dutyTable {
  position: absolute;
  border-collapse: collapse;
  overflow: hidden; /* 避免内容溢出圆角 */
  table-layout: fixed;
  bottom: 47px;
  right: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  -webkit-backdrop-filter: blur(50px); /* 高斯模糊 */
  backdrop-filter: blur(50px); /* 高斯模糊 */
  border-radius: 10px; /* 圆角 */
}


#dutyTable th, #dutyTable td {
  text-align: center;
  border: 1px solid #000;
  height: 25px; /* 固定每行高度为25px */
}

/* 第一列宽度设置为30px */
#dutyTable th:nth-child(1),
#dutyTable td:nth-child(1) {
  width: 32px;
}

/* 第二、三、四、五列宽度设置为80px */
#dutyTable th:nth-child(2),
#dutyTable th:nth-child(3),
#dutyTable th:nth-child(4),
#dutyTable th:nth-child(5),
#dutyTable td:nth-child(2),
#dutyTable td:nth-child(3),
#dutyTable td:nth-child(4),
#dutyTable td:nth-child(5) {
  width: 60px;
}

/* 第六列宽度设置为30px */
#dutyTable th:nth-child(6),
#dutyTable td:nth-child(6) {
  width: 30px;
}


#donate {
  position: fixed;   /* 固定定位 */
  bottom: 3.5%;         /* 留给任务栏 */
  left: 50%;         /* 水平居中 */
  transform: translateX(-50%);  /* 将图片本身水平居中 */
  z-index: 1000;     /* 保证图片在最前面 */
  width: auto;      /* 图片宽度 */
  height: auto;      /* 自动调整高度 */
  cursor: pointer;   /* 鼠标悬浮时显示手型 */
  transition: transform 1s ease, opacity 1s ease;  /* 添加平滑过渡效果 */
  }

#donate.hidden {
  transform: translate(-50%, 100%);  /* 图片向下掉出屏幕 */
  opacity: 0;  /* 渐隐效果 */
}