/*文章的整体背景，渐变色设置*/
@-webkit-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@-moz-keyframes Gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

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

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

@keyframes Gradient2 {
	0% {
		background-position: 45% 60%;
	}

	25% {
		background-position: 45% 40%;
	}

	50% {
		background-position: 50% 40%;
	}


	75% {
		background-position: 50% 60%;
	}

	100% {
		background-position: 45% 60%;
	}
}

#web_bg {
	  /* 背景图像的地址（url括号里）  */
	  background: linear-gradient(
			60deg,
			rgba(255, 165, 150, 0.5) 5%,
			rgba(0, 228, 255, 0.35)
		),
	  	url(https://i.ibb.co/zhJJkVc5/20250825000437648.jpg);
	  /* 背景图像不重复 */
	  background-repeat: no-repeat;
	  /* 背景图像大小 */
	  background-size: 105% 130%;
	  animation: Gradient2 15s ease infinite !important;
}


@media screen and (max-width=767px){
	#web_bg {
		/* 背景图像的地址（url括号里）  */
		background: linear-gradient(
			  60deg,
			  rgba(255, 165, 150, 0.5) 5%,
			  rgba(0, 228, 255, 0.35)
		  );
		/* 背景图像不重复 */
  }
}

/* 主页所有文章页面背景 */
#aside_content>.card-widget,
#recent-posts>.recent-post-item,
.layout_page>div:first-child:not(.recent-posts),
.layout_post>#page,
.layout_post>#post,
.read-mode .layout_post>#post {
	background: linear-gradient(
		90deg,
		#f7953333 0,
		#f3705533 15%,
		#ef4e7b33 30%,
		#a166ab33 44%,
		#5073b833 58%,
		#1098ad33 72%,
		#07b39b33 86%,
		#6dba8233 100%),
		#ffffffcc;
	box-shadow: 0 0 5px rgb(66, 68, 68);
	position: relative;
	background-size: 100% 100%;
}

/*侧边栏页面*/
#aside-content>.card-widget {
	background: linear-gradient(-45deg,
		rgba(232, 216, 185, 0.9),
		rgba(236, 206, 197, 0.8),
		rgba(163, 233, 235, .6),
		rgba(189, 189, 240, 1),
		rgba(238, 193, 234, .85));
	box-shadow: 0 0 5px rgb(66, 68, 68);
	position: relative;
	background-size: 250% 200%;
	-webkit-animation: Gradient 10s ease infinite;
	-moz-animation: Gradient 10s ease infinite;
	animation: Gradient 10s ease infinite !important;
}

#aside-content>.sticky_layout>.card-widget {
	background: linear-gradient(-45deg,
		rgba(238, 193, 234, .85),
		rgba(232, 216, 185, 0.9),
		rgba(236, 206, 197, 0.8),
		rgba(163, 233, 235, 0.8),
		rgba(189, 189, 240, 1));
	box-shadow: 0 0 5px rgb(66, 68, 68);
	position: relative;
	background-size: 250% 200%;
	-webkit-animation: Gradient 10s ease infinite;
	-moz-animation: Gradient 10s ease infinite;
	animation: Gradient 10s ease infinite !important;
}

/*文章页面*/
.layout>#post {
	background: linear-gradient(
		90deg,
		rgba(247, 149, 51, 0.2) 0,
		rgba(243, 112, 85, 0.2) 15%,
		rgba(239, 78, 123, 0.2) 30%,
		rgba(161, 102, 171, 0.2) 44%,
		rgba(80, 115, 184, 0.2) 58%,
		rgba(16, 152, 173, 0.2) 72%,
		rgba(7, 179, 155, 0.2) 86%,
		rgba(109, 186, 130, 0.2) 100%),
		rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 5px rgb(66, 68, 68);
	position: relative;
	background-size: 100% 100%;
}

