/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
body {
  font-family: Roboto, sans-serif;
  background-color: rgb(229,214,214);
}
  
.header {
  position: relative; /* 让 .header 成为定位上下文 */
  padding: 80px;
  max-height: 18.5vh;
}



.navbar {
  display: flex;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 10vw;
  right: 10vw;
  --height: 6.7vh;
  height: var(--height);
}

.left-links, .right-links {
  display: flex;
  align-items: center;
  
}

.navbar a {
  text-align: center;
  text-decoration: none;
  margin-left: 0.5vw;
  margin-right:0.5vw ;
  font-size: 20px;
}

.right-links {
  margin-left: auto; /* 将右侧链接推到最右边,flex布局的特性 */
  position: relative;
}


.navbar-img{
  height: var(--height);
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  /* right:8vw ; */
  display: inline-block;
  top: 50%; /* 设置头像距离父元素顶部的距离为50% */
  transform: translateY(-50%); /* 使用 transform 属性将头像垂直居中 */
  right: 93%;
  /* transform: translateX(-70%); */
  box-shadow: white 3px 0 5px;
  /* border: 1px solid salmon; */
} 

.popover {
  position: absolute;
  top: 40px; 
  left: -70px;
  background-color: rgba(255, 242, 207, 0.8) ;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 5000; 
  min-width: 250px;
  text-align: left;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0,0.5) 2px 0 15px;
  /* background-image: url(../../backgroundPhotos/banner.png); */
  background-image: linear-gradient(to bottom, rgba(141,184,234,0.8), rgba(198, 120, 247, 0.8),rgba(221, 220, 255, 0.8)); 
}

.popover ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.popover ul li {
  margin-bottom: 5px;
}
.popover li:hover{
  background-color: rgb(255, 255, 255);
  /* color: white; */
}
.popover ul li a {
  color: #333;
  text-decoration: none;
}
.popover a:hover{
  color:rgb(248, 7, 59);
  
}

.navbar-icon {
  width: 30px; /* 图片的宽度 */
  height: 30px; /* 图片的高度 */
  margin-right: 5px; /* 图片和文字之间的间距 */
}

.navbar-text {
  font-size: 16px; /* 文字的字体大小 */
}
 
.blur-bar {
  position: absolute; /* 使用绝对定位 */
  bottom: 0;
  left: 0;
  /* top:110.5px;   */
  width: 100%;
  height: 6.7vh;
  background-color: rgba(255, 255, 255, 0.5); /* 50% 透明白色 */
  backdrop-filter: blur(5px); 
  /* border: 3px solid transparent; */
}
  
/* 主区域 */
.main{
  margin-left: 10vw;
  margin-right: 10vw;
  min-height: 75vh;
}

.blur-main{
  position: absolute; /* 使用绝对定位 */
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 75vh;
  background-color: rgba(229,214,214); /* 50% 透明白色 */
  backdrop-filter: blur(5px); 
}
  
/* Side 区域 */
.side {
  width: 33%;
  margin: 0.5%;
  float: left;
}
a{
  color:black;
  text-decoration: none;
}



a:hover{
  color:rgb(255, 0, 72);
  /* height: 100%; */
  /* background-color: rgba(255, 255, 255, 0.5); */
}

.publish_a{
  color: rgb(173, 150, 17);
}
.publish_a:hover{
  color:rgb(9, 160, 34);
}


.light-text{
  font-size: 16px; /* 文字的字体大小 */
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5); /* 添加发光效果 */
  text-align: center;
}

.download-btn{
  /* display: absolute; */
  /* float: right; */
  /* top: 20px; */
  width: 100%;
  height: 5vh;
  background-color: orange;
  color: rgb(255, 255, 255);
  justify-content: center;
  font-size: 25px;
}
::selection{
  background-color: tomato;
  color: white;
}