/* 链接样式 */
a:link {
    color: MediumVioletRed;
}
a:visited {
    color: #D6659F;
}
a:hover {
    color: deeppink;
}

/* 通用文本样式 */
.colorHead {
    color: #64002B;
}

.colorText {
    color: MediumVioletRed;
    text-align: center;
}

.copyright{
	text-align: center;
	color:rgba(100, 0, 43, 0.5);
	
}


.navtext{
background: linear-gradient(to top, rgba(220, 220, 220, 0.6) 10%, transparent 100%);
margin:-2px;
border-radius: 5px;
border: 2px outset rgba(199, 21, 133, 0.3);
padding: 2px;
	
}

.library-title{
    background-color: rgba(255, 182, 193, 0.3); /* 背景 */
    border-radius: 3px; /* 可选，圆角效果 */
    display: inline-block; /* 保持背景仅包裹文字 */
}	

.line {
	
    color: MediumVioletRed;
    text-align: center;
    text-shadow: 2px 2px 4px rgba(250, 250, 250, 0.6);
    animation: smooth-glow 3s infinite ease-in-out;
}


@keyframes smooth-glow {
  0%, 100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px lightpink, 0 0 20px lightpink, 0 0 30px lightpink, 0 0 40px lightpink;
  }
  25% {
    text-shadow: 0 0 8px #fff, 0 0 16px lightpink, 0 0 24px lightpink, 0 0 32px lightpink, 0 0 40px lightpink, 0 0 50px lightpink;
  }
  50% {
    text-shadow: 0 0 12px #fff, 0 0 20px lightpink, 0 0 30px lightpink, 0 0 40px lightpink, 0 0 50px lightpink, 0 0 60px lightpink;
  }
  75% {
    text-shadow: 0 0 8px #fff, 0 0 16px lightpink, 0 0 24px lightpink, 0 0 32px lightpink, 0 0 40px lightpink, 0 0 50px lightpink;
  }
}


/* 全局样式 */
body {
    font-family: 'Segoe Print', '等线', 'Comic Sans MS', 'Courier', Arial, sans-serif;
    background-size: cover;
    margin: 0;
    padding: 0;
}
		
/* 横向滑动条与容器 */
.horizontal-scroll {
    display: flex;
    gap: 20px;
    overflow-x: auto; /* 使容器可以水平滚动 */
    padding: 15px;
    scroll-snap-type: x mandatory; /* 添加滚动吸附效果 */
}

.horizontal-scroll::-webkit-scrollbar {
    height: 9px;
}

.horizontal-scroll::-webkit-scrollbar-track {
    background: lightpink;
}

.horizontal-scroll::-webkit-scrollbar-thumb {
    background-color: #64002B;
    border-radius: 4px;
}

.slide {
    flex: 0 0 auto;
    width: 200px; /* 调整每个图片容器的宽度 */
    text-align: center;
	margin-right: 100px;
}

