/* 头像容器样式 */
.avatar-container {
    user-select:none;
    margin-top: 5%;
    position: relative;
    width: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 头像样式 */
.avatar {
    width: 60%; /* 头像宽度 */
    border-radius: 50%;
    border: 2px solid rgb(106, 33, 33);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}



/* 随机一言容器 */
.sentence-container {
    margin-top: 0%;
    position: relative;
    width: 80%;
    height: 160px;
    display: flex;
    justify-content: center;
}

/* 随机一言样式 */
.sentence {
    text-align: center;
    font-family: "FZYaoti","Microsoft YaHei","黑体","宋体",sans-serif;
    font-size: 30px; /* 字体大小 */
    color: #ffffff; /* 字体颜色 */
    white-space: pre-line; /* 允许自动换行 */
    user-select: none;
    display: inline-block; /* 使文字逐字打印 */
}

/* 标签容器样式 */
.label-container {
    user-select:none;
    margin-top: 10%;
    position: relative;
    width: 100%;
    display: flex;
    height: 20px;
    justify-content: center;
}
/* 标签设置与特效 */
ul {
    position: relative;
    display: flex;
    padding-inline-start:0%;
 }
 ul li {
    user-select:none;
    position: relative;
    list-style: none;
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: 0.5s;
 }
 ul li::before {
    position: absolute;
    inset: 30px;
    box-shadow: 0 0 0 10px var(--clr),
                0 0 0 20px var(--bg),
                0 0 0 22px var(--clr);
    transition: 0.5s;
 }
 ul li:hover::before {
    inset: 15px;
 }
 ul li::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--bg);
    transform: rotate(45deg);
    transition: 0.5s;
 }
 ul li:hover::after {
    inset: 0px;
    transform: rotate(0deg);
 }
 ul li a {
    position: relative;
    text-decoration: none;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
 }
 ul li a i {
    font-size: 2em;
    transition: 0.5s;
    color: var(--clr);
    opacity: 1;
 }
 ul li:hover a i {
    color: var(--clr);
    transform: translateY(-40%);
 }
 ul li a span {
    position: absolute;
    font-family: sans-serif;
    color: var(--clr);
    opacity: 0;
    transition: 0.5s;
    transform: scale(0) translateY(200%);
 }
 ul li:hover a span {
    opacity: 1;
    transform: scale(1) translateY(100%);
 }
 ul li:hover a i,
 ul li a span {
    filter: drop-shadow(0 0 20px var(--clr)) drop-shadow(0 0 40px var(--clr)) drop-shadow(0 0 60px var(--clr));
 }




/* 故障字符 */
.container{
      border: solid rgb(51, 221, 255);
      margin-top: 5%;
      cursor: pointer;
			user-select: none;
			position: relative;
			width: 300px;
			background-color: #000000;
			height: 55px;
			display: flex; /* 使用flex布局 */
			align-items: center; /* 垂直居中 */
			justify-content: center; /* 水平居中 */
		}

		.text-magic {
			position: relative; /* 保持相对定位 */
			transform: scale(2.4); /* 只应用缩放，不再需要translate */
			height: 30px; /* 根据需要调整高度 */
			margin-top: 6%;
			font-family: Raleway, Verdana, Arial;
			color: #fff;
		}

		.white {
		    position: absolute;
		    left: -10px;
		    width: 50%;
		    height: 16px;
		    background: #911;
		    z-index: 4;
		    animation: whiteMove 3s ease-out infinite;
		}
		
		.text-magic::before {
		    content: attr(data-word);
		    position: absolute;
		    top: 0;
		    left: 0.5px;
		    height: 100px;
		    color: rgba(255, 255, 255, 0.9);
		    overflow: hidden;
		    z-index: 2;
		    animation: redShadow 1s ease-in infinite;
		    filter: contrast(200%);
		    text-shadow: 1px 0 0 red;
		}
		
		.text-magic::after {
		    content: attr(data-word);
		    position: absolute;
		    top: 0;
		    left: -0.5px;
		    height: 0px;
		    color: rgba(255, 255, 255, 0.8);
		    overflow: hidden;
		    z-index: 3;
		    background: rgba(0, 0, 0, 0.9);
		    animation: redHeight 1.5s ease-out infinite;
		    filter: contrast(200%);
		    text-shadow: -1px 0 0 cyan;
		    mix-blend-mode: darken;
		}
		.white {
		    position: absolute;
		    left: -10px;
		    width: 150%;
		    height: 1px;
		    background: #000;
		    z-index: 4;
		    animation: whiteMove 0.1s ease-out infinite;
		}
		
		@keyframes redShadow {
		    20% {
		        height: 50px;
		    }
		    60% {
		        height: 6px;
		    }
		    100% {
		        height: 10px;
		    }
		}
		
		@keyframes redHeight {
		    20% {
		        height: 21px;
		    }
		    35% {
		        height: 6px;
		    }
		    50% {
		        height: 20px;
		    }
		    60% {
		        height: 10px;
		    }
		    70% {
		        height: 17px;
		    }
		    80% {
		        height: 21px;
		    }
		    100% {
		        height: 0px; 
			}
		}
		@keyframes whiteMove {
		    8% {
		        top: 110px;
		    }
		    14% {
		        top: 18px;
		    }
		    20% {
		        top: 11px;
		    }
		    32% {
		        top: 1px;
		    }
		    99% {
		        top: 7px;
		    }
		}




