.me {
  width: 100vw;
  min-height: 100vh;
  background-image: url("../img/bg2.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  font-family: "楷体";
  font-weight: bold;
  text-shadow: var(--text-dark-shadow);
}

.avatar {
  margin: 0 auto;
  --width: 80px;
  width: var(--width);
  height: var(--width);
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--main-color);
  box-shadow: var(--light-shadow);
}

.avatar img {
  width: calc(var(--width) * 0.8);
}

.leaf {
  position: absolute;
  top: -40px;
  width: 30px;
  height: 30px;
  background-image: url("../img/leaf.png"); /* 替换为竹叶图片的路径 */
  background-size: cover;
  background-color: transparent;
  animation: fall linear infinite;
}

@keyframes fall {
  0% {
    transform: translateX(0) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(20vw) translateY(50vh) rotate(180deg);
  }
  100% {
    transform: translateX(-20vw) translateY(100vh) rotate(360deg);
  }
}

.me span {
  width: max-content;
  display: block;
  margin: 24px auto;
  position: relative;
  z-index: 0;
}