.slide img {
    width: 150%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.slide-achive {
    flex: 0 0 auto;
    width: 130px; /* 调整每个图片容器的宽度 */
    text-align: center;
	margin-right: 100px;
}

.slide-achive img {
    width: 150%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.slide-name {
	width: 150%;
    margin-top: 5px;
    font-size: 0.9em;
    color: #64002B;
}

/* 响应式布局 */
@media (max-width: 768px) {
    .slide {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}
			
			
/* 个人资料样式（标题） */

.profile {
    display: inline-block;
    margin-left: 180px;
    vertical-align: top;
}

.profile-blog {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1000;
        padding: 10px; /* 可调整边距 */
}
.slogan {
        position: absolute;
        top: 100;
        right: 0;
        z-index: 1000;
        padding: 60px; /* 可调整边距 */
		color: rgba(139, 0, 139,0.6);
		text-align: center;
		text-shadow: 3px 3px 3px rgba(250, 250, 250, 0.5);

}

.deco-upleft {
        position: absolute;
        z-index: 1000;
		transform: translate(20px, -50px);	
}

.deco-upright {
        position: absolute;
        z-index: -1000;
		top: 0;
        right: 0; /* 可调整边距 */
}

.deco-right {
        position: absolute;
        z-index: 0;
		top: 0;
        right: 0; /* 可调整边距 */

}

        .shake {
            animation: shake 0.5s infinite;
        }
        @keyframes shake {
            0% { transform: translate(1px, 1px) rotate(0deg); }
            10% { transform: translate(-1px, -2px) rotate(-1deg); }
            20% { transform: translate(-3px, 0px) rotate(1deg); }
            30% { transform: translate(3px, 2px) rotate(0deg); }
            40% { transform: translate(1px, -1px) rotate(1deg); }
            50% { transform: translate(-1px, 2px) rotate(-1deg); }
            60% { transform: translate(-3px, 1px) rotate(0deg); }
            70% { transform: translate(3px, 1px) rotate(-1deg); }
            80% { transform: translate(-1px, -1px) rotate(1deg); }
            90% { transform: translate(1px, 2px) rotate(0deg); }
            100% { transform: translate(1px, -2px) rotate(-1deg); }
        }



/* 视频缩略图容器相关 */
.video-thumbnail {
    flex: 1 1 calc(25% - 20px); /* 保持原有设置 */
    box-sizing: border-box;
    text-align: center;
    padding: 10px; /* 添加内部边距，使内容和边框之间有空隙 */
    background-color:rgba(255, 255, 255, 0.5);/* 你可以选择一个背景色，以突出缩略图 */
    border-radius: 8px; /* 圆角，可以更柔和的视觉效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 可选，增加阴影效果 */
}


.videoscale {
    width: 100%; /* 确保图片自适应容器 */
    height: auto;
    display: block;
    margin: 0 auto;
}


.video-title {
    font-size: 1em; /* 根据容器大小调整字体 */
    margin-top: 10px;
    text-align: center;
}
		
/* 横幅、导航和页脚样式 */
.banner {
    text-align: center;
	margin-top: -200px;
    margin-left: 600px;
    width: 80%;
    border: 5px pink;
}

.nav {
	flex:7;
    text-align: center;
	margin-top: -20px;
    margin-left: 360px;
    width: 80%;
    border: 5px pink;
	scale:1;
}




.footer {
    text-align: center;
    margin: 20px auto;
    width: 82%;
    border: 0px dashed pink;
	
}

/* blog样式 */

.blog-header {
font-family: 'Segoe Print', 'Comic Sans MS', 'Courier', 'Microsoft YaHei UI', Arial, sans-serif; /* 更改字体 */
font-weight: light; /* 更改字体粗细 */
color: #64002B; /* 更改字体颜色 */		
    text-align: center;
    padding: 20px;
    background: rgba(255, 255, 255, 0.3);
    border-bottom: 5px solid #D6659F;
}

.blog-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin: 20px auto;
    padding: 20px;
    width: 80%;
    max-width: 1200px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
    border-radius: 15px;
}


#post-list {
    width: 25%;
    margin-right: 20px;
    border-right: 2px solid #D6659F;
    padding-right: 20px;
}

#post-list a {
    display: block;
    font-size: 1.2em;
    color: #64002B;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.3s;
}

#post-list a:hover {
    color: #FF0066;
}

#content {
    width: 70%;
    padding-left: 20px;
}

hr {
    border: 1px solid #D6659F;
    margin: 20px 0;
}

.year-title {
	cursor: pointer;
	font-size: 1.8em;
	margin: 20px 0 10px;
	color: #64002B;
	text-align: center;
}

.month-title {
	cursor: pointer;
	font-size: 1.5em;
	margin: 15px 0 10px;
	color: #D6659F;
	text-align: left;
}


.article-list {
    padding-left: 20px;
    display: block; /* 默认展开 */
}
.post-link {
    display: block;
    margin-left: 20px;
}
.toggle-symbol {
    margin-left: 10px;
}


/* Flexbox 布局 */
.container-row {
    display: flex;
    width: 80%;
    gap: 20px; /* 容器之间的间距 */
    margin: 20px auto;
}

/* library容器(变成当前状态栏了，但是名字就不改了… */
.container-library {
    flex: 3; /* 左侧占 70% 宽度 */
    padding: 30px;
	padding-top: 5px;
	padding-left: 30px;	
	height: 520px;
    background-color:rgba(255, 255, 255, 0.5);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	overflow-y: auto
	
}

/* gallery容器 */
.container-gallery {
	width: 100%;
    text-align: center;
    flex: 10; /* 右侧占 30% 宽度 */
    padding: 2px;
	height: 550px;
    background-color:rgba(255, 255, 255, 0.5);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	overflow-y: auto
	
}

