/* 自定义样式 */
.lottery-box {
    border: 1px solid #ccc;
    padding: 20px;
    text-align: center;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.nav-item a {
    color: #ff00ff; /* 二次元风格的颜色 */
    font-size: 1.2em;
}

/* 可以根据需要添加更多样式 */
body {
    background-image: url('kcbjyun.png');
    background-size: cover; /* 覆盖整个页面 */
    background-repeat: no-repeat; /* 不重复背景图 */
    font-family: 'Your Anime Style Font', sans-serif; /* 您可以选择适合的字体 */
}

/* 其他样式保持不变 */
.nav {
    position: absolute;
    top: 5%;
    left: 2%;
    width: 15%;
    height: 90%;
    background-color: rgba(255, 255, 255, 0.2);
    box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.5);
    border-radius: 25px;
    overflow: auto;
}

.nav::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}

    .nav li {
        position: relative;
        width: 80%;
        height: 10%;
        margin: 5% 10%;
        border-radius: 15px;
        background-color: blueviolet;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        height: auto; /* 改为自动以适应内容高度 */
        margin: 10px 10%; /* 根据需要调整间距 */
        background-color: transparent; /* 将背景色设置为透明 */
    }

.nav-item {
    margin-bottom: 20px; /* 导航项之间的间距 */
}

.nav-img {
    width: 100%; /* 图片宽度 */
    height: auto; /* 图片高度自动调整 */
    margin-bottom: 5px; /* 图片和链接之间的间距 */
}
.nav-link {
    display: block; /* 使链接成为块级元素 */
    text-align: center; /* 文本居中 */
    margin-top: 0px; /* 增加或减少这个值以调整间隔距离 */
}
.lottery-box {
    text-align: center; /* 居中对齐 */
    padding: 15px; /* 内边距 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 10px; /* 边框圆角 */
    /* 根据需要添加其他样式 */
}

.lottery-image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}
@media screen and (max-width: 768px) {
    /* 调整导航栏样式 */
    .nav {
        position: static; /* 对于移动设备，可能不需要绝对定位 */
        width: 100%; /* 调整导航栏宽度为屏幕宽度的 80% */
        margin: 20px auto; /* 上下保持20px间距，并居中显示 */
        /* 其他样式保持不变 */
    }

    /* 调整导航项样式 */
    .nav-item {
        width: 100%; /* 导航项宽度调整为100% */
        margin-bottom: 10px; /* 调整底部间距 */
        /* 其他样式保持不变 */
    }

    /* 调整导航图片样式 */
    .nav-img {
        width: 100%; /* 图片宽度占据整个导航项 */
        height: auto; /* 高度自适应 */
        margin-bottom: 5px; /* 底部间距 */
        /* 其他样式保持不变 */
    }

    /* 调整导航链接样式 */
    .nav-link {
        font-size: 32px; /* 调整字体大小为16px */
        padding: 5px; /* 内边距 */
        /* 其他样式保持不变 */
    }

    /* 如果有更多需要调整的样式，可以继续添加 */
}