/*分类页面*/
.layout>#page {
	background: linear-gradient(
		90deg,
		rgba(247, 149, 51, 0.2) 0,
		rgba(243, 112, 85, 0.2) 15%,
		rgba(239, 78, 123, 0.2) 30%,
		rgba(161, 102, 171, 0.2) 44%,
		rgba(80, 115, 184, 0.2) 58%,
		rgba(16, 152, 173, 0.2) 72%,
		rgba(7, 179, 155, 0.2) 86%,
		rgba(109, 186, 130, 0.2) 100%),
		rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 5px rgb(66, 68, 68);
	position: relative;
	background-size: 100% 100%;
}

/*时间轴页面*/
.layout>#archive {
	background: linear-gradient(
		90deg,
		rgba(247, 149, 51, 0.2) 0,
		rgba(243, 112, 85, 0.2) 15%,
		rgba(239, 78, 123, 0.2) 30%,
		rgba(161, 102, 171, 0.2) 44%,
		rgba(80, 115, 184, 0.2) 58%,
		rgba(16, 152, 173, 0.2) 72%,
		rgba(7, 179, 155, 0.2) 86%,
		rgba(109, 186, 130, 0.2) 100%),
		rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 5px rgb(66, 68, 68);
	position: relative;
	background-size: 100% 100%;
}


#nav-right{
    flex:1 1 auto;
    justify-content: flex-end;
    margin-left: auto;
    display: flex;
    flex-wrap:nowrap;
}

  /*顶部加载进度条*/
.pace {
	pointer-events: none;
	user-select: none;
	z-index: 2;
	position: fixed;
	margin: auto;
	top: 4px;
	left: 0;
	right: 0;
	height: 8px;
	border-radius: 8px;
	width: 6rem;
	background: #8798c9;
	overflow: hidden;
  }
  
  .pace-inactive .pace-progress {
	opacity: 0;
	transition: 0.3s ease-in;
  }
  
  .pace.pace-inactive {
	opacity: 0;
	transition: 0.3s;
	top: -8px;
  }
  
  .pace .pace-progress {
	box-sizing: border-box;
	transform: translate3d(0, 0, 0);
	position: fixed;
	z-index: 2;
	display: block;
	position: absolute;
	top: 0;
	right: 100%;
	height: 100%;
	width: 100%;
	background: #7ec045;
	background: linear-gradient(
	  to right,
	  rgb(249, 207, 231),
	  rgb(196, 113, 237),
	  rgb(246, 79, 89)
	);
	animation: gradient 2s ease infinite;
	background-size: 200%;
  }

#nav-right {
	flex: 1 1 auto;
	justify-content: flex-end;
	margin-left: auto;
	display: flex;
	flex-wrap: nowrap;
}

#canvas {
	z-index: 100;
}

/*home动画?*/
#site-name::before{
    opacity: 0;
    background-color: var(--lyx-theme)!important;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    position:absolute;
    top:0!important;
    right:0!important;
    width:100%;
    height:100%;
    content: "\f015";
    box-shadow: 0 0 5px var(--lyx-theme);
    font-family: "main";
    text-align: center;
    color:white;
    line-height:34px;/*如果有溢出或者垂直不居中的现象微调一下这个参数*/
    font-size: 18px;/*根据个人喜好*/
}
#site-name:hover::before{
    opacity: 1;
    scale:1.03;
}
#site-name{
    position: relative;
    font-size: 32px; /*一定要把字体调大点，否则效果惨不忍睹！*/
}
:root{
    --lyx-theme:#ed709b /*我的主题色*/
}

@font-face {
	/*字体名称，名字可以随便起，但是注意要一致，建议英文*/
    font-family: 'main';
    font-display: swap;
    src: url('./main.ttf') format("truetype");
}
@font-face {
	/*字体名称，名字可以随便起，但是注意要一致，建议英文*/
    font-family: 'title';
    font-display: swap;
    src: url('./title.ttf') format("truetype");
}
@font-face {
	/*字体名称，名字可以随便起，但是注意要一致，建议英文*/
    font-family: 'typing';
    font-display: swap;
    src: url('./typing.ttf') format("truetype");
}