/* Video容器 */
.container-video {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 20px; /* 缩略图之间的间距 */
    justify-content: space-around; /* 居中对齐，均匀分布 */
    width: 100%; /* 占满父容器宽度 */
    background-color:rgba(255, 255, 255, 0);
    border: 0px solid #ccc;
    border-radius: 10px;

}

/* Achivement容器 */
.container-achive {
    flex: 10;
    background-color:rgba(255, 255, 255, 0.5);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.container-pipi {

    background-color:rgba(255,182,193, 1);
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

/* 音频播放器样式 */
#audioPlayerContainer {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-image: url('../pic/bg.png');
    padding: 10px;
    display: flex;
    align-items: center;
}

.play-button,
.pause-button {
    width: 40px;
    height: 40px;
    border: none;
    background: none;
    cursor: pointer;
    outline: none;
    margin-right: 10px;
}

.play-button::before,
.pause-button::before {
    font-family: FontAwesome;
    font-size: 24px;
}

.play-button::before {
    content: '\f04b'; /* FontAwesome play icon */
}

.pause-button::before {
    content: '\f04c'; /* FontAwesome pause icon */
}

.progress-bar {
    flex: 1;
    height: 5px;
    background-color: #ccc;
    border-radius: 3px;
    position: relative;
    cursor: pointer;
}

.progress {
    height: 100%;
    background-color: #f00;
    border-radius: 3px;
    width: 0;
}

/* 闪烁动画 */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
        color: #000000	; /* 默认颜色 */
    }
    50% {
        transform: scale(1.2); /* 增加缩放效果 */
        color: #ff4d4d; /* 闪烁时的亮红色 */
    }
}

/* 设置动画仅在页面加载初期闪烁 */
.play-button.flash {
    animation: pulse 1s infinite;
}


body {
    cursor: url('../img/3cursor.png'), auto;
}

a {
    cursor: url('../img/pointcursor.png'), pointer;
}

/* Start https://www.cursors-4u.com * {cursor: url(https://cur.cursors-4u.net/nature/nat-1/nat21.ani), url(https://cur.cursors-4u.net/nature/nat-1/nat21.png), auto !important;}  End https://www.cursors-4u.com */

/* 自定义滚动条样式 */
.container-library::-webkit-scrollbar,
.container-gallery::-webkit-scrollbar,
.container-video::-webkit-scrollbar,
.container-achive::-webkit-scrollbar {
    width: 14px;
}

/* 滚动条轨道 - 使用粉色渐变背景 */
.container-library::-webkit-scrollbar-track,
.container-gallery::-webkit-scrollbar-track,
.container-video::-webkit-scrollbar-track,
.container-achive::-webkit-scrollbar-track {
    background: linear-gradient(
        to bottom,
        rgba(255, 228, 225, 0.8),  /* 淡玫瑰色 */
        rgba(255, 192, 203, 0.8),  /* 粉红色 */
        rgba(255, 228, 225, 0.8)   /* 淡玫瑰色 */
    );
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

/* 滚动条滑块 */
.container-library::-webkit-scrollbar-thumb,
.container-gallery::-webkit-scrollbar-thumb,
.container-video::-webkit-scrollbar-thumb,
.container-achive::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to right,
        rgba(216, 191, 216, 0.9),  /* 蓟色 */
        rgba(221, 160, 221, 0.9)    /* 梅红色 */
    );
    border-radius: 10px;
    border: 3px solid rgba(255, 255, 255, 0.8);
    background-clip: padding-box;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
}

/* 滑块悬停效果 */
.container-library::-webkit-scrollbar-thumb:hover,
.container-gallery::-webkit-scrollbar-thumb:hover,
.container-video::-webkit-scrollbar-thumb:hover,
.container-achive::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        45deg,
        rgba(221, 160, 221, 0.9),    /* 梅红色 */
        rgba(216, 191, 216, 0.9),    /* 蓟色 */
        rgba(230, 190, 230, 0.9)     /* 淡紫色 */
    );
    box-shadow: inset 0 0 8px rgba(255, 192, 203, 0.4);
}

/* 滚动条角落样式 */
.container-library::-webkit-scrollbar-corner,
.container-gallery::-webkit-scrollbar-corner,
.container-video::-webkit-scrollbar-corner,
.container-achive::-webkit-scrollbar-corner {
    background: transparent;
}