/* styles.css */


/* 设置html和body的高度为100% */
html, body {
    height: 100vw; /* 设置高度为100% */
    margin: 0; /* 去掉默认外边距 */
}

/* 设置整个页面的背景图 */
body {
    background-image: url('/tup/home.jpg'); /* 背景图路径 */
    background-size: cover; /* 背景图覆盖整个页面 */
    background-position: center; /* 背景图居中 */
    background-repeat: no-repeat; /* 不重复背景图 */
    margin: 0; /* 去掉默认外边距 */
}

/* 设置导航栏的基本样式 */
.navbar {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐 */
    align-items: center; /* 垂直居中 */
    background: rgba(255, 255, 255, 0.741); /* 半透明背景 */
    backdrop-filter: blur(10vh); /* 毛玻璃效果 */
    padding: 1vh 2vh; /* 内边距 */
    position: relative; /* 相对定位 */
    z-index: 1; /* 确保导航栏在其他元素之上 */
}

/* logo样式 */
.logo img {
    height: 50px; /* 设置logo的高度 */
}

/* 导航链接的样式 */
.nav-links {
    list-style: none; /* 去掉列表样式 */
    display: flex; /* 使用flex布局 */
    margin: 0; /* 去掉外边距 */
    padding: 0; /* 去掉内边距 */
}

/* 导航链接项的样式 */
.nav-links li {
    margin: 1vh 1.4vw; /* 设置链接项之间的间距 */
   
}

/* 导航链接的样式 */
.nav-links a {
    text-decoration: none; /* 去掉下划线 */
    color: #333; /* 链接颜色 */
    font-weight: bold; /* 加粗字体 */
    font-size: clamp(1.2rem, 1.5vw, 1rem); /* 设置字体大小的最小值、理想值和最大值 */
}

/* 鼠标悬停时的效果 */
.nav-links a:hover {
    color: #007BFF; /* 悬停时改变颜色 */
}





/* 下拉菜单的样式 */

/* 设置下拉菜单的相对定位和显示方式 */
.dropdown {
    position: relative; /* 相对定位，以便下拉内容绝对定位 */
    display: inline-block; /* 使下拉菜单项在同一行显示 */
    
}

/* 下拉菜单内容的样式 */
.dropdown-content {
    display: none; /* 默认隐藏下拉菜单内容 */
    position: absolute; /* 绝对定位，使其相对于.dropdown定位 */
    background: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    backdrop-filter: blur(10px); /* 毛玻璃效果 */
    min-width: 160px; /* 设置下拉菜单的最小宽度 */
    left: 50%; /* 将下拉菜单的左边缘设置为父元素的50% */
    transform: translateX(-50%); /* 通过平移使下拉菜单居中 */

    
}

/* 设置下拉菜单项为纵列 */
.dropdown-content a {
    display: block; /* 设置为块级元素，使其纵向排列 */
    padding: 10px; /* 添加内边距 */
    color: #333; /* 链接颜色 */
    text-decoration: none; /* 去掉下划线 */
    text-align: center; /* 文字居中 */
    
}

/* 鼠标悬停时显示下拉菜单内容 */
.dropdown:hover .dropdown-content {
    display: block; /* 鼠标悬停时显示下拉菜单 */
    
}

/* 鼠标悬停时改变子菜单项的颜色 */
.dropdown-content a:hover {
    background-color: rgba(0, 123, 255, 0.2); /* 悬停时改变背景颜色 */
}



/* 公告栏的样式 */
.announcement-bar {
    background: rgba(255, 255, 255, 0.5); /* 设置半透明背景，颜色为白色，透明度为0.5 */
    backdrop-filter: blur(10vh); /* 应用毛玻璃效果，模糊程度为10px */
    padding: 1vh; /* 设置内边距为10px，增加内容与边框之间的距离 */
    text-align: center; /* 文字居中对齐 */
    border-radius: 8vh; /* 设置圆角效果，半径为8px */
    margin: 2vh auto; /* 上下外边距为20px，左右外边距自动，居中显示 */
    width: 80vw; /* 设置宽度为80%，可以根据需要调整 */
    max-width: 600vh; /* 设置最大宽度为600px，防止过宽 */
    font-size: 1.5vh; /* 字体大小 */
}