@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/鸿雷板书简体.ttf') format('truetype');
    font-weight: 400;
    font-display: swap; /* 添加 font-display */
}

@font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/鸿雷板书简体.ttf') format('truetype');
    font-weight: 700;
    font-display: swap; /* 添加 font-display */
}

body {
    font-family: Arial, sans-serif; /* 默认字体 */
    /* background-image: url('/static/images/background.webp'); 由JS动态设置 */
    background-size: cover; /* 背景图片覆盖整个背景 */
    background-position: center; /* 背景图片居中 */
    background-repeat: no-repeat; /* 背景图片不重复 */
    margin: 0; /* 去除默认外边距 */
    padding: 0; /* 去除默认内边距 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: center; /* 子元素垂直居中 */
    align-items: center; /* 子元素水平居中 */
    height: 100vh; /* 设置视口高度 */
    width: 100vw; /* 设置视口宽度 */
    color: #333; /* 设置字体颜色 */
}

header {
    position: absolute; /* 绝对定位 */
    top: 10%; /* 距离顶部 */
    text-align: center; /* 文本居中 */
    width: 100%; /* 宽度100% */
    color: #333; /* 字体颜色 */
    font-family: 'Roboto', sans-serif; /* 使用Roboto字体 */
}

.rainbow-text {
    font-size: 2.8em; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
    background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); /* 渐变背景颜色 */
    background-size: 400%; /* 背景大小 */
    -webkit-background-clip: text; /* 背景剪裁文本 */
    background-clip: text; /* 背景剪裁文本 */
    -webkit-text-fill-color: transparent; /* 透明文本填充 */
    color: transparent; /* 透明文本填充 */
    animation: rainbow 10s infinite; /* 动画效果 */
}

@keyframes rainbow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.container {
    display: flex; /* 使用弹性布局 */
    justify-content: space-between; /* 子元素左右分布 */
    align-items: stretch; /* 子元素高度拉伸对齐 */
    background-color: rgba(255, 255, 255, 0.3); /* 背景颜色及透明度 */
    padding: 20px; /* 内边距 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    width: 90%; /* 宽度 */
    max-width: 1200px; /* 最大宽度 */
    color: #333; /* 字体颜色 */
}

.left-side, .right-side {
    padding: 20px; /* 内边距 */
    width: 45%; /* 宽度 */
    background-color: rgba(255, 255, 255, 0.4); /* 背景颜色及透明度 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    color: #333; /* 字体颜色 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    justify-content: space-between; /* 子元素等间距分布 */
}

.header {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子元素垂直居中 */
    padding-left: 35%; /* 左内边距 */
}

.logo {
    max-width: 50px; /* 最大宽度 */
    margin-right: 10px; /* 右外边距 */
}

.hitokoto {
    margin-top: 10px; /* 上外边距 */
    padding: 10px; /* 内边距 */
    height: 160px; /* 高度 */
    background: rgba(255, 255, 255, 0.15); /* 背景颜色及透明度 */
    border-radius: 10px; /* 圆角边框 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    color: #333; /* 字体颜色 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子元素垂直居中 */
    justify-content: center; /* 子元素水平居中 */
    text-align: center; /* 文本居中 */
    cursor: pointer; /* 添加鼠标指针效果 */
}

.hitokoto.clicked {
    background-color: rgba(255, 255, 255, 0.25); /* 点击时的背景颜色变化 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* 点击时的阴影变化 */
}

.hitokoto p {
    margin: 0; /* 去除默认外边距 */
    font-size: 18px; /* 字体大小 */
    color: #333; /* 字体颜色 */
}

.links {
    margin-top: 20px; /* 上外边距 */
    display: flex; /* 使用弹性布局 */
    justify-content: space-around; /* 子元素等间距分布 */
}

.links a {
    display: inline-block; /* 行内块元素 */
    margin: 0 10px; /* 左右外边距 */
    color: #333; /* 字体颜色 */
    text-decoration: none; /* 去除下划线 */
}

