/* 移动端样式 */
@media screen and (max-width: 768px) {
  
    /* 1. 调整 header 布局为横向排列，并分散对齐 */
    header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0;
    }

    h1 {
        display: inline-block; /* 将 h1 设置为行内块元素，避免换行 */
    }

    /* 2. 隐藏 header 中的 h2 元素，简化移动端头部 */
    header h2 {
      display: none;
    }
    
    /* 3. 调整登录按钮的位置，从绝对定位改为静态定位 */
    #login-btn {
      position: static; /* 移除绝对定位 */
      margin-left: 0; /* 移除左外边距 */
      order: 2; /* 确保按钮在 header 的右侧 */
    }
    
    /* 4. 将 main 容器的方向改为垂直排列 */
    main.main {
      flex-direction: column;
    }
    
    /* 5. 重新排列 sidebar 和 homework-wrapper 的顺序 */
    .sidebar {
      order: 2; /* 确保 sidebar 在下方 */
      width: 100%; /* 使 sidebar 占满全宽 */
      margin: 10px 0; /* 上下外边距 */
    }
    
    .homework-wrapper {
      order: 1; /* 确保 homework-wrapper 在上方 */
      width: 100%; /* 使 homework-wrapper 占满全宽 */
    }
    
    /* 6. 确保 homework-list 和 load-more-container 占满全宽 */
    #homeworkContainer {
      width: 100%;
      margin: 0;
      padding: 10px;
    }
    
    #load-more-container {
      margin: 10px 0; /* 上下外边距，避免被遮挡 */
    }
    
    /* 7. 可选：调整 footer 的内边距以适应移动端 */
    footer {
      padding: 10px;
    }
    
    /* 8. 确保用户信息容器在移动端正确显示 */
    .user-container {
      position: static; /* 移除绝对定位 */
      align-items: flex-end; /* 右对齐 */
      margin-top: 10px; /* 上外边距 */
    }
    
    /* /* 9. 可选：调整 Sidebar 中按钮和复选框的样式以适应移动端 */
    .sidebar .category button, 
    .sidebar input[type="checkbox"] {
      width: 100%; /* 使按钮和复选框占满全宽 */
      padding: 10px; /* 增加内边距，提升触控体验 */
    }
    
    /* 10. 可选：调整 Load More 按钮的样式以适应移动端 */
    #loadMoreButton {
      font-size: 18px; /* 增大字体，提升可点击性 */
      padding: 10px 20px; /* 增加内边距 */
    }
    
  }
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.content-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* 确保内容充满页面 */
}

main {
    display: flex;
    flex: 1; /* 使侧边栏和作业列表保持在同一行 */
}

.main {
    display: flex;
    flex: 1;
    align-items: flex-start; /* 保证两者上方对齐 */
}

body {
    font-family: 'Zen Maru Gothic', sans-serif;
    background-image: url('background.webp');
    background-size: cover; /* 保证背景图片覆盖整个页面 */
    background-repeat: no-repeat; /* 不重复 */
    background-attachment: fixed; /* 背景固定，页面滚动时不移动 */
    background-position: center; /* 图片居中 */
    color: white;
}

header {
    /*position: relative; 确保标题正常排列 */
    padding-bottom: 20px; /* 给下面的内容留出空间 */
}

/* 主题色为蓝色，调高透明系数 */
header, footer, .sidebar, .homework-list {
    background-color: rgba(255, 255, 255, 0.2); /* 半透明蓝色背景 */
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
    color: black; /* 黑色文字 */
}

.sidebar {
    top: 0; /* 调整到标题下面 */
    left: 0;
    width: 200px;
    background-color: rgba(255, 255, 255, 0.2);
    color: black;
    padding: 20px;
    height: auto;
    border-radius: 10px;
    /*z-index: 1000;*/
    margin-bottom: 20px;
    flex-shrink: 0; /* 防止侧边栏缩小 */
    margin-right: 5px; /* 删除默认的右侧空隙 */
}



.category h4 {
    margin-bottom: 10px;
}

.homework-list {
    flex: 1; /* 作业列表会占据剩余空间 */
    margin-left: 220px;
    padding: 20px;
    margin-left: 5px; /* 消除左边距 */
    overflow-y: auto;
}