/* 进入博客按钮 */
.cybr-btn {
    margin-bottom: 3%;
  --primary-hue: 240;
  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
  --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
  --primary-lightness: 50;
  --color: hsl(100, 0%, 100%);
  --font-size: 26px;
  --shadow-primary-hue: 180;
  --label-size: 9px;
  --shadow-secondary-hue: 60;
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
  --border: 4px;
  --shimmy-distance: 5;
  --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
  --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
  --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
  --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
  --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
  --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
  font-family: 'Cyber', sans-serif;
  color: var(--color);
  cursor: pointer;
  background: transparent;
  text-transform: uppercase;
  font-size: var(--font-size);
  outline: transparent;
  letter-spacing: 2px;
  position: relative;
  font-weight: 700;
  border: 0;
  min-width: 300px;
  height: 75px;
  line-height: 75px;
  transition: background 0.2s;
}
 
.cybr-btn:hover {
  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.8%));
}
.cybr-btn:active {
  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 0.6%));
}
 
.cybr-btn:after,
.cybr-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: var(--clip);
  z-index: -1;
}
 
.cybr-btn:before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}
 
.cybr-btn:after {
  background: var(--primary);
}
 
.cybr-btn__tag {
  position: absolute;
  padding: 1px 4px;
  letter-spacing: 1px;
  line-height: 1;
  bottom: -5%;
  right: 5%;
  font-weight: normal;
  color: hsl(0, 0%, 0%);
  font-size: var(--label-size);
}
 
.cybr-btn__glitch {
  position: absolute;
  top: calc(var(--border) * -1);
  left: calc(var(--border) * -1);
  right: calc(var(--border) * -1);
  bottom: calc(var(--border) * -1);
  background: var(--shadow-primary);
  text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
  clip-path: var(--clip);
  animation: glitch 2s infinite;
  display: none;
}
 
.cybr-btn:hover .cybr-btn__glitch {
  display: block;
}
 
.cybr-btn__glitch:before {
  content: '';
  position: absolute;
  top: calc(var(--border) * 1);
  right: calc(var(--border) * 1);
  bottom: calc(var(--border) * 1);
  left: calc(var(--border) * 1);
  clip-path: var(--clip);
  background: var(--primary);
  z-index: -1;
}
 
@keyframes glitch {
  0% {
    clip-path: var(--clip-one);
  }
  2%, 8% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  6% {
    clip-path: var(--clip-two);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  9% {
    clip-path: var(--clip-two);
    transform: translate(0, 0);
  }
  10% {
    clip-path: var(--clip-three);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  13% {
    clip-path: var(--clip-three);
    transform: translate(0, 0);
  }
  14%, 21% {
    clip-path: var(--clip-four);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  25% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  30% {
    clip-path: var(--clip-five);
    transform: translate(calc(var(--shimmy-distance) * -1%), 0);
  }
  35%, 45% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * -1%));
  }
  40% {
    clip-path: var(--clip-six);
    transform: translate(calc(var(--shimmy-distance) * 1%));
  }
  50% {
    clip-path: var(--clip-six);
    transform: translate(0, 0);
  }
  55% {
    clip-path: var(--clip-seven);
    transform: translate(calc(var(--shimmy-distance) * 1%), 0);
  }
  60% {
    clip-path: var(--clip-seven);
    transform: translate(0, 0);
  }
  31%, 61%, 100% {
    clip-path: var(--clip-four);
  }
}
 
.cybr-btn:nth-of-type(2) {
  --primary-hue: 260;
}