#openCanvas {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--content_bgColor);
  z-index: 999;
  display: block;
  transition: es;
  cursor: pointer;
  width: 100%;
  height: 100%;
  animation: openShow 0.5s ease-in-out,
    canvasFadeIn 0.5s 1.8s ease-in-out forwards;
}

/* @keyframes canvasFadeIn {
  0% {
    transform: translateY(0);
    opacity: 0.8;
  }
  100% {
    transform: translateY(-10px);
    opacity: 1;
  }
} */
@keyframes openShow {
  0% {
    /* transform: scale3d(0, 0, 0); */
    filter: blur(0px);
    /* opacity: 0; */
  }
  10% {
    /* transform: scale3d(1, 1, 1); */
    filter: blur(20px);
    /* opacity: 0.7; */
  }
  100% {
    /* transform: scale3d(1, 1, 1); */
    filter: blur(0px);
    /* opacity: 1; */
  }
}

body {
  width: 100vw;
  height: 100vh;
  /* 或者使用新的视口单位 */
  height: 100vh; /* 兼容旧浏览器 */
  height: 100dvh; /* dynamic viewport height for modern browsers */
  background: #131517;
  background: var(--content_bgColor);
  /* transition: background-color 1s 0.3s ease-in-out; */
  overflow: hidden;
}
/* --------------------------------nav---------------------------------- */
#all_container {
  display: flex;
  height: 100%;
  width: 100%;
  opacity: 0;
  /* transition: opacity 0.5s ease; */
}
.nav {
  width: 280px;
  height: 100%;
  background: var(--nav_bgColor);
  color: var(--dark_default_font-color);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4vh;
  position: relative;
  transition: background-color 1s 0.3s ease-in-out,
    right 0.4s cubic-bezier(0, 0, 0, 1.02);
}

/* -- pushBar -- */
#push_pull_bar {
  position: absolute;
  right: 0;
  height: 100%;
  width: 15px;
  z-index: 9;
  /* opacity: .5; */
  overflow: hidden;
}

#push_pull_icon {
  width: 100%;
  position: relative;
  top: 0;
  display: none;
}
.push_pull_icon1 {
  fill: var(--dark_default_font-color);
}

.nav_gap {
  height: max(1.5vh, 10px);
}
.nav_gap_bottom {
  height: min(0.5vh, 5px);
}
.p-1 {
  fill: var(--content_bgColor);
}
.p-2 {
  fill: var(--dark_highlight_font-color);
}
.p-3 {
  fill: var(--dark_default_font-color);
}

/* ----- avatar -----*/
#avatar_area {
  width: 100%;
  flex: 1.5 2 0%;
}
figure {
  height: 100%;
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1vh;
}
figcaption {
  margin-top: min(5%, 10px);
  color: var(--dark_highlight_font-color);
  font-size: var(--avatar_figureCaption_size);
}
#avatar {
  display: block;
  width: var(--avatar_width_normal);
  border-radius: 50%;
  /* background-color: #fff; */
  position: relative;
  cursor: pointer;
  display: grid;
  grid: 1fr / 1fr;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  /* transition: transform 0.5s 0.1s cubic-bezier(0.62, 1.74, 0.69, 0.97); */
}
#avatar_hover_area {
  width: var(--avatar_width_normal);
  height: 62%;
  border-radius: 50%;
  position: absolute;
  top: 0;
  z-index: 888;
  cursor: pointer;
}
#avatar_back {
  grid-area: 1 / 2;
  /* background: var(--content_bgColor); */
  border-radius: 50%;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  /* transition: background-color 1s 0.3s ease-in-out; */
}
/* #avatar_hover_area:hover + #avatar {
  transform: rotateY(0deg);
} */
#avatar_hover_area:hover + #avatar > .gradient-border {
  animation: glowing 15s 0.3s linear infinite forwards running;
  -webkit-filter: blur(15px);
  -moz-filter: blur(15px);
  -ms-filter: blur(15px);
  filter: blur(15px);
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  top: -5px;
  left: -5px;
}
#avatar img {
  position: relative;
  border-radius: 50%;
  z-index: 2;
  grid-area: 1 / 2;
  backface-visibility: hidden;
}
.gradient-border {
  display: none;
  transform: rotateY(180deg);
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: /* linear-gradient(
    -90deg,
    #3ac880,
    #4d74e9,
    #fff,
    #d83c3c,
    #c8dcf0,
    #f0d433,
    #c8dcf0,
    #d83c3c,
    #fff,
    #4d74e9,
    #3ac880
  ); */ linear-gradient(
    -135deg,
    #cbffa9,
    #ffffff,
    #a9ffc6,
    #93fff3,
    #6a73ff,
    #ffffff,
    #ff1535,
    #ffffff,
    #6a73ff,
    #ffffff,
    #cbffa9
  );
  background-size: 200%;
  border-radius: 50%;
  position: absolute;
  top: -1px;
  left: -1px;
  /* filter: blur(2px); */
  animation: glowing 15s 0.3s linear infinite forwards paused;
}

