/*菜单栏*/

header {
  padding:0;
  margin:0;
  box-sizing:border-box;
  background-color:blue;
 }

.nav-bar {
min-height:70px;
display: flex;
justify-content:space-between;
align-items:center;
padding:0 24px;


 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 /* padding: 30px 100px; */
 /* display: flex; */
 /* justify-content: space-between; */
 /* align-items: center; */
 z-index: 100;
}

header .logo {
 color:#f1f1f3;
 text-shadow: 2px 2px 4px #000000;
 /* text-shadow: 1px 1px 2px black, 0 0 25px #228fd4, 0 0 5px darkblue; */
 font-weight: 700;
 text-decoration: none;
 font-size: 2em;
 text-transform: uppercase; /* 大写 */
 letter-spacing: 2px; /* 字符间距 */
 z-index: 100;
 margin-left: 5%;

}

.nav-menu {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap:60px;
 margin-right: 5%;
 /* gap:60px; */
}

/* header ul li {
 list-style: none;
  margin-left: 20px;
} 
*/

/* header ul a{
   color:white;
   text-decoration:none;
} */
ul {
   list-style: none; /* 去除列表项的默认样式 */
 }
 

.nav-link {
 text-decoration: none;
 font-family: Georgia, 'Times New Roman', Times, serif;
 color: #f1f1f3;
 /* text-shadow: 1px 1px 2px black, 0 0 25px #228fd4, 0 0 5px darkblue; */
 text-shadow: 2px 2px 4px #000000;
 border-radius: 20px;
 transition: 0.7s;  
}

header ul li a:hover{
   color:#228fd4;
}
/* header ul li a.active {
 background: #fff;
 color: #2b1055;
} */

/*hamburger*/
.hamburger {
   cursor: pointer;
   display: none;
 }
 
 .bar {
   display: block;
   background-color: #f1f1f3;
   width: 25px;
   height: 3px;
   margin: 5px;
   transition: all 0.3s ease-in-out;
 }

 @media screen and (max-width: 768px) {
   header {
     display: fixed;
   }
 
   .hamburger {
     display: block;
   }
   .hamburger.active .bar:nth-child(2){
     opacity: 0;
   }
   .hamburger.active .bar:nth-child(1){
     transform: translateY(8px) rotate(45deg);
   }
   .hamburger.active .bar:nth-child(3){
     transform: translateY(-8px) rotate(-45deg);
   }
 
   .nav-menu {
       background-color: rgba(0, 0, 0, 0); /* 设置背景颜色的透明度为 0 */
     position: fixed;
     left: 0;
     top: -100%;
     width: 100%;
     flex-direction: column;
     gap: 0;
     transition: all 0.3s ease;
   }
 
   .nav-item {
     margin: 16px;
   }
 
   .nav-menu.active {
     top: 70px;
   }
 }