.homework-list li, .transparent-box li {
    list-style-position: inside; /* 确保列表符号在背景框内 */
    padding-left: 10px; /* 给列表符号和文字留出空间 */
    margin-left: 0; /* 确保没有额外的左边距 */
}

.homework-list, .transparent-box, header, .sidebar, footer {
    background-color: rgba(255, 255, 255, 0.2); /* 白色半透明背景 */
    color: black; /* 黑色文字 */
    border-radius: 5px;
    padding: 20px;
    transition: background-color 1.5s ease, color 1.5s ease; /* 过渡动画：1.5秒 */
}

.dark-mode .homework-list, 
.dark-mode .transparent-box,
.dark-mode header, 
.dark-mode .sidebar,
.dark-mode footer {
    background-color: rgba(0, 0, 0, 0.8); /* 黑色半透明背景 */
    color: white; /* 白色文字 */
    transition: background-color 1.5s ease, color 1.5s ease; /* 过渡动画：1.5秒 */
}

/* 调整作业框的透明度 */
.homework-item {
    position: relative; /* 使子元素可以使用绝对定位 */
    background-color: rgba(255, 255, 255, 0.2);
    padding: 15px;
    margin: 10px;
    border-radius: 8px;
}

.homework-status-container {
    position: absolute; /* 固定在作业条目右下角 */
    bottom: 10px;
    right: 10px;
    display: flex;
    align-items: center; /* 垂直居中 */
}

.homework-status-container label {
    display: flex;
    align-items: center;
}

.homework-status {
    margin-right: 5px; /* 给 "Finished" 文本和复选框之间一些间距 */
}


.homework-item p {
    margin-bottom: 5px;
}

.due-date {
    float: right;
}

.expand {
    text-align: center;
    margin-top: 20px;
}


footer {
    background-color: rgba(255, 255, 255, 0.2); /* 白色背景 */
    color: black; /* 黑色文字 */
    text-align: center;
    padding: 10px;
    position: relative; /* 不再使用固定定位，改为相对页面内容 */
    margin-top: auto;
    /*clear: both; /* 确保 footer 显示在内容下面 */
}

#login-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.2); /* Keep this if needed, or adjust to white if preferred */
    color: white;
    border: none;
    padding: 10px;
    border-radius: 5px;
}


#login-btn:hover {
    background-color: rgba(0, 0, 255, 0.3);;
}

#settings-btn {
    background: none;
    color: white;
    border: none;
    margin-top: 20px;
    width: auto; /* 自动适应文本和图标宽度 */
    text-align: left;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 10px; /* 给按钮内的内容更多空间 */
    border-radius: 8px; /* 调整圆角 */
    display: flex; /* 使用 flexbox 来排列图标和文字 */
    align-items: center; /* 垂直居中 */
}

#settings-btn:hover {
    background-color: rgba(0, 0, 255, 0.3);
}

#settings-btn img {
    width: 15px;
    height: 15px;
    margin-right: 5px; /* 给图标和文本之间添加间距 */
}


.category button, input[type="checkbox"] {
    background-color: rgba(255, 255, 255, 0.2); /* 蓝色按钮 */
    color: white;
    border: none;
    padding: 5px;
    border-radius: 5px;
    margin: 5px 0;
}

.expand a {
    cursor: pointer;
    color: white;
}


.category button:hover {
    background-color: rgba(0, 0, 255, 0.3);
}

/* Expand 链接丝滑动画 */
.details {
    display: none;
    transition: max-height 0.5s ease-out;
}

.homework-item.expanded .details {
    display: block;
}

.details.expanded {
    display: block;
    opacity: 1;
    max-height: 200px;
}

.expand a {
    color: white;
    cursor: pointer;
    text-decoration: underline;
}

.expand a:hover {
    color: cyan;
}

/* 最外层元素样式 */
.components{
	position:absolute; /* 改为absolute定位 */
	top: 10px;
	right: 80px; /* 距离login按钮左边一定距离 */
	width: 180px;
	height: 35px; /*原来70px*/
	background-color: rgba(70, 133, 192,1);/* 按钮背景颜色 */
	border-radius: 100px;
	box-shadow: inset 0 0 5px 3px rgba(0, 0, 0, 0.5);/* 按钮的内阴影,实现立体感 */
	overflow: hidden;
	transition: 0.7s;
	transition-timing-function: cubic-bezier( 0,0.5, 1,1);/* 过渡时间贝塞尔曲线,实现非线性动画 */
}

