.upg {
	min-height: 120px;
	width: 120px;
	border-radius: 5px;
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.125);
	font-size: 10px;
	overflow: visible;
}

.achievement {
	height: 90px;
	width: 90px;
	border-radius: 5px;
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.125);
	font-size: 10px;
	color: #FFFFFF;
	background-size: cover;
	border: 2px solid #88888888;
	text-shadow: 0 0 5px var(--points);
}

.achievement:hover {
	box-shadow: 0 0 10px var(--points);
	z-index: 7;
	transform: scale(1.5, 1.5) translateY(16.7px);
	font-size: 7.5px;
	color: #FFFFFF88;
	text-shadow: unset;
}

.buyable {
	height: 200px;
	width: 200px;
	border-radius: 5px;
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.125);
	font-size: 10px;
	position: relative;
}

.milestone {
	width: 100%;
	min-width: 120px;
	padding-left: 5px;
	padding-right: 5px;
	height: 75px;
	background-color: var(--locked);
	border: 4px solid;
	border-radius: 5px;
	border-color: rgba(0, 0, 0, 0.125);
	color: rgba(0, 0, 0, 0.5);
}

.milestoneDone {
	width: 100%;
	min-width: 120px;
	padding-left: 5px;
	padding-right: 5px;

	height: 75px;
	background-color: var(--bought);
	border: 4px solid;
	border-radius: 5px;
	border-color: rgba(0, 0, 0, 0.125);
	color: rgba(0, 0, 0, 0.5);
}

.challenge {
	background-color: var(--locked);
	position: relative;
	border: 4px solid;
	border-radius: 10px;
	border-color: rgba(0, 0, 0, 0.125);
	color: rgba(0, 0, 0, 0.5);
	width: 300px;
	height: 300px;
	font-size: 15px;
}

.challenge.done {
	background-color: var(--bought);
}

.challenge.canComplete {
	background-color: #ffbf00;
}

/* Infoboxes */
.story {
	width: 600px;
	max-width: 95%;
	border-bottom: solid 4px;
	border-radius: 8px;
	margin-bottom: 8px;
	text-align: left;
}

.story-title {
	text-align: left;
	font-size: 24px;
	color: black;
	cursor: pointer;
	border: none;
	padding: 2px;
	border-radius: 8px 8px 0 0;
}

.story-toggle {
	border: none;
	background: black;
	color: white;
	font-size: 20px;
	pointer-events: none;
	width: 1em;
	display: inline-block;
}

.story-text {
	padding: 2px;
	border: solid 4px;
	border-color: inherit;
	border-radius: inherit;
	border-top-left-radius: 0;
	margin-bottom: -2px;
}


/* Tiles are gridables */
.tile {
	height: 80px;
	width: 80px;
	border-radius: 5px;
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.125);
	font-size: 10px;
	overflow: visible;
}

.tile.can:hover {
	box-shadow: 0 0 10px var(--points);
	transform: scale(1.1, 1.1);
	z-index: 7;
}

.upgBig {
	height: 200px;
	width: 200px;
	border-radius: 5px;
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.125);
}

/* Used for respec button and similar */
.longUpg {
	height: 50px;
	width: 120px;
	background: var(--points);
	border-radius: 5px;
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.125);
	font-size: 10px;
}

.smallUpg {
	height: 40px;
	width: 40px;
	border-radius: 5px;
	border: 2px solid;
	border-color: rgba(0, 0, 0, 0.125);
}

div.tbox {
	width: 700px;
	padding: 10px;
	border-radius: 5px;
	border: 2px solid white;
	background: #111;
}

.c1 {
	background: linear-gradient(in hsl longer hue 60deg,
			hsl(0, 100%, 50%),
			hsl(360, 100%, 50%));
	background-size: 200% auto;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: rainbow 6s linear infinite;
}

