@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css2?family=Reggae+One&display=swap');
@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

.left {
    opacity: 0.8;     
    margin-top: 5%;    
    margin-left: -5%;
    width: 350px; 
    height: 100vh; 

    /* opacity: 0.8;     
    position: fixed;
    margin-top: 2%;
    left: 10%;
    top: 0;    
    width: 350px; 
    height: 100vh;     */
}


.left *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.left .stage{
  height: 350px;
  width: 250px;
  margin-left: auto;
  margin-right: auto;
}
.left .p{
  font-size: 35px;
  text-align: center;
  margin-top: 0;
  cursor: pointer;
  width: 100%;
  background: #11f3af;
  border-radius: 10px;
  font-family: Century Gothic;
  letter-spacing: 5px;
}
.left .div{
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  width: 200px;
  height: 40px;
  margin-top: 4%;
 transition-duration: 0.2s;

}
.left .p:hover{
  background: white;
  color: black;
}
.left .div:nth-child(odd){
  transform: perspective(300px) rotateY(45deg);
  box-shadow: -2px 2px 7px gray;
}
.left .div:nth-child(even){
  transform: perspective(300px) rotateY(-45deg);
    box-shadow: 2px 2px 7px gray;
}
.left .div:hover{
  transform: rotateY(0);
  background: white;
  color: black;
  box-shadow: 0px 0px 0px;
}

/* 移动设备适配 */
@media (max-width: 768px) {
  .left {
      
      margin-left: 35%;
      margin-right: -5%;
      margin-top: 5%; /* 重置顶部边距 */
      height: auto; /* 高度自适应内容 */
      opacity: 1; /* 完全不透明 */
  }
  
  .left .div:nth-child(odd){
    transform: perspective(300px) rotateY(45deg);
    box-shadow: -2px 2px 7px #1A1E23;
  }
  .left .div:nth-child(even){
    transform: perspective(300px) rotateY(-45deg);
      box-shadow: 2px 2px 7px #1A1E23;
  }

  .left .stage {
      width: 100%; /* 使stage占满宽度 */
      height: auto; /* 自适应高度 */
  }

  .left .div {
      width: 50%; /* 稍微缩小宽度，留有边距 */
      margin: 10px auto; /* 居中并添加垂直间距 */
      transition: transform 0.2s; /* 添加过渡效果 */
  }

  .left .p {
      font-size: 1rem; /* 在小屏上适当缩小文字 */
  }

  .left .div:hover {
      transform: rotateY(0deg); /* 恢复到正常角度 */
      background: white; /* 鼠标悬停背景颜色 */
      color: black; /* 鼠标悬停文本颜色 */
  }
}