/* 主要按钮样式 */
.main-button{
	margin: 7.5px 0 0 7.5px;
	width: 55px;
	height:55px;
	background-color: rgba(255, 195, 35,1);
	border-radius: 50%;
	box-shadow:3px 3px 5px rgba(0, 0, 0, 0.5), inset  -3px -5px 3px -3px rgba(0, 0, 0, 0.5), inset  4px 5px 2px -2px rgba(255, 230, 80,1);
	cursor: pointer;
	transition: 1.0s;
	transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); /* 加入回弹动画 */
}

.homework-download {
    background-color: rgba(68, 66, 66, 0.5); /* 半透明灰色背景 */
    padding: 10px;
    border-radius: 8px; /* 圆角 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 300px; /* 控制最大宽度 */
    margin-bottom: 10px; /* 在每个下载按钮之间添加间距 */
}

.homework-download a {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #fff; /* 文本颜色白色 */
    width: 100%;
}

.pdf-icon {
    width: 30px;
    height: 30px;
}

.separator {
    color: #ccc; /* 竖杠的颜色 */
    margin: 0 10px;
    font-size: 30px;
}

.file-name {
    font-size: 14px;
}

a {
    text-decoration: none;
    color: #007BFF; /* 设置链接的颜色 */
}

a:hover {
    color: #0056b3; /* 鼠标悬停时的颜色 */
}



/* 陨石坑样式 */
.moon{
	position: absolute;
	background-color: rgba(150, 160, 180, 1);
	box-shadow:inset 0px 0px 1px 1px rgba(0, 0, 0, 0.3) ;
	border-radius: 50%;
	transition: 0.5s;
	opacity: 0;
}

/* 第一个陨石坑 */
.moon:nth-child(1){
	top: 7.5px;
	left: 25px;
	width: 12.5px;
	height: 12.5px;
}

/* 第二个陨石坑 */
.moon:nth-child(2){
	top: 20px;
	left: 7.5px;
	width: 20px;
	height: 20px;
}

/* 第三个陨石坑 */
.moon:nth-child(3){
	top: 32.5px;
	left: 32.5px;
	width: 12.5px;
	height: 12.5px;
}

/* 按钮背后的虚影 */
.daytime-backgrond {
	position: absolute;
	border-radius: 50%;
	transition: 1.0s;
	transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); /* 加入回弹动画 */
}

/* 按钮背后的第一个虚影 */
.daytime-backgrond:nth-child(2){
	top: -20px;
	left: -20px;
	width: 110px;
	height:110px;
	background-color: rgba(255, 255, 255,0.2);
	z-index: -2;
}

/* 按钮背后的第二个虚影 */
.daytime-backgrond:nth-child(3){
	top: -32.5px;
	left: -17.5px;
	width: 135px;
	height:135px;
	background-color: rgba(255, 255, 255,0.1);
	z-index: -3;
}

/* 按钮背后的第三个虚影 */
.daytime-backgrond:nth-child(4){
	top: -45px;
	left: -15px;
	width: 160px;
	height:160px;
	background-color: rgba(255, 255, 255,0.05);
	z-index: -4;
}

/* 云和云层虚影的初始位置 */
.cloud,.cloud-light{
	transform: translateY(10px);
	transition: 1.0s;
	transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); /* 加入回弹动画 */
}

/* 云和虚影统一样式 */
.cloud-son{
	position: absolute;
	background-color: #fff;
	border-radius: 50%;
	z-index: -1;
	transition: transform 6s,right 1s,bottom 1s;
}


/* 云和虚影由6个圆形组成，第1个圆形和第7个圆形大小相同 */
.cloud-son:nth-child(6n+1){
	right: -20px;
	bottom: 10px;
	width: 50px;
	height: 50px;
}

/* 云和虚影由6个圆形组成，第2个圆形和第8个圆形大小相同 */
.cloud-son:nth-child(6n+2) {
	right: -10px;
	bottom: -25px;
	width: 60px;
	height: 60px;
}