.c2 {
	background: linear-gradient(in hsl 90deg,
			hsl(0, 100%, 50%),
			hsl(20, 100%, 40%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.c3 {
	background: linear-gradient(in hsl 90deg,
			hsl(270, 100%, 50%),
			hsl(290, 100%, 40%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

@keyframes rainbow {
	0% {
		background-position: 0% center;
	}

	100% {
		background-position: 200% center;
	}
}

.cover {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

.cover::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color);
	transition: opacity 0.5s ease;
}

.cover:hover::before {
	opacity: 0;
}

.p1 {
	background: linear-gradient(in hsl 0deg,
			hsl(0, 100%, 50%),
			hsl(25, 100%, 50%),
			hsl(0, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p2 {
	background: linear-gradient(in hsl 20deg,
			hsl(40, 100%, 50%),
			hsl(50, 100%, 60%),
			hsl(40, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p3 {
	background: linear-gradient(in hsl 40deg,
			hsl(70, 100%, 50%),
			hsl(105, 100%, 40%),
			hsl(70, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p4 {
	background: linear-gradient(in hsl 60deg,
			hsl(140, 100%, 50%),
			hsl(175, 100%, 35%),
			hsl(140, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p5 {
	background: linear-gradient(in hsl 80deg,
			hsl(170, 100%, 50%),
			hsl(205, 100%, 35%),
			hsl(170, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p6 {
	background: linear-gradient(in hsl 100deg,
			hsl(200, 100%, 50%),
			hsl(235, 100%, 60%),
			hsl(200, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p7 {
	background: linear-gradient(in hsl 120deg,
			hsl(250, 100%, 50%),
			hsl(275, 100%, 70%),
			hsl(250, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p8 {
	background: linear-gradient(in hsl 140deg,
			hsl(280, 100%, 50%),
			hsl(315, 100%, 60%),
			hsl(280, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.p9 {
	background: linear-gradient(in hsl 90deg,
			hsl(0, 0%, 60%),
			hsl(0, 0%, 90%),
			hsl(0, 0%, 100%),
			hsl(0, 0%, 70%),
			hsl(0, 0%, 60%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.pt {
	background: linear-gradient(in hsl 90deg,
			hsl(120, 100%, 50%),
			hsl(190, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.pn {
	font-size: 1.4em;
}

.slogan {
	font-size: 1.4em;
	position: absolute;
	right: 5%;
	bottom: -30%;
	color: #FFFF55;
	animation: slogan1 1s infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
}

@keyframes slogan1 {
	0% {
		transform: scale(1) rotate(-15deg) translateY(0);
	}

	100% {
		transform: scale(1.08) rotate(-14deg) translateY(-5px);
	}
}

.nmpt {
	color: #aaa;
	text-shadow: 0 0 15px #aaa;
}

.cpt {
	color: var(--color);
	text-shadow: 0 0 15px var(--color);
}


.p1pt {
	background: linear-gradient(in hsl 0deg,
			hsl(0, 100%, 50%),
			hsl(25, 100%, 50%),
			hsl(0, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(0, 100%, 50%);
}

.p2pt {
	background: linear-gradient(in hsl 20deg,
			hsl(40, 100%, 50%),
			hsl(50, 100%, 60%),
			hsl(40, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(40, 100%, 50%);
}

.p3pt {
	background: linear-gradient(in hsl 40deg,
			hsl(70, 100%, 50%),
			hsl(105, 100%, 40%),
			hsl(70, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(70, 100%, 50%);
}

.p4pt {
	background: linear-gradient(in hsl 60deg,
			hsl(140, 100%, 50%),
			hsl(175, 100%, 35%),
			hsl(140, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(140, 100%, 50%);
}

.p5pt {
	background: linear-gradient(in hsl 80deg,
			hsl(170, 100%, 50%),
			hsl(205, 100%, 35%),
			hsl(170, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(170, 100%, 50%);
}

.p6pt {
	background: linear-gradient(in hsl 100deg,
			hsl(200, 100%, 50%),
			hsl(235, 100%, 60%),
			hsl(200, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(220, 100%, 50%);
}

.p7pt {
	background: linear-gradient(in hsl 120deg,
			hsl(250, 100%, 50%),
			hsl(275, 100%, 70%),
			hsl(250, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(250, 100%, 50%);
}

.p8pt {
	background: linear-gradient(in hsl 140deg,
			hsl(280, 100%, 50%),
			hsl(315, 100%, 60%),
			hsl(280, 100%, 50%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(280, 100%, 50%);
}

.p9pt {
	background: linear-gradient(in hsl 90deg,
			hsl(0, 0%, 60%),
			hsl(0, 0%, 90%),
			hsl(0, 0%, 100%),
			hsl(0, 0%, 70%),
			hsl(0, 0%, 60%));
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	text-shadow: 0 0 15px hsl(0, 0%, 80%);
}

.p1tx {
	color: hsl(0, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p2tx {
	color: hsl(40, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p3tx {
	color: hsl(70, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p4tx {
	color: hsl(140, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p5tx {
	color: hsl(170, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p6tx {
	color: hsl(200, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p7tx {
	color: hsl(250, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p8tx {
	color: hsl(280, 100%, 50%);
	text-shadow: 1px 1px 0px #444;
}

.p9tx {
	color: #EEE;
	text-shadow: 1px 1px 0px #444;
}

.c204_1 {
	background: #8934c0;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
}

.pc {
	height: 180px;
	margin: 0;
	padding: 10px;
	background: #ffffff44;
	border-radius: 10px;
	box-shadow: 0 0 20px #00000088;
	line-height: 20px;
}

.ppl {
	height: 40px;
	background-color: #f1f1f1;
	border: 3px solid var(--color);
	border-radius: 5px;
	transition: 0.75s;
}

.song-info {
	margin-bottom: 10px;
	font-size: 16px;
}

.pcc {
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.pcd {
	margin-top: 10px;
}

.pb {
	width: 25%;
	height: 30px;
	background: var(--background2);
	color: var(--color);
	border-radius: 15px;
	box-shadow: 0 0 20px #00000088;
	cursor: pointer;
}

.pb:hover {
	background-color: var(--highlight);
	transform: scale(1.1, 1.1);
}

.bs {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(58, 120, 221, 0.5);
	z-index: 114514;
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--color);
}

.tips {
	background: rgb(58, 120, 221);
	padding: 20px;
	border-radius: 10px;
	text-align: center;
	width: 500px;
}

.zhangli {
	animation: 2.4s ease-in-out alternate infinite zhangli;
}

@keyframes zhangli {
	0% {
		transform: rotate(0deg) translateX(50px) scale(1, 1)
	}

	49.9999999% {
		transform: rotate(180deg) translateX(50px) scale(-1, -1)
	}

	50% {
		transform: rotate(-180deg) translateX(50px) scale(-1, -1)
	}

	100% {
		transform: rotate(-360deg) translateX(50px) scale(1, 1)
	}
}

@keyframes size {
	0% {
		font-size: 32px;
	}

	100% {
		font-size: 24px;
	}
}

.b1 {
	background: linear-gradient(in hsl 60deg,
			hsl(260, 100%, 50%),
			hsl(300, 100%, 50%),
			hsl(260, 100%, 50%));
	background-size: 200% auto;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: rainbow 4s linear infinite;
}

.b2 {
	background: linear-gradient(in hsl 60deg,
			hsl(45, 100%, 50%),
			hsl(210, 100%, 50%),
			hsl(300, 100%, 50%),
			hsl(100, 100%, 50%));
	background-size: 200% auto;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: rainbow 12s linear infinite;
}

.st5 {
	background: linear-gradient(in hsl 60deg,
			hsl(241, 100%, 70%),
			hsl(212, 100%, 70%),
			hsl(241, 100%, 70%));
	background-size: 200% auto;
	color: transparent;
	background-clip: text;
	-webkit-background-clip: text;
	animation: rainbow 3s linear infinite;
}
.holyfoul {
	color: #B72D0E;
	text-shadow: 0 0 5px white,
		0 0 10px #B72D0E,
		0 0 20px white,
		0 0 30px #B72D0E,
		0 0 40px white,
		0 0 50px #B72D0E;
}

.foulholy {
	color: white;
	text-shadow: 0 0 5px #B72D0E,
		0 0 10px white,
		0 0 20px #B72D0E,
		0 0 30px white,
		0 0 40px #B72D0E,
		0 0 50px white;
}

.superHoly {
	color: white;
	text-shadow: 0 0 5px white,
		0 0 10px white,
		0 0 20px white,
		0 0 30px white,
		0 0 40px white,
		0 0 50px white;
}

.superFoul {
	color: #B72D0E;
	text-shadow: 0 0 5px #B72D0E,
		0 0 10px #B72D0E,
		0 0 20px #B72D0E,
		0 0 30px #B72D0E,
		0 0 40px #B72D0E,
		0 0 50px #B72D0E;
}

.holy {
	color: white;
}

.foul {
	color: #B72D0E;
}

.truth {
	color: black;
}


.sb1 {
	animation: shake 0.3s linear infinite;
	display: inline-block;
}

@keyframes shake {

	0%,
	100% {
		transform: translate(0, 0) rotate(0deg);
	}

	10% {
		transform: translate(5px, 3px) rotate(2deg);
	}

	20% {
		transform: translate(-4px, 4px) rotate(-1deg);
	}

	30% {
		transform: translate(-3px, -5px) rotate(3deg);
	}

	40% {
		transform: translate(5px, -2px) rotate(-2deg);
	}

	50% {
		transform: translate(2px, 5px) rotate(1deg);
	}

	60% {
		transform: translate(-5px, 2px) rotate(-3deg);
	}

	70% {
		transform: translate(4px, -4px) rotate(2deg);
	}

	80% {
		transform: translate(-3px, 3px) rotate(-1deg);
	}

	90% {
		transform: translate(3px, 4px) rotate(1deg);
	}
}

.card1 {
	color: #888;
}