/* 全局样式 */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #36454F, #EDEADE, #899499);
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题样式 */
.title {
    position: fixed; /* 将标题固定在视口顶部 */
    top: 0; /* 顶部距离为0，即顶部边缘 */
    width: 100%; /* 标题宽度占满整个视口宽度 */
    padding: 22px 22px; /* 顶部和底部内边距，这里设置了顶部和底部各有20像素的内边距 */
    font-size: 45px; /* 标题文字的字体大小为36像素 */
    color: #FFFFFF; /* 标题文字的颜色为白色 */
    z-index: 1000; /* 设置标题的z-index值为1000，确保标题在其他内容之上 */
    text-align: center; /* 标题文字水平居中 */
    letter-spacing: 8px;/* 设置字符间隔为2像素 */

}

/* 视频容器样式 */
.video-container {
    position: relative; /* 相对定位，相对于最近的定位祖先元素 */
    overflow: hidden; /* 隐藏视频容器内溢出的内容 */
    border: 15px solid #A9A9A9; /* 视频容器边框样式，这里设置了15像素的实线边框，颜色为#A9A9A9 */
    border-radius: 10px; /* 视频容器边框的圆角为10像素 */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* 视频容器阴影效果，阴影大小为15像素，颜色为白色，半透明 */
    margin-top: 90px; /* 视频容器顶部外边距为90像素 */
    margin-bottom: 0px; /* 视频容器底部外边距为20像素 */
}

/* 视频元素样式 */
video {
    width: 100%; /* 视频宽度占满其容器宽度 */
    height: 100%; /* 视频高度自动调整，保持视频的宽高比 */
}

/* 导航容器样式 */
.navigation {
    display: flex;
    justify-content: center;
    width: 50%; /* 导航宽度占满视口 */
    padding: 20px 0; /* 顶部和底部内边距 */
    box-sizing: border-box; /* 确保padding包含在宽度内 */
}

/* 导航链接样式 */
.navigation a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 1.2em; /* 基于视口大小的字体大小，可根据需要调整 */
    margin: 0 10px; /* 水平间距 */
    padding: 10px 20px; /* 内边距 */
    border: 2px solid #FFFFFF;
    border-radius: 10px;
    transition: background-color 0.2s;
    flex: 1; /* 平均分配空间 */
    text-align: center;
    box-sizing: border-box; /* 确保padding包含在宽度内 */
    letter-spacing: 5px;/* 设置字符间隔为2像素 */
}

/* 导航图片样式 */
.navigation img {
    width: 20px; /* 图标宽度 */
    height: 20px; /* 图标高度 */
    margin-right: 5px; /* 图标和文字的间距 */
    vertical-align: middle; /* 垂直居中对齐图标 */
}

/* 鼠标悬停时的导航链接样式 */
.navigation a:hover {
    background-color: #ddd;
    color: #333;
}

/* 导航链接的图标样式 */
.navigation a img {
    transition: background-color 0.2s; /* 添加过渡效果 */
}

/* 视频容器和导航之间的外边距 */
.video-container + .navigation {
    margin-top: 10px; /* 视频和导航之间的外边距 */
}

/* 媒体查询，针对竖屏手机端 */
@media only screen and (max-width: 768px) {
/* 视频容器样式 */
.video-container {
    position: relative; /* 相对定位，相对于最近的定位祖先元素 */
    overflow: hidden; /* 隐藏视频容器内溢出的内容 */
    border: 5px solid #A9A9A9; /* 视频容器边框样式，这里设置了10像素的实线边框，颜色为#A9A9A9 */
    border-radius: 10px; /* 视频容器边框的圆角为10像素 */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.5); /* 视频容器阴影效果，阴影大小为15像素，颜色为白色，半透明 */
    margin-top: 90px; /* 视频容器顶部外边距为90像素 */
    margin-bottom:0px; /* 视频容器底部外边距为5像素 */
}

/* 视频元素样式 */
video {
    width: 100%; /* 视频宽度占满其容器宽度 */
    height: 100%; /* 视频高度自动调整，保持视频的宽高比 */
}
/* 标题样式 */
    .title {
        font-size: 20px; /* 手机端字体大小 */
        text-align: center;/* 手机文字居中显示 */
        margin-top: 15px; /* 设置顶部间距 */
        margin-bottom: 15px; /* 设置底部间距 */
        letter-spacing: 2px;/* 设置字符间隔为2像素 */

    }
/* 导航容器样式 */
.navigation {
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 两端对齐，同时保持元素之间的间距 */
    width: 90%; /* 导航宽度占满视口 */
    padding: 0; /* 顶部和底部内边距为0 */
    box-sizing: border-box; /* 确保padding包含在宽度内 */
}

/* 导航链接样式 */
.navigation a {
    font-size: 9px; /* 调整手机端字体大小 */
    padding: 5px 10px; /* 调整手机端内边距 */
    letter-spacing: 2px; /* 设置字符间隔为2像素 */
    color: #2B2B2B; /* 调整手机端文字颜色 */
    margin-right: 3px; /* 为每个导航链接添加5px的右侧间距，除了最后一个链接 */
}

/* 导航图片样式 */
.navigation img {
    width: 10px; /* 调整手机端图标宽度 */
    height: 10px; /* 调整手机端图标高度 */
    margin-right: 2px; /* 调整手机端图标和文字的间距 */
}

/* 为了确保最后一个链接没有额外的间距，你可以给它一个类名并调整样式 */
.navigation a:last-child {
    margin-right: 0; /* 移除最后一个链接的右侧间距 */
}
/* 鼠标悬停时的导航链接样式 */
.navigation a:hover {
    background-color: #333;
    color: #FF8C00;
    transition: background-color 0.2s; /* 添加过渡效果 */
}
/* 视频容器和导航之间的外边距 */
.video-container + .navigation {
    margin-top: 10px; /* 视频和导航之间的外边距 */
}
}