/* 设置 html 元素的字体样式，使用多种字体作为备选，最后一个是无衬线字体 */
html {
	/* 设置字体粗细为 400 */
	font-family: -apple-system, BlinkMacSystemFont, "myriad-pro", sans-serif;
	font-weight: 400;
	/* 设置背景颜色为白色 */
	background-color: #fff;
	/* 在 webkit 内核浏览器中开启字体抗锯齿 */
	-webkit-font-smoothing: antialiased;
	/* 在火狐浏览器中开启字体抗锯齿 */
	-moz-osx-font-smoothing: grayscale;
	/* 调整文本大小，使文本在移动设备上的显示效果更好 */
	-webkit-text-size-adjust: 100%;
}

.type-div {
	position: absolute;
	right: 0px;
	top: 21px;
}

/* 当 body 元素有 dark 类时的样式 */
body.dark {
	/* 默认颜色 */
	background: #dfe7ef;

	/* 暗色 */
	/* background-color: #606578; */
	/* background-image: linear-gradient(#7a6163, #556681); */
}


/* 对所有元素、所有伪元素（:before 和 :after）应用盒模型，使边框和内边距包含在元素的宽度和高度内 */
*,
*:before,
*:after {
	box-sizing: border-box;
}

/* 设置类名为 mode 的元素样式 */
.mode {
	/* 相对定位，方便内部绝对定位元素的布局 */
	/* 将按钮设置为绝对定位 */
	position: absolute;
	/* 设置按钮距离右侧 180 像素，距离底部 50 像素。 */
	right: 60px;
	top: 0px;

	/* 使元素呈现圆形 */
	border-radius: 50%;
	background: #000;
	cursor: pointer;

}


/* 类名为 mode 的元素的 :before 伪元素样式 */
.mode:before {
	content: '';
	position: absolute;
	top: 15px;
	left: 15px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	/* 设置背景图像为从左到右的黑白线性渐变 */
	background-image: linear-gradient(to right, #fff 50%, #000 50.01%);
	border: 2px solid #fff;
	/* 定义过渡效果，使元素的变换在 0.5 秒内以平滑的方式进行 */
	transition: transform 0.5s ease-out;
}

/* 类名为 mode 的元素的 :after 伪元素样式 */
.mode:after {
	content: '';
	position: absolute;
	top: 24px;
	left: 24px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	/* 设置混合模式，使元素与背景颜色产生差异效果 */
	mix-blend-mode: difference;
}

/* 类名为 mode 元素内部的 div 元素样式 */
.mode div {
	position: absolute;
	bottom: -44px;
	width: 76px;
	left: 50%;
	/* 使元素向左移动自身宽度的一半，实现水平居中 */
	transform: translateX(-64%);
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	line-height: 18px;
	/* 使元素不响应鼠标事件 */
	pointer-events: none;


}



/* 类名为 mode 元素内部的 div 元素的 :after 伪元素样式 */
.mode div:after {
	content: '炫彩模式';
	/* animation: hideElement 3s forwards; */
	font-weight: 400;
}

/* 当 body 元素有 dark 类时，类名为 mode 元素内部的 div 元素的 :after 伪元素样式 */
.dark .mode div:after {
	content: '默认模式';
	/* animation: hideElement 3s forwards; */
}


/* 当 body 元素有 dark 类时，类名为 mode 的元素样式 */
.dark .mode {
	background: #fff;
}

/* 当 body 元素有 dark 类时，类名为 mode 元素的 :before 伪元素样式 */
.dark .mode:before {
	border: 2px solid #000;
	transform: rotate(180deg);
}


/* 类名为 scaling 的元素的 :after 伪元素样式 */
.scaling:after {
	/* 应用名为 scaleInner 的动画，持续 0.5 秒，以平滑的方式向前播放 */
	animation: scaleInner 0.5s ease forwards;
}

/* 定义名为 scaleInner 的动画关键帧（针对火狐浏览器） */
@-moz-keyframes scaleInner {
	50% {
		transform: scale(1.8);
	}
}

/* 定义名为 scaleInner 的动画关键帧（针对 webkit 内核浏览器） */
@-webkit-keyframes scaleInner {
	50% {
		transform: scale(1.8);
	}
}

/* 定义名为 scaleInner 的动画关键帧（针对 opera 浏览器） */
@-o-keyframes scaleInner {
	50% {
		transform: scale(1.8);
	}
}

/* 定义名为 scaleInner 的动画关键帧（通用） */
@keyframes scaleInner {
	50% {
		transform: scale(1.8);
	}
}