.notification {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  position: relative;
  width: auto;/*默认 18rem*/
  height: auto; /* 修改为 auto */
  background-color: #29292c;
  border-radius: 1rem;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 16px;
  --gradient: linear-gradient(to bottom, #2eadff, #3d83ff, #7e61ff);
  --color: #32a6ff;
  
}

/*.notification button{*/
/*width:3rem;*/
/*height:2rem;*/
/*background-color:#FF69B4;*/
/*color:#000000;*/
/*margin:0.5rem 0 0 1.5rem;;*/
/*}*/

.notification:before {
  position: absolute;
  content: "";
  inset: 0.0625rem;
  border-radius: 0.9375rem;
  /*background: #18181b;*/
  z-index: 2;
}

.notification:after {
  position: absolute;
  content: "";
  width: 0.25rem;
  inset: 0.65rem auto 0.65rem 0.5rem;
  border-radius: 0.125rem;
  background: var(--gradient);
  transition: transform 300ms ease;
  z-index: 4;
}

.notification:hover:after {
  transform: translateX(0.15rem);
}

.notititle {
  color: var(--color);
  padding: 0.25rem 0.25rem 0.2rem 1.25rem;
  font-weight: 500;
  font-size: 1.1rem;
  transition: transform 300ms ease;
  z-index: 5;
}

.notification:hover .notititle {
  transform: translateX(0.15rem);
}

.notibody {
  /*color: #99999d;*/
  color: #FFF;
  padding: 0 1.25rem 0.75rem;
  transition: transform 300ms ease;
  z-index: 5;
  
 
}

.notification:hover .notibody {
  transform: translateX(0.25rem);
  color:#00EEEE;
}
.notibody p{
    /*color: #FFF ;*/
/*background-color: #000;*/
text-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 0, 0, 0.5);
}

/*=========文本高亮颜色*/
/* 黑底白字 */
.black-on-white {
color: #FFF ;
/*background-color: #000;*/
/*text-shadow: 0 0 5px rgba(255, 255, 255, 0.8), 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(255, 255, 255, 0.8);*/
}

/* 白底黑字 */
.white-on-black {
  color: #FFFF00;
  text-shadow: 0 0 5px rgba(112, 112, 112, 0.8), 0 0 10px rgba(112, 112, 112, 0.8), 0 0 20px rgba(112, 112, 112, 0.8), 0 0 30px rgba(112, 112, 112, 0.8)
}





/*.audio-container{*/
/*    background-color: transparent;*/
/*    border:0px;*/
/*}*/
/*================语言选择================*/
.language-card {
    margin-top:10px;
    margin-right:3px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #242427;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
  height: 45px;
  width: 254px;
}

.language-card::before, .language-card::after {
  position: absolute;
  display: flex;
  align-items: center;
  width: 50%;
  height: 100%;
  transition: 0.25s linear;
  z-index: 1;
}

.language-card::before {
  content: "";
  left: 0;
  justify-content: flex-end;
  background-color: #4d60b6;
}

.language-card::after {
  content: "";
  right: 0;
  justify-content: flex-start;
  background-color: #4453a6;
}

.language-card:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.language-card:hover span {
  opacity: 0;
  z-index: -3;
}

.language-card:hover::before {
  opacity: 0.5;
  transform: translateY(-100%);
}

.language-card:hover::after {
  opacity: 0.5;
  transform: translateY(100%);
}

.language-card span {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: whitesmoke;
  font-family: 'Fira Mono', monospace;
  font-size: 24px;
  font-weight: 700;
  opacity: 1;
  transition: opacity 0.25s;
  z-index: 2;
}

.language-card .social-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25%;
  height: 100%;
  color: whitesmoke;
  font-size: 24px;
  text-decoration: none;
  transition: 0.25s;
}

.language-card .social-link svg {
  text-shadow: 1px 1px rgba(31, 74, 121, 0.7);
  transform: scale(1);
}

.language-card .social-link:hover {
  background-color: rgba(249, 244, 255, 0.774);
  animation: bounce_613 0.4s linear;
}

@keyframes bounce_613 {
  40% {
    transform: scale(1.4);
  }

  60% {
    transform: scale(0.8);
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}
.language-card-parent {
  display: flex;
  justify-content: center; /* 子元素水平居中 */
  align-items: center; /* 子元素垂直居中 */
  height: auto; /* 设置父元素高度 */
  width: auto;
  background-color:transparent;
}
/*==================语言选择结束===============*/


/*===============发光 按钮===============*/
.button {
  --😀: #644dff;
  --😀😀: #4836bb;
  --😀😀😀: #654dff63;
  cursor: pointer;
  width: 70px;
  height: 30px;
  /*display: flex;*/
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-size: 0.75em;
  font-weight: 800;
  letter-spacing: 2px;
  color: #fff;
  background: var(--😀);
  border: 2px solid var(--😀😀);
  border-radius: .75rem;
  box-shadow: 0 8px 0 var(--😀😀);
  transform: skew(-10deg);
  transition: all .1s ease;
  filter: drop-shadow(0 15px 20px var(--😀😀😀));
}

.button:active {
  letter-spacing: 0px;
  transform: skew(-10deg) translateY(8px);
  box-shadow: 0 0 0 var(--😀😀😀);
}
/*=========================发光按钮结束=============*/




/*=========================发光按钮2转圈=============*/

.button2 {
  position: relative;
  width: 3.62rem;
    height: 2.5rem;
  background-color: #29292C;
  /*display: block;*/
  align-items: center;
  color: white;
  /*flex-direction: column;*/
  justify-content: center;
  border: none;
  padding: 8px;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
  margin: 0.47rem;
}

.button2::before {
  content: '';
  position: absolute;
  inset: 0;
  left: -0.22rem;
    /*top: -0.05rem;*/
    margin: auto;
    width: 4.05rem;
    height: 3rem;
  border-radius: 10px;
  background: linear-gradient(-90deg, #40c9ff 0%, #242427 100% );
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.button2::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #40c9ff 0%, #242427 100% );
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.button2:hover::after {
  filter: blur(30px);
}

.button2:hover::before {
  transform: rotate(-180deg);
}

.button2:active::before {
  scale: 0.7;
}


/*=========================发光按钮2转圈结束=============*/