@font-face {
	font-family: Angus;
	src: url('../resources/font/angus.otf');
	unicode-range: U+0000-007F;
}

@font-face {
	font-family: Stepmono;
	src: url('../resources/font/Steps-Mono.otf');
	unicode-range: U+0000-007F;
}

@font-face {
	font-family: Unica;
	src: url('../resources/font/unica-one.ttf');
	unicode-range: U+0000-007F;
}

@font-face {
	font-family: Sligoil;
	src: url('../resources/font/Sligoil-Micro.otf');
	unicode-range: U+0000-007F;
}

@font-face {
	font-family: Mathd;
	src: url('../resources/font/MATHD.ttf');
	unicode-range: U+0000-007F;
}

@font-face {
	font-family: MiSans;
	src: url('../resources/font/MiSans.woff2');
}

@font-face {
	font-family: DJGSHT;
	src: url('../resources/font/等距更纱黑体.woff2');
}

@font-face {
	font-family: fox;
	src: url('../resources/font/foxsize.ttf');
}

/* Global things */
body {
	color: var(--color);
	overflow: hidden;
	--background: #0f0f0f;
	--color: #dfdfdf;
	--points: #ffffff;
	--bought: #d8d8d8;
	background: var(--background)
}

/* General text */
h1,
h2,
h3,
b,
input {
	display: inline;
	font-family: var(--Font), "Microsoft YaHei";
}

/* These are styles for different states of components. You can make layer-specific versions with .c.locked, for example */
.locked {
	background-color: var(--locked);
	cursor: not-allowed;
}

.achlocked {
	background-image: linear-gradient(to bottom, #FF000040, #00FFFF40),url(../resources/achpic/0.jpg)  !important;
	color: #00000000 !important;
	text-shadow: unset !important;
	cursor: not-allowed;
}

/* Can meens can be clicked/bought/etc */
.can {
	cursor: pointer;
}

.can:hover {
	transform: scale(1.15, 1.15);
	box-shadow: 0 0 20px var(--points)
}

.bought {
	background-color: var(--bought);
	cursor: default;
}

#points {
	color: var(--points);
	text-shadow: 0 0 10px var(--points);
}

#super-points {
	color: var(--super-points);
	text-shadow: 0 0 10px var(--super-points);
}