/* ----- menu -----*/
#menu_area {
  flex: 4 4 0%;
  width: 100%;
  text-align: center;
  position: relative;
  font-size: 1rem;
}
#menu_area ul {
  position: relative;
  z-index: 3;
}
.menu {
  list-style: none;
  height: min(10vh, 100px);
  line-height: min(10vh, 100px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  transition: color 0.5s ease-in-out;
}
.menu_text {
  display: block;
  width: 70px;
  text-align: start;
}
.menu.menu_bg {
  width: 100%;
  position: absolute;
  top: 0px;
  background: var(--dark-selected-bgColor);
  transition: background-color 1s 0.3s ease-in-out, top 0.3s ease-in;
  /* overflow: hidden; */
}

.selected {
  color: var(--dark_highlight_font-color);
}
.menu_icon {
  display: flex;
  width: 20px;
  align-items: center;
  position: relative;
  margin-right: 15px;
}
li:nth-child(1) .menu_icon {
  padding-top: 3px;
}
li:nth-child(3) .menu_icon {
  padding-bottom: 8px;
}
.a_icon1 {
  width: 14px;
  height: 5px;
  background: var(--icon_highlight_color);
  position: relative;
  top: -5px;
  transition: all 0.4s ease-in-out;
}
.a_icon2 {
  width: 20px;
  height: 12px;
  background: var(--icon_default_color);
  position: absolute;
  left: -3px;
}
.a_icon1_selected {
  top: -8px;
  background: var(--theme_blue);
}
li:hover .a_icon1 {
  top: -8px;
}
.w_icon1 {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-bottom: 14px solid var(--icon_highlight_color);
  position: relative;
  left: 0;
  transition: all 0.4s ease-in-out;
}
.w_icon1_selected {
  left: 6px;
  border-bottom: 14px solid var(--theme_yellow);
}

li:hover .w_icon1 {
  left: 6px;
}
li:hover .w_icon2 {
  left: -4px;
}
.w_icon2 {
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-top: 14px solid var(--icon_default_color);
  position: absolute;
  left: 0;
  transition: left 0.4s ease-in-out;
}
.w_icon2_selected {
  left: -4px;
}
.i_icon2 {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--icon_highlight_color);
  position: absolute;
  right: 7px;
  transition: right 0.4s ease-in-out;
}
.i_icon2_selected {
  right: 0px;
  background-color: var(--theme_red);
}
.i_icon1 {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: var(--icon_default_color);
  position: relative;
  left: -3px;
  top: 3px;
  transition: left 0.4s ease-in-out;
}
.i_icon1_selected {
  left: -6px;
}
li:hover .i_icon1 {
  left: -6px;
}
li:hover .i_icon2 {
  right: 0px;
}
li:hover {
  color: var(--dark_highlight_font-color);
}

/* ----- theme-btn -----*/
#theme_area_container {
  width: 100%;
  display: flex;
  justify-content: center;
  flex: 1 2 0%;
}

#theme_area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--theme_area_height);
  aspect-ratio: 2 / 1;
  border-radius: calc(var(--theme_area_height) / 2);
  border: 1px solid var(--theme_btn_border_color);
  background: var(--theme_btn_bgColor);
  transition: background-color 1s 0.3s ease-in-out,
    border-color 1s 0.3s ease-in-out;
  position: relative;
}
#theme_btn {
  width: calc(var(--theme_area_height) * 0.8);
  height: calc(var(--theme_area_height) * 0.8);
  border-radius: 50%;
  background: var(--theme_btn_color);
  position: absolute;
  left: calc(var(--theme_area_height) * 0.1);
  cursor: pointer;
  /* right: calc(var(--theme_area_height) * 0.1); */
  transition: left 0.4s ease-in-out;
}
#theme_btn_area {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mode_icon {
  height: calc(var(--theme_area_height) * 0.55);
  width: calc(var(--theme_area_height) * 0.55);
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 3;
}
.mode_icon:nth-child(2) {
  margin-left: calc(var(--theme_area_height) * 0.225);
}
.mode_icon:nth-child(3) {
  margin-right: calc(var(--theme_area_height) * 0.225);
}