/* 云和虚影由6个圆形组成，第3个圆形和第9个圆形大小相同 */
.cloud-son:nth-child(6n+3) {
	right: 20px;
	bottom: -40px;
	width: 60px;
	height: 60px;
}

/* 云和虚影由6个圆形组成，第4个圆形和第10个圆形大小相同 */
.cloud-son:nth-child(6n+4) {
	right: 50px;
	bottom: -35px;
	width: 60px;
	height: 60px;
}

/* 云和虚影由6个圆形组成，第5个圆形和第11个圆形大小相同 */
.cloud-son:nth-child(6n+5) {
	right: 75px;
	bottom: -60px;
	width: 75px;
	height: 75px;
}

/* 云和虚影由6个圆形组成，第6个圆形和第12个圆形大小相同 */
.cloud-son:nth-child(6n+6) {
	right: 110px;
	bottom: -50px;
	width: 60px;
	height: 60px;
}

/* 云层在-2层 */
.cloud{
	z-index: -2;
}

/* 云层虚影在云层下方,并且整体上移,逆时针旋转5度 */
.cloud-light{
	position: absolute;
	right: 0px;
	bottom: 25px;
	opacity: 0.5;
	z-index: -3;
	/*transform: rotate(-5deg);*/
}


/* 所有星星样式 */
.stars{
	transform: translateY(-125px);
	z-index: -2;
	transition: 1.0s;
	transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); /* 加入回弹动画 */
}

/* 大星星的宽高 */
.big {
	--size: 7.5px;
}

/* 中星星的宽高 */
.medium {
	--size: 5px;
}

/* 小星星的宽高 */
.small {
	--size: 3px;
}

/* 星星绝对定位 */
.star {
	position: absolute;
	width: calc(2*var(--size));
	height: calc(2*var(--size));
}

/* 所有星星的位置 */
.star:nth-child(1){
	top: 11px;
	left: 39px;	
	animation-name: star;
	animation-duration: 3.5s;
}

.star:nth-child(2){
	top: 39px;
	left: 91px;	
	animation-name: star;
	animation-duration: 4.1s;

}

.star:nth-child(3){
	top: 26px;
	left: 19px;	
	animation-name: star;
	animation-duration: 4.9s;

}

.star:nth-child(4){
	top: 37px;
	left: 66px;	
	animation-name: star;
	animation-duration: 5.3s;

}

.star:nth-child(5){
	top: 21px;
	left: 75px;	
	animation-name: star;
	animation-duration: 3s;

}

.star:nth-child(6){
	top: 51px;
	left: 38px;	
	animation-name: star;
	animation-duration: 2.2s;

}

@keyframes star {
	0%,20%{
		transform: scale(0);
	}
	20%,100% {
		transform: scale(1);
	}
}

/* 每一个星星由四个div向左浮动,拼合而成 */
.star-son{
	float: left;
}

.star-son:nth-child(1) {
	--pos: left 0;
}

.star-son:nth-child(2) {
	--pos: right 0;
}

.star-son:nth-child(3) {
	--pos: 0 bottom;
}

.star-son:nth-child(4) {
	--pos: right bottom;
}

/* 星星 */
.star-son {
	width: var(--size);
	height: var(--size);
	background-image: radial-gradient(circle var(--size) at var(--pos), transparent var(--size), #fff);
}

/* 将星星闪烁动画应用于所有的star元素 */
.star{
	transform: scale(1);
	transition-timing-function: cubic-bezier(0.56, 1.35, 0.52, 1.00); /* 加入回弹动画 */
    transition: 1s;
	/* 无限次重复动画 */
	animation-iteration-count:infinite;
	/* 动画在每个循环中正反交替播放 */
	animation-direction: alternate;
	animation-timing-function: linear;
}

/* 添加星星闪烁动画 */
.twinkle {
     transform: scale(0);
}

/* Light 模式默认的半透明白色框 */
.transparent-box {
    background-color: rgba(255, 255, 255, 0.2); /* 白色半透明框 */
    color: black; /* 默认黑色文字 */
    border-radius: 5px;
    padding: 20px;
}

/* Dark 模式的样式 */
.dark-mode .transparent-box {
    background-color: rgba(0, 0, 0, 0.8); /* 黑色半透明框 */
    color: white; /* 白色文字 */
}