/* 全局默认鼠标指针 */
body,
html {
	cursor: url('./mouse/WitchSpring/正常选择.cur'), auto !important;
}

/* 悬停图片时的鼠标指针 */
img {
	
	cursor: url('./mouse/WitchSpring/移动.cur'), auto !important;
}

/* 选择链接标签时的鼠标指针 */
a:hover {
	cursor: url('./mouse/WitchSpring/链接选择.cur'), auto;
}

/* 选中输入框时的鼠标指针 */
input:hover {
	cursor: url('./mouse/WitchSpring/文本选择.cur'), auto;
}

/* 悬停按钮时的鼠标指针 */
button:hover {
	cursor: url('./mouse/WitchSpring/忙.cur'), auto;
}

/* 悬停列表标签时的鼠标指针 */
i:hover {
	cursor: url('./mouse/WitchSpring/精确选择.cur'), auto;
}

/* 悬停页脚链接标签（例如页脚徽标）时的鼠标指针 */
#footer-wrap a:hover {
	cursor: url('./mouse/WitchSpring/忙.cur'), auto;
}

/* 悬停页码时的鼠标指针 */
#pagination .page-number:hover {
	cursor: url('./mouse/WitchSpring/水平调整大小.cur'), auto;
}

/* 悬停菜单栏时的鼠标指针 */
#nav .site-page:hover {
	cursor: url('./mouse/WitchSpring/精确选择.cur'), auto;
}


/* 最新文章图标 */
.newPost-left,
.newPost-right {
    position: absolute;
    top: 0;
    color: rgba(255, 255, 255, 0.9);
    padding: 0 15px;
    background-color: rgba(73, 177, 245, 0.7);
    border-radius: 0 0 10px 10px;
}

.newPost-left {
    left: 15px;
}

.newPost-right {
    right: 15px;
}


/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.55rem;
  font-size: 1.3rem;
  margin-top: -0.23rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.35rem;
  font-size: 1.1rem;
  margin-top: -0.12rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 0.95rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 0.8rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.7rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.9rem;
  font-size: 0.66rem;
  margin-top: 0rem;
}


.history_slide {
    text-align: left;
    font-size: 14px;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: 0px 0px 10px 5px rgb(104, 104, 104);
    align-items: flex-start;
}


/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}

