/* ===============================
   #workboard 样式（主容器）
   控制页脚运行时间和旅行者1号信息的样式
================================= */
#workboard {
    text-align: center; /* 让内容居中对齐 */
    font-family: Arial, sans-serif; /* 设置字体 */
    line-height: 1.2;  /* 调小行间距，使文本更紧凑 */
    font-size: 12px;   /* 设置整体字体大小 */
    padding: 15px; /* 设置内边距，避免内容紧贴边框 */
    border-radius: 8px; /* 让边框变得圆润，美观 */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 轻微阴影，增加层次感 */
    display: inline-block; /* 让容器宽度适应内容大小 */
    margin: 5px auto; /* 控制外边距，使其居中 */
    
    background: rgba(255, 255, 255, 0.01); /* 半透明背景色 */
    backdrop-filter: blur(10px); /* 实现雾玻璃效果，增加模糊 */
    position: relative; /* 使得伪元素可以在该元素之上定位 */
}


/* ===============================
   #workboard p 样式（文本段落）
   主要用于显示 "什么时候能够实现财富自由呀~"
================================= */
#workboard p {
    margin: 2px 0; /* 控制段落之间的间距，使其更紧凑 */
    padding: 0; /* 移除默认的内边距 */
    font-size: 12px; /* 文字大小 */
    color: #000000; /* 设置字体颜色，使其不那么突兀 */
}

/* ===============================
   #workboard div 样式（主要内容）
   这里显示网站运行时间 & 旅行者1号的距离
================================= */
#workboard div {
    font-size: 12px; /* 文字大小 */
    font-weight: bold; /* 让文字稍微加粗，提高可读性 */
    color: #000000; /* 设置字体颜色，使其更柔和 */
    margin: 2px 0; /* 控制行间距，防止文本过于松散 */
}

/* ===============================
   黑夜模式下的适配：改变文字颜色
================================= */
[data-theme="dark"] #workboard p,
[data-theme="dark"] #workboard div {
    color: #d0d0d0e5; /* 夜间模式下字体颜色变浅 */
}

/* ===============================
   白天模式下的适配：改变文字颜色
================================= */
[data-theme="light"] #workboard p,
[data-theme="light"] #workboard div {
    color: #2e2e2e; /* 白天模式下字体颜色保持较深的颜色 */
}

/* ===============================
   ❤️ 心跳动画（用于 fa-heartbeat）
   让 ❤️ 图标有心跳效果，增加趣味性
================================= */
.heartbeat {
    display: inline-block; /* 让动画生效 */
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); } /* 让 ❤️ 变大一点 */
}

.rocket {
    display: inline-block;
    animation: shake 0.2s infinite alternate;
}

@keyframes shake {
    0% { transform: translateX(0); }
    100% { transform: translateX(1px); } /* 左右摆动 */
}


/* ===============================
   适配移动端
   让 #workboard 在小屏幕上适应不同尺寸
================================= */
@media screen and (max-width: 768px) {
    #workboard {
        width: auto; /* 让容器宽度自动适应屏幕 */
        font-size: 11px; /* 缩小字体，适应小屏幕 */
        padding: 3px; /* 减少内边距，使布局更紧凑 */
    }
}