/* 根据设备类型调整页面布局 */
.desktop .menu {
  display: block; /* 在桌面设备上显示菜单 */
}

.mobile .menu {
  display: none; /* 在移动设备上隐藏菜单 */
}
body {
  font-size: 1.5vw; /* 根据视口宽度调整字体大小 */
 
}

@media only screen and (orientation: portrait)  { 
   body {
    font-size: 3vw;
  }
   button {
    font-size: 3vh;
  }
  button{
       font-size: 3vw;
  }
  header {
    width: 100%;
    height: 10vh;
    background-color: #7AA2E3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
  }
  .hello{
    
    display: grid;
    grid-template-columns:  10% 1fr 1fr 10%;
    
  }
 
#photo {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  grid-column: 2 / 3;
  background-color: lightgray; /* 仅用于测试 */
  height:30vh;
  
}
/* #photo{
  display:flex;
  flex-direction: column;
  justify-content: center;
   grid-column:2/3;
   
} */
  h1.name{
    display:none;
  }
  nav {
    width: 100%;
    font-size:2.5vw;
    /* max-width: 750px;
    height: 50px; */
  }
  
  .text-Page01{
    /* margin-top: 50px; */
    grid-column:2/4;
    height:70vh;
  }
  #coding{
   
    font-size:2vw;
  }

  #software{
 
    font-size:2vw;}
  

}

@media only screen and (orientation: landscape) {
  body{
    font-size:1vw;
  }
  button{
       font-size: 1vw;
  }
  header {
    width: 100%;
    height: 10vh;
    background-color: #7AA2E3;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
  }
 nav {
    width: 80%;
    max-width: 750px;
    height: 10vh;
    font-size:1vw;
  }
  .hello{
    display: grid;
    grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
  }
  #photo{
    display:flex;
    flex-direction: column;
    justify-content: center;
     grid-column:5/6;
     
  }
  .text-Page01{
    /* margin-top: 50px; */
    grid-column:2/5;
  }
  #coding{
   
    font-size:1vw;
  }

  #software{
 
    font-size:1vw;}

}

 
  nav > .nav-list {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    padding-inline-start: 0;
    margin-block: 0;
    height: 100%;
    
  }
  
 nav > ul > li {
    /* font-size:1rem; */
    color: #3D3D3D;
    margin: 0 0.2rem;
    padding: 0.2rem;
    display: block;
  }
  
  nav > ul > li:hover {
    /* background-color: #F8F6E3; */
    color: #97EFE1;
    cursor: pointer;
  }
  .nav-list2 {
    display: flex;
    justify-content: flex-end;  /* 让列表项靠右 */
    padding-right: 5vw; /* 在右侧空出 2vw */
}


  li > a {
    color: inherit;
    text-decoration: none;
  }
  
  h1.name{
    color:#97EFE1;
    font-size: 1rem;
    padding-left:20px;
  }
  .hello{
    height:100vh;
    
    background-color: #F8F6E3;
  }
  
  .text-Page01{
    /* margin-top: 50px; */
    /* grid-column:2/5; */
    display: flex;
    flex-direction:column;
    /*align-items: center;  垂直居中 */
    justify-content: center;   /*column的垂直居中，文字的上边与下边的间距是一样的 */
    
    /* height:100vh; */
    text-align:left;
    
  }
  
  #img{
    margin-left: 50px;
    width:100%;
    border-radius: 5px;
   }
   #gameimg{
    width:100%;
    border:1px solid #F8F6E3;
    /* border-radius: 5px; */
   }

  /* display:flex; */
  /* width:80%; */
  /* justify-content: center;  */
  
 .about-me{
  background-color: #F8F6E3;
  height:100vh;
  display:flex;
  flex-direction: column;
  justify-content: center;
 }
 .page-title{
  text-align: center;
  color: #7AA2E3;
 }
 .page-title01{
  text-align: center;
  color: #7AA2E3;
  margin-top:10vh;
 }
.container{
  width:90%;
  max-width: 800px;
  margin: 20px auto;
}
#coding{
  display:flex;
  flex-direction: row;
  /* font-size:1vw; */
}
.coding-style{
  background-color: #97EFE1;
  border-radius: 10px;
  padding:1vh 1vw;
  margin:1vh 1vw;
}
.software-style{
  background-color: #97EFE1;
  border-radius: 10px;
  padding:1vh 1vw;
  margin:1vh 1vw;
}
#software{
  
  display:grid;
  grid-template-columns: auto auto auto; 
  /* font-size:1vw; */
  
}
.keywords{
  margin-top:5px;
}
.keyword{
  background-color: #F8F6E3;
  border-radius: 10px;
  padding:2px 10px;
}

#item02{
  grid-column: 2/span 2;
  /* line-height: 200%; */
}
#item05,#item07{
  grid-column: 1/span 2;
  /* line-height: 200%; */
}
.software-line{
  line-height: 3.0;
}
#notes{
  display:flex;
  flex-direction: row;
  
}
.projects{
  height:100vh;
  background-color: #97EFE1;
}

.email{
  text-align: center;
}
.copyright{
  text-align: center;
}
.icp{
    text-align: center;
}
.contact{
  display:flex;
  flex-direction: column;
  /* height:30vh; */
  justify-content: center;
  height:100vh;
  background-color: #F8F6E3;
}
footer{
  display:flex;
  flex-direction: column;
  /* height:30vh; */
  justify-content: center;
  background-color: #7AA2E3;
  text-align: center;


}
#game01{
 margin-bottom: 50px;
}

#game02{
  margin-bottom: 50px;
}
#game-part{
  width: 90%;
  max-width: 600px;
  margin:10px auto;


}
.pro-projects{
  background-color: #97EFE1;
  height:600vh;
  display:flex;
  flex-direction: column;
  /* justify-content: center; */
 }
 .grid-container{
  width:90%;
  max-width:800px;
  margin:20px auto;
  display: inline-grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:50px;
 }
 #slider-container {
  width: 100%;
  overflow: hidden;
}
#slider {
  display: flex;
  transition: transform 0.5s ease;
}
#slider2 {
  display: flex;
  transition: transform 0.5s ease;
}
#slider3 {
  display: flex;
  transition: transform 0.5s ease;
}
.slide {
  flex: 0 0 100%;
}
img {
  width: 100%;
  height: auto;
}
#animeimg{
  border-radius: 20px;
  
}
.illustration{
  margin-bottom: 30px;
}

#itemwide{
  grid-column: 1/3;
  
}
/* loader */
.loader-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.loader {
  border: 16px solid #f3f3f3;
  border-top: 16px solid #3498db;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.content {
  display: none; /* Hide content by default */
}