.links img {
    width: 22px; /* 宽度 */
    height: 22px; /* 高度 */
    transition: transform 0.3s; /* 变换过渡效果 */
}

.links img:hover {
    transform: scale(1.2); /* 鼠标悬停时缩放 */
}

.modules {
    display: grid; /* 使用网格布局 */
    grid-template-columns: 1fr 1fr; /* 两列布局 */
    gap: 20px; /* 网格间距 */
    margin-top: 20px; /* 上外边距 */
}

.modules a {
    padding: 20px; /* 内边距 */
    background-color: rgba(255, 255, 255, 0.15); /* 背景颜色及透明度 */
    border-radius: 10px; /* 圆角边框 */
    text-decoration: none; /* 去除下划线 */
    color: #333; /* 字体颜色 */
    text-align: center; /* 文本居中 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: background-color 0.3s, transform 0.3s; /* 过渡效果 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 子元素垂直居中 */
    justify-content: center; /* 子元素水平居中 */
}

.modules a img {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
    margin-right: 8px; /* 图标右外边距 */
}

.modules a:hover {
    background-color: rgba(255, 255, 255, 0.25); /* 鼠标悬停时背景颜色 */
    transform: scale(1.05); /* 鼠标悬停时缩放 */
}

.right-side h2 {
    text-align: center; /* 文本居中 */
    color: #333; /* 字体颜色 */
    font-size: 1.6em; /* 字体大小 */
    margin-bottom: 20px; /* 下外边距 */
}

footer {
    position: fixed; /* 固定定位 */
    bottom: 0; /* 底部对齐 */
    width: 100%; /* 宽度 */
    text-align: center; /* 文本居中 */
    background-color: rgba(255, 255, 255, 0.5); /* 背景颜色及透明度 */
    padding: 10px; /* 内边距 */
    border-radius: 10px 10px 0 0; /* 圆角边框 */
    backdrop-filter: blur(8px); /* 毛玻璃效果 */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    color: #000000; /* 字体颜色 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 子元素水平居中 */
    align-items: center; /* 子元素垂直居中 */
    gap: 10px; /* 子元素间距 */
    margin-bottom: 1px; /* 底部外边距 */
    font-family: 'Roboto', sans-serif; /* 使用Roboto字体 */
}

footer a {
    color: #000000; /* 字体颜色 */
    text-decoration: none; /* 去除下划线 */
}

footer a:hover {
    text-decoration: underline; /* 鼠标悬停时下划线 */
}

/* 手机适配 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 垂直排列子元素 */
        width: 100%; /* 设置宽度为100% */
        height: 100%; /* 高度自适应 */
        padding: 20px; /* 减少内边距 */
        display: flex; /* 使用弹性布局 */
    }

    .left-side, .right-side {
        margin-top: 10%; /* 增加顶部外边距 */  
        width: 100%; /* 设置宽度为100% */
        padding: 10px; /* 减少内边距 */
        margin-bottom: 0px; /* 增加底部外边距 */
        height: 40vh; /* 设置高度，减少高度 */
    }

    .hitokoto {
        margin-top: 100px; /* 增加顶部外边距，向下移动33px */
        margin-bottom: 10px; /* 减少底部外边距 */
    }

    .header {
        padding-left: 0; /* 去除左内边距 */
        justify-content: center; /* 居中对齐 */
    }

    .rainbow-text {
        font-size: 2em; /* 减小字体大小 */
    }

    .links {
        justify-content: space-around; /* 水平间距 */
    }

    .links a {
        margin: 0 10px; /* 设置左右间距 */
    }

    .header h1 {
        display: none; /* 隐藏HCKZ.TOP */
    }

    .right-side h2 {
        display: none; /* 隐藏网站列表-标题 */
    }
    footer {
        flex-direction: column; /* 垂直排列子元素 */
    }

    /* 放大背景图片10% */
    body {
        background-size: auto; /* 背景图片放大10% */

    }
}