.toast-title {
	font-weight: bold;
  }
  .toast-message {
	-ms-word-wrap: break-word;
	word-wrap: break-word;
  }
  .toast-message a,
  .toast-message label {
	color: #FFFFFF;
  }
  .toast-message a:hover {
	color: #CCCCCC;
	text-decoration: none;
  }
  .toast-close-button {
	position: relative;
	right: -0.3em;
	top: -0.3em;
	float: right;
	font-size: 20px;
	font-weight: bold;
	color: #FFFFFF;
	-webkit-text-shadow: 0 1px 0 #ffffff;
	text-shadow: 0 1px 0 #ffffff;
	opacity: 0.8;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	filter: alpha(opacity=80);
	line-height: 1;
  }
  .toast-close-button:hover,
  .toast-close-button:focus {
	color: #000000;
	text-decoration: none;
	cursor: pointer;
	opacity: 0.4;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	filter: alpha(opacity=40);
  }
  .rtl .toast-close-button {
	left: -0.3em;
	float: left;
	right: 0.3em;
  }
  /*Additional properties for button version
   iOS requires the button element instead of an anchor tag.
   If you want the anchor version, it requires `href="#"`.*/
  button.toast-close-button {
	padding: 0;
	cursor: pointer;
	background: transparent;
	border: 0;
	-webkit-appearance: none;
  }
  .toast-top-center {
	top: 0;
	right: 0;
	width: 100%;
  }
  .toast-bottom-center {
	bottom: 0;
	right: 0;
	width: 100%;
  }
  .toast-top-full-width {
	top: 0;
	right: 0;
	width: 100%;
  }
  .toast-bottom-full-width {
	bottom: 0;
	right: 0;
	width: 100%;
  }
  .toast-top-left {
	top: 12px;
	left: 12px;
  }
  .toast-top-right {
	top: 12px;
	right: 12px;
  }
  .toast-bottom-right {
	right: 12px;
	bottom: 12px;
  }
  .toast-bottom-left {
	bottom: 12px;
	left: 12px;
  }
  #toast-container {
	position: fixed;
	z-index: 999999;
	pointer-events: none;
	/*overrides*/
  }
  #toast-container * {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
  }
  #toast-container > div {
	position: relative;
	pointer-events: auto;
	overflow: hidden;
	margin: 0 0 6px;
	padding: 15px 15px 15px 50px;
	width: 300px;
	-moz-border-radius: 3px 3px 3px 3px;
	-webkit-border-radius: 3px 3px 3px 3px;
	border-radius: 3px 3px 3px 3px;
	background-position: 15px center;
	background-repeat: no-repeat;
	color: #0e0808;
	opacity: 1.0;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	filter: alpha(opacity=80);
  }
  #toast-container > div.rtl {
	direction: rtl;
	padding: 15px 50px 15px 15px;
	background-position: right 15px center;
  }
  #toast-container > div:hover {
	-moz-box-shadow: 0 0 12px #000000;
	-webkit-box-shadow: 0 0 12px #000000;
	box-shadow: 0 0 12px #000000;
	opacity: 1;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
	filter: alpha(opacity=100);
	cursor: pointer;
  }
  
  #toast-container > .toast-success {
	background-image: url("./success.png") !important;
  }
  #toast-container.toast-top-center > div,
  #toast-container.toast-bottom-center > div {
	width: 300px;
	margin-left: auto;
	margin-right: auto;
  }
  #toast-container.toast-top-full-width > div,
  #toast-container.toast-bottom-full-width > div {
	width: 96%;
	margin-left: auto;
	margin-right: auto;
  }
  .toast {
	background-color: #030303;
  }
  .toast-success {
	background-color: #ffffff;
  }
  .toast-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 4px;
	background-color: #000000;
	opacity: 0.4;
	-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
	filter: alpha(opacity=40);
  }
  /*Responsive Design*/
  @media all and (max-width: 240px) {
	#toast-container > div {
	  padding: 8px 8px 8px 50px;
	  width: 11em;
	}
	#toast-container > div.rtl {
	  padding: 8px 50px 8px 8px;
	}
	#toast-container .toast-close-button {
	  right: -0.2em;
	  top: -0.2em;
	}
	#toast-container .rtl .toast-close-button {
	  left: -0.2em;
	  right: 0.2em;
	}
  }
  @media all and (min-width: 241px) and (max-width: 480px) {
	#toast-container > div {
	  padding: 8px 8px 8px 50px;
	  width: 18em;
	}
	#toast-container > div.rtl {
	  padding: 8px 50px 8px 8px;
	}
	#toast-container .toast-close-button {
	  right: -0.2em;
	  top: -0.2em;
	}
	#toast-container .rtl .toast-close-button {
	  left: -0.2em;
	  right: 0.2em;
	}
  }
  @media all and (min-width: 481px) and (max-width: 768px) {
	#toast-container > div {
	  padding: 15px 15px 15px 50px;
	  width: 25em;
	}
	#toast-container > div.rtl {
	  padding: 15px 50px 15px 15px;
	}
  }