#dark_btn {
  width: calc(var(--theme_area_height) * 0.55);
  height: calc(var(--theme_area_height) * 0.55);
  /* width: 14px;
  height: 14px; */
  fill: var(--dark_theme_highlight_color);
  transition: fill 1s 0.3s ease-in-out;
}
#light_btn {
  width: calc(var(--theme_area_height) * 0.55);
  height: calc(var(--theme_area_height) * 0.55);
  /* width: 14px;
  height: 14px; */
  fill: var(--theme_btn_color);
  transition: fill 1s 0.3s ease-in-out;
}
/* ----- nav-footer -----*/
#nav_footer {
  width: 100%;
  flex: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
}
#social_links {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
}
/* social links flex column style */

.social_link {
  display: inline-block;
  width: 25px;
}
.social_link:nth-child(3) {
  cursor: not-allowed;
  pointer-events: none;
}
.social_link:nth-child(4) {
  cursor: not-allowed;
  pointer-events: none;
}
.social_link:hover .cls-1 {
  fill: var(--social_link_hover_color);
}
.cls-1 {
  transition: fill 0.3s ease-in-out;
  fill: var(--dark_default_font-color);
}
.cls-2 {
  transition: fill 1s 0.3s ease-in-out;
  fill: var(--nav_bgColor);
}

#contact_me {
  font-size: 0.9rem;
  /* width: min(65%, 150px); */
  text-align: center;
  display: grid;
  grid: 1fr / 1fr;
  justify-content: center;
  align-items: center;
}
#contact_me_text {
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.flowBtn {
  color: var(--dark_default_font-color);
  grid-area: 1/2;
  height: 100%;
  padding: min(10px, 8%) 16px;
  background: var(--dark-selected-bgColor);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  position: relative;
  /* left: 2px; */
  z-index: 4;
  transition: background-color 1s 0.3s ease-in-out;
}
.flowBtn:hover + .flowBtn_back_color_span {
  animation: glowing 10s ease-in-out infinite running;
  opacity: 1;
}
.flowBtn:hover .hand_shake_icon {
  fill: var(--dark_highlight_font-color);
  animation: glowing 10s ease-in-out infinite running;
}
.flowBtn:hover {
  color: var(--dark_highlight_font-color);
}
.flowBtn::after {
  content: " ";
  width: 100%;
  height: 100%;
  border-radius: 6px;
  /* background: linear-gradient(45deg,#CBFFA9,#FFFFFF,#A9FFC6,#93FFF3,#6A73FF,#FFFFFF,#FF1535,#FFFFFF,#6A73FF,#FFFFFF,#CBFFA9); */
  box-shadow: 0 1px 1px var(--flowBtn_shadow_border_color),
    0 -1px 1px var(--flowBtn_highlight_border_color);
  z-index: -1;
  /* filter: blur(px); */
  position: absolute;
  top: 0;
  transition: box-shadow 1s 0.3s ease-in-out;
}
.flowBtn_back_color_span {
  opacity: 0;
  height: calc(100% + 4px);
  width: calc(100% + 4px);
  border-radius: 6px;
  grid-area: 1 / 2;
  background: linear-gradient(
    45deg,
    #cbffa9,
    #ffffff,
    #a9ffc6,
    #93fff3,
    #6a73ff,
    #ffffff,
    #ff1535,
    #ffffff,
    #6a73ff,
    #ffffff,
    #cbffa9
  );
  background-size: 400%;
  animation: glowing 15s linear infinite paused;
  /* filter: blur(8px); */
  margin-left: -2px;
}

@keyframes glowing {
  0% {
    background-position: 0 0;
  }
  50% {
    background-position: 400% 0;
  }
  0% {
    background-position: 0 0;
  }
}

.hand_shake_icon {
  fill: var(--dark_default_font-color);
}
#hand_shake {
  width: 22px;
  height: 22px;
}

#content_container {
  width: 100%;
  height: 100%;
}
iframe {
  width: 100%;
  height: 100%;
}

/*logo*/
#logo_container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
#logo_area {
  height: calc(35% * 1.5);
  width: calc(30% * 1.5);
}
.logo_icon_1 {
  fill: var(--logo_icon_1_color);
}
.logo_icon_2 {
  fill: var(--logo_icon_2_color);
}
.logo_icon_3 {
  fill: var(--logo_icon_3_color);
}
.logo_icon_4 {
  fill: var(--logo_icon_4_color);
}
.logo_icon {
  transition: fill 1s 0.3s ease-in-out;
}