#he-plugin-standard{
    width:100%!important;
    margin-bottom:20px!important;
}
.wv-lt-location>a[data-v-4b9dcab4],.wv-lt-location>span[data-v-4b9dcab4],.wv-n-h-now-tmp>span[data-v-5f4c0628],.wv-n-h-now-txt>span[data-v-5f4c0628],.wv-n-h-now-rain>a[data-v-5f4c0628], .wv-n-h-now-rain>span[data-v-5f4c0628],.wv-f-forecast-date>a[data-v-66693262],.wv-f-a{
    color:var(--font-color)!important;
    font-family: main !important;
    font-size:14px
}
.wv-n-h-now-aqi-item {
    display: none;
}


  :root {
	--trans-dark: rgba(25, 25, 25, 0.88);
	--border-style: 1px solid rgb(169, 169, 169);
	--backdrop-filter: blur(5px) saturate(150%);
  }
  
  [data-theme="dark"] #page-header.nav-fixed #nav {
	background: linear-gradient(
		60deg,
	    rgba(255, 165, 150, 0.5) 5%,
	    rgba(0, 228, 255, 0.35)
		),
		rgba(0, 0, 0, 0.7) !important;
	backdrop-filter: blur(10px);
  }
  
  /* 夜间模式遮罩 */
  [data-theme="dark"] #recent-posts > .recent-post-item,
  [data-theme="dark"] #aside-content .card-widget,
  [data-theme="dark"] div#post,
  [data-theme="dark"] div#archive,
  [data-theme="dark"] div#page {
	background: var(--trans-dark);
  }
  
  
  /* 夜间模式页脚页头遮罩透明 */
  [data-theme="dark"] #footer::before {
	background: transparent !important;
  }

  
  /* 夜间模式下的阅读模式 */
  [data-theme="dark"] .read-mode #aside-content .card-widget {
	background: rgba(25, 25, 25, 0.9) !important;
	color: #ffffff;
  }
  [data-theme="dark"] .read-mode div#post {
	background: rgba(25, 25, 25, 0.9) !important;
	color: #ffffff;
  }

/*
2022.10.4更新：
根据我发现的没有自适应，间距不合理问题进行调整，如果用了这个的朋友们建议改一改
*/
#page-name::before{
    font-size:18px;
    position: absolute;
    width:100%;
    height:100%;
    border-radius: 8px;
    color:white!important;
	backdrop-filter: blur(50px);
    top:0;
    left:0;
    content:'回到顶部';
    background-color: #4b48487b;
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
    opacity: 0;
    box-shadow: 0 0 3px #2e2d2d7b;
    line-height: 45px; /*如果垂直位置不居中可以微调此值，也可以删了*/
}
#page-name:hover:before{
    opacity: 1;
}
@media screen and (max-width:90px){
    #page-name,#menus{
      display:none!important;
    }
}

[data-theme='light'] h1 {/*这里可以改成自己喜欢的渐变色*/
	background: linear-gradient(to right, #365262 0%, #1c6a54 50%, #254050 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }
  [data-theme='dark'] h1 {/*这里可以改成自己喜欢的渐变色*/
	background: linear-gradient(to right, #ffa9c4 0%, #7fe6e1 50%, #e68daa 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
  }


/* 主页哔哔bb */
#bber-talk {
	width: 100%;
	height: 25px;
	line-height: 25px;
  }
  
  #bber-talk .li-style {
	width: 100%;
	height: 25px;
	text-align: center;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: 0.3s;
  }
  
  #bber-talk .li-style:hover{
	color: #d7acfada;
  }
  
  #bber-talk ul,li{
	list-style:none;
	display:block;
	margin: 0;
	padding: 0;
  }
  
  #bbTimeList{
	background: linear-gradient(
		90deg,
		rgba(247, 149, 51, 0.2) 0,
		rgba(243, 112, 85, 0.2) 15%,
		rgba(239, 78, 123, 0.2) 30%,
		rgba(161, 102, 171, 0.2) 44%,
		rgba(80, 115, 184, 0.2) 58%,
		rgba(16, 152, 173, 0.2) 72%,
		rgba(7, 179, 155, 0.2) 86%,
		rgba(109, 186, 130, 0.2) 100%),
		rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 5px rgb(66, 68, 68);	
	color: var(--font-color);
	margin: 1rem;
	padding: 0.6rem 1rem 0.5rem 1rem;
	border-radius: 12px;
	cursor: pointer;
	display: flex;
  }
  
  #bbtalk{
	display: flex;
	flex-direction: column;
	overflow: hidden;
  }


/*侧边滑动颜色*/
:root {
    --btn-bg: linear-gradient(90deg,
	rgba(224, 185, 232, 0.233),
	rgba(227, 151, 244, 0.5),
	rgba(198, 163, 235, 0.8),
	rgba(204, 157, 229, 0.51),
	rgba(238, 193, 234, 0.201));
}

.swiper-button-next:after, .swiper-button-prev:after{
    color:#c273ff9c!important; /*自己改*/
}
#name-container{
    transition: all .3s;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -ms-transition: all .3s;
    -o-transition: all .3s;
}
#name-container:hover{
    scale:1.03
}
#page-name{
    position: relative;
    padding:10px 100px/*如果文字间隔不合理可以微调修改，第二个是水平方向的padding，第一个是垂直的*/
}
#nav{
    padding: 0 20px;
}


@keyframes animX{
	0% {left: -5px;}
	100% {left: 5px;}
}
@keyframes animY{
	0% {top: -5px;}
	100% {top: 5px;}
}

@keyframes animsize{
	0% {scale: 0.85;}
	100% {scale: 1.15;}
}




#cursor {
    position: fixed;
    width: 68px;
    height: 68px;
    border-radius: 34px;
    opacity: 1;
    z-index: 10086;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    transition-property: background, opacity, transform;
}

#cursor1 {
    position: relative;
    width: 48px;
    height: 48px;
    background:
	  	url(./mouse/WitchSpring/忙.png);
    border-radius: 24px;
    opacity: 0.5;
	animation: animX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, animY 4s cubic-bezier(0.36,0,0.64,1)  0s infinite alternate, animsize 10s cubic-bezier(0.83,0,0.11,1) infinite alternate;
    z-index: 10086;
    pointer-events: none;
    transition: 0.2s ease-in-out;
    transition-property: background, opacity, transform;
}

#cursor.hidden {
    opacity: 0;
}

#cursor.hover {
    opacity: 0.2;
    transform: scale(2.5) translate(5px,5px);
}

#cursor.active {
    opacity: 0.9;
    transform: scale(0.5);
}

#owo-big {
    position: fixed;
    align-items: center;
    background-color: rgb(255, 255, 255);
    border: 1px #aaa solid;
    border-radius: 10px;
    z-index: 9999;
    display: none;
    transform: translate(0, -105%);
    overflow: hidden;
    animation: owoIn 0.3s cubic-bezier(0.42, 0, 0.3, 1.11);
}

[data-theme=dark] #owo-big {
    background-color: #4a4a4a
}

#owo-big img {
    width: 100%;
}

.jg-caption{
    text-align: center !important;
}

/*哔哩哔哩视频适配*/
.aspect-ratio {position: relative;width: 100%;height: 0;padding-bottom: 75%;margin: 3% auto;text-align: center;}      
.aspect-ratio iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

/* 动画效果代码由 Heo：https://blog.zhheo.com/ 提供 */
@keyframes owoIn {
    0% {
        transform: translate(0, -95%);
        opacity: 0;
    }
    100% {
        transform: translate(0, -105%);
        opacity: 1;
    }
}

/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
    content: '输入QQ号会自动获取昵称和头像🐧';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
    content: '收到回复将会发送到您的邮箱📧';
}

.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
    content: '可以通过昵称访问您的网站🔗';
}

/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
    display: block;
}

/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
    /* 先隐藏起来 */
    display: none;
    /* 绝对定位 */
    position: absolute;
    /* 向上移动60像素 */
    top: -60px;
    /* 文字强制不换行，防止left:50%导致的文字换行 */
    white-space: nowrap;
    /* 圆角 */
    border-radius: 10px;
    /* 距离左边50% */
    left: 50%;
    /* 然后再向左边挪动自身的一半，即可实现居中 */
    transform: translate(-50%);
    /* 填充 */
    padding: 14px 18px;
    background: #444;
    color: #fff;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
    display: none;
    content: '';
    position: absolute;
    /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
    我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
    border: 12px solid transparent;
    border-top-color: #444;
    left: 50%;
    transform: translate(-50%, -48px);
}