p {
	line-height: 1.5;
	text-align: justify;
}

main > p {
	text-indent: 2em;
}

p * {
	/* apparently spans inherit the indent? */
	text-indent: initial;
}

*.jp::before {
	content: "「";
}
*.jp::after {
	content: "」";
}

li {
	margin-block: 2px;
}

h4 {
	margin-block: 0.5em;
}

#touhou,
#limpipi,
#ilikekoishi,
#wriggle,
#kyouko,
#parsee {
	/* filter: grayscale() sepia(2) hue-rotate(35deg) drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.1)) !important; */
	margin-inline: 0.28em;
}

.olive {
	color: darkolivegreen;
}

.yelling {
	font-size: 1.25rem;
}

.imnoth3iswear {
	font-size: 1.5em;
	line-height: normal;
	font-weight: bold;
}

#welcome {
	margin-bottom: 2em;
}

#characters {
	line-height: 3;
}

#koishi {
	margin-inline: 0;
}

#koishi::before,
#koishi::after {
	width: 1em;
	height: 1em;
}

#touhou {
	display: inline-grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	place-items: center;
	height: 1em;
}
#touhou > span {
	letter-spacing: -0.66px;
	grid-column: 1;
	grid-row: 1;
	z-index: 1;
	color: white;
	text-shadow: 0 0 2px black, 0 0 2px black, 0 0 2px black, 0 0 1px black;
	font-family: "Courier New", monospace;
	font-weight: bold;
}
#touhou::after {
	content: "東方";
	transform: skewX(-11deg) translateY(2px);
	grid-column: 1;
	grid-row: 1;
	font-size: 200%;
	height: 100%;

	font-weight: bold;
	color: #f40017;
	text-shadow: 0 0 2px white, 0 0 2px white, 0 0 1px white, 0 0 1px white;
}

/* --- */

#limpipi {
	position: relative;

	display: inline-grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: 1fr 1fr;
	column-gap: 1px;

	vertical-align: middle;
	font-family: "Impact";
	text-transform: uppercase;
	font-size-adjust: 0.8;
	transform: translateY(-1px);

	font-size: 16px;

	filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.66));
}

#limpipi > span {
	color: #ffd635;
	text-shadow: 0 0 2px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
	line-height: 17px;

	grid-column: 2;
}
#limpipi > span:nth-child(1) {
	grid-row: 1;
}
#limpipi > span:nth-child(2) {
	grid-row: 2;
	/* 'limbus' width / 'company' width (impact)  */
	font-size: 78.67%;
}

@property --hour-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}
@property --minute-angle {
	syntax: "<angle>";
	initial-value: 0deg;
	inherits: false;
}

@keyframes dante-spin-minute {
	25% {
		--minute-angle: 1440deg;
	}
	100% {
		--minute-angle: 1440deg;
	}
}

@keyframes dante-spin-hour {
	25% {
		--hour-angle: 1080deg;
	}
	100% {
		--hour-angle: 1080deg;
	}
}

#limpipi::after {
	content: "";
	width: 32px;
	height: 32px;
	border-radius: 50%;

	grid-column: 1;
	grid-row: 1 / span 2;

	filter: drop-shadow(0 0 2px rgba(41, 40, 38, 0.66));

	animation: dante-spin-minute 5s 5s ease-in-out infinite alternate,
		dante-spin-hour 5s 5s ease-in-out infinite alternate;

	background: radial-gradient(
			circle,
			transparent 0%,
			transparent 59%,
			#ab2925 60%,
			#ab2925 70%,
			black 70%,
			#ab2925 100%
		),
		conic-gradient(
			from var(--minute-angle),
			#faec1c 0deg,
			#faec1c 5deg,
			transparent 8deg,
			transparent 352deg,
			#faec1c 355deg,
			#faec1c 360deg
		),
		conic-gradient(
			from var(--hour-angle),
			transparent 0deg,
			transparent 275deg,
			#faec1c 277deg,
			#faec1c 287deg,
			transparent 289deg
		),
		radial-gradient(circle at 34% 24%, #ab2925 0%, #ab2925 3%, transparent 4%),
		radial-gradient(circle at 24% 34%, #ab2925 0%, #ab2925 3%, transparent 4%),
		radial-gradient(
			circle,
			#221608 0%,
			#221608 1%,
			#faec1c 2%,
			#faec1c 5%,
			#221608 6%,
			#221608 13%,
			#faec1c 14%,
			#faec1c 18%,
			#221608 19%,
			#221608 51%,
			#ab2925 52%,
			#ab2925 53%,
			#2f0606 58%,
			#ab2925 61%,
			#ab2925 100%
		);
}

#ilikekoishi {
	display: inline-grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	place-items: center;
}

#ilikekoishi-koishi {
	grid-row: 1;
	grid-column: 1;

	color: #f0d26d;

	text-shadow: 0 0 1px black, 0 0 2px black, 0 0 3px black;

	font-size: 1.25em;
	font-weight: bold;
	z-index: 1;
}

#heart {
	translate: 0 4px;

	grid-row: 1;
	grid-column: 1;

	position: relative;
	width: 37.6px; /*94* 0.4 */
	height: 37.6px; /* 94 *0.4*/
	display: inline-block;

	animation: heart-shake 2s ease-in-out infinite alternate;

	color: #8b46cb;

	filter: drop-shadow(0 0 0.33px rgba(0, 255, 0, 0.33));
}

#heart::before,
#heart::after {
	box-sizing: border-box;
	content: "";
	position: absolute;
	top: 0;
	width: 20px;
	height: 32px;
	border: 2px solid currentColor;
	border-radius: 20px 20px 2px 2px;
}

#heart::before {
	left: 20px;
	transform: rotate(-45deg);
	transform-origin: 0 100%;
	clip-path: polygon(0px 0px, 100% 0px, 100% 37.55%, 0px 105%);

	animation: heart-left 1.2s ease-in-out infinite alternate, heart-border 3s 1s ease-in-out infinite alternate;
}

#heart::after {
	left: 0;
	transform: rotate(45deg);
	transform-origin: 100% 100%;
	clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 37.55%);

	animation: heart-right 1s ease-in-out infinite alternate, heart-border 3s 1s ease-in-out infinite alternate;
}

#heart > #heart-loop {
	position: absolute;
	inset: 0;
	width: 10px;
	height: 10px;
	border: 2px solid currentColor;
	border-radius: 50%;
	border-top-right-radius: 0;
	transform: scaleY(0.8) translate(calc(18.8px + 1.132px - 50%), calc(50% - 1.132px)) rotate(-45deg);

	animation: heart-loop 0.8s ease-in-out infinite alternate;
}

#heart > #eye {
	position: absolute;
	right: 0;
	top: 0;

	width: 16px;
	height: 16px;
	border-radius: 50%;

	background: radial-gradient(circle, #8b46cb 0%, #8b46cb 50%, #3c1065 100%);

	transform: translateX(-50%);

	animation: eye-wobble-2 5s ease-in-out infinite alternate-reverse,
		eye-wobble 1.3s ease-in-out infinite alternate-reverse, eye-move 10s ease-in-out infinite alternate-reverse,
		eye-curious 16.7s ease-in-out infinite alternate-reverse;
	animation-composition: add;

	z-index: 1;
}

#heart > #eye::before,
#heart > #eye::after {
	content: "";

	position: absolute;
	inset: 0;
	z-index: 1;
}

#heart > #eye::before {
	background: radial-gradient(circle, white 0%, white 50%, grey 100%);

	border-radius: 50%;

	transform: scaleY(0.5);

	animation: eye-blink 13s cubic-bezier(0.56, 0.06, 0.5, 1.4) infinite;
}

#heart > #eye::after {
	background-color: black;
	border-radius: 50%;

	width: 4px;
	height: 4px;
	margin: auto;

	animation: iris-clip 13s cubic-bezier(0.56, 0.06, 0.5, 1.4) infinite,
		iris-focus 13s cubic-bezier(0.56, 0.06, 0.5, 1.4) infinite;
}

@keyframes iris-clip {
	0%,
	2.77% {
		clip-path: inset(0 0 0 0);
	}
	3.08% {
		clip-path: inset(50% 0 50% 0);
	}
	4.62% {
		clip-path: inset(50% 0 50% 0);
	}
	10.46% {
		clip-path: inset(0 0 0 0);
	}
	100% {
		clip-path: inset(0 0 0 0);
	}
}

@keyframes iris-focus {
	0% {
		transform: scale(1.2);
	}
	2.77% {
		transform: scale(1.33);
	}
	3.08% {
		transform: scale(0.5);
	}
	4.62% {
		transform: scale(1.5);
	}
	9.23% {
		transform: scale(1.5);
	}
	100% {
		transform: scale(1.2);
	}
}

@keyframes eye-blink {
	0% {
		transform: scaleY(0.5);
	}
	2.31% {
		transform: scaleY(0.66);
	}
	3.08% {
		transform: scaleY(0);
	}
	4.62% {
		transform: scaleY(0);
	}
	11.54% {
		transform: scaleY(0.5);
	}
	100% {
		transform: scaleY(0.5);
	}
}

@keyframes eye-wobble {
	from {
		transform: translateY(-5px);
	}
	to {
		transform: translateY(2px);
	}
}

@keyframes eye-wobble-2 {
	0%,
	20% {
		transform: translateY(-5px);
	}
	50% {
		transform: translateY(-5px);
	}
	75%,
	100% {
		transform: translateY(17px) translateX(-17%);
	}
}

@keyframes eye-curious {
	0%,
	17.96% {
		/*0-3s*/
		transform: rotate(0deg);
	}
	20.96% {
		/*3.5s*/
		transform: rotate(-30deg);
	}
	25.15% {
		/*4.2s*/
		transform: rotate(-30deg);
	}
	28.14% {
		/*4.7s*/
		transform: rotate(30deg);
	}
	40.12% {
		/*6.7s*/
		transform: rotate(30deg);
	}
	43.11%,
	100% {
		/*7.2s-16.7s*/
		transform: rotate(0deg);
	}
}

@keyframes eye-move {
	0% {
		transform: translateX(-100%);
	}
	41.67% {
		/*5s/12s* 100 */
		transform: translateX(-100%);
	}
	50% {
		/* 6s/12s *100*/
		transform: translateX(100%);
	}
	91.67% {
		/*11s/12s* 100 */
		transform: translateX(100%);
	}
	100% {
		transform: translateX(-100%);
	}
}

@keyframes heart-shake {
	from {
		transform: rotate(-5deg);
	}
	to {
		transform: rotate(5deg);
	}
}

@keyframes heart-right {
	from {
		transform: rotate(40deg);
	}
	to {
		transform: rotate(47deg);
	}
}

@keyframes heart-left {
	from {
		transform: rotate(-40deg);
	}
	to {
		transform: rotate(-47deg);
	}
}

@keyframes heart-border {
	0% {
		border-bottom-left-radius: 2px;
		border-bottom-right-radius: 2px;
	}
	50% {
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}
	100% {
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
	}
}

@keyframes heart-loop {
	from {
		width: 12px;
	}
	to {
		width: 9px;
	}
}

#wriggle {
	/* display: inline causes children to wrap incorrectly on chrome */
	display: inline-block;

	font-size: 1.25em;

	font-family: Impact;

	background: linear-gradient(to bottom, white 0%, #70b4ac 15%, #2d6670 35%, white 50%, white 85%, #a54b57 85%);
	-webkit-text-stroke: 0.7px rgba(14, 63, 45, 0.8);
	position: relative;
	background-clip: text;
	color: transparent;
	font-weight: bold;
}

#wriggle::before,
#wriggle::after {
	box-sizing: border-box;
	content: "";
	position: absolute;
	top: 0;
	width: 20px;
	height: 32px;
	border: 2px solid #744754;
	border-radius: 20px 20px 0 0;

	transform: translateY(-75%);

	animation-composition: add;
}

#wriggle::before {
	left: 0;
	clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 0px 10%);
	animation: wriggle-left-bob 2.1s ease-in-out infinite alternate-reverse, wriggle-wiggle 8s 1s ease-in-out infinite;

	transform-origin: bottom right;
	border-top-left-radius: 2px;
}
#wriggle::after {
	right: 0;
	clip-path: polygon(0px 0px, 100% 0px, 100% 10%, 0px 100%);
	animation: wriggle-right-bob 1.9s -0.5s ease-in-out infinite alternate-reverse,
		wriggle-wiggle 10s ease-in-out infinite;

	transform-origin: bottom left;
	border-top-right-radius: 2px;
}

@keyframes wriggle-left-bob {
	from {
		border-top-left-radius: 0px;
		transform: rotate(-30deg);
	}
	to {
		border-top-left-radius: 6px;
		transform: rotate(-5deg);
	}
}
@keyframes wriggle-right-bob {
	from {
		border-top-right-radius: 0px;
		transform: rotate(30deg);
	}
	to {
		border-top-right-radius: 6px;
		transform: rotate(5deg);
	}
}

@keyframes wriggle-wiggle {
	0% {
		transform: rotate(0deg);
	}
	1% {
		transform: rotate(15deg);
	}
	2% {
		transform: rotate(-15deg);
	}
	3% {
		transform: rotate(10deg);
	}
	4% {
		transform: rotate(-10deg);
	}
	10% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(0deg);
	}
}

#wriggle > #cape {
	position: absolute;
	inset: 0;
	background-color: #be4158;
	aspect-ratio: 4/3;

	border-radius: 2px;
	filter: url("#wriggle-cape-displacement");

	transform: perspective(30px) translate3d(0, -10px, -15px) rotateX(30deg);

	z-index: -1;

	/* fixes ::after being larger visually */
	contain: strict;

	opacity: 0.5;
	transition: opacity ease-in-out 0.2s;
}

#wriggle:hover > #cape {
	opacity: 1;
}

#wriggle > #cape::after {
	content: "";

	filter: url("#wriggle-cape-color");
	position: absolute;
	inset: 0;
}

#kyouko {
	display: inline-block;

	position: relative;

	font-size: 1.25em;

	font-family: Impact;

	background: linear-gradient(to bottom, #15bba2 5%, #047f83 35%, transparent 50%),
		conic-gradient(
			at center -4px,
			transparent 0deg,
			transparent 160deg,
			#15161d 160deg,
			#15161d 165deg,
			#d3b5b6 169deg,
			#d3b5b6 190deg,
			#a46675 192deg,
			#a46675 194deg,
			transparent 194deg
		),
		#c89495;

	-webkit-text-stroke: 0.5px #453538;

	background-clip: text;
	color: transparent;
	font-weight: bold;
}

#kyouko:hover::before,
#kyouko:hover::after {
	animation: kyouko-hat 0.5s ease-out forwards;
	animation-composition: add;
	pointer-events: all;
}

@keyframes kyouko-hat {
	to {
		transform: translate(-7px, -7px) rotate(-6deg);
	}
}

#kyouko::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: #aa8b65;

	box-shadow: inset 0 0 6px 1px rgba(100, 76, 47, 0.5);

	background-image: repeating-conic-gradient(
			from 0deg at top left,
			transparent 0deg,
			transparent 5deg,
			#a58762 5deg,
			#a58762 7deg
		),
		radial-gradient(circle at top left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 7%, transparent 8%);

	width: 66%;

	aspect-ratio: 1;

	border-radius: 6px;

	transform: rotate(6deg) scaleX(1.5) translateY(-2px) rotate(45deg);

	mask-image: linear-gradient(to bottom right, black 50%, transparent 50%),
		radial-gradient(ellipse 218% 218% at 200% 200%, black 100%, transparent 100%);
	mask-composite: subtract;

	/* fixes subpixel outline in chrome */
	clip-path: polygon(0 0, 125% 0, 0 125%);

	z-index: 2;
}

#kyouko::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background-color: #7c5834;

	background-blend-mode: lighten;

	width: 66%;

	aspect-ratio: 1;

	border-radius: 6px;

	transform: rotate(6deg) scaleX(1.5) translateY(-2px) rotate(45deg);

	mask-image: radial-gradient(ellipse 310% 310% at 260% 260%, black 100%, transparent 100%),
		radial-gradient(ellipse 286% 286% at -151% -145%, black 100%, transparent 100%);
	mask-composite: intersect;

	z-index: -1;
}

#kyouko::before,
#kyouko::after {
	pointer-events: none;
}

#kyouko > #ears {
	position: absolute;
	inset: 0;
	transform: translateY(10%);

	filter: drop-shadow(0 0 0.2px black) drop-shadow(0 0 0.2px black) drop-shadow(0 0 0.2px black);

	z-index: -1;
}

#kyouko > #ears::before,
#kyouko > #ears::after {
	content: "";

	position: absolute;
	inset: 0;
	height: 24px;
	width: 24px;
	margin: auto;

	background-color: #80312c;

	animation-composition: add;
}

#kyouko > #ears::before {
	transform-origin: top right;
	transform: translateX(-133%) rotate(0deg);

	border-top-right-radius: 13px;

	background-image: radial-gradient(circle at top left, #8b423c 0%, #8b423c 40%, transparent 50%);

	clip-path: polygon(
		49% 11%,
		73% 7%,
		89% 8%,
		92% 25%,
		89% 47%,
		62.13% 74.88%,
		19.13% 95%,
		2.88% 99.13%,
		6% 82%,
		20% 39%
	);

	animation: kyouko-ears 2.1s -200ms ease-in-out infinite alternate-reverse,
		wriggle-wiggle 9s 5.25s ease-in-out infinite;
}
#kyouko > #ears::after {
	transform-origin: top left;
	transform: translateX(133%) rotate(0deg);

	border-top-left-radius: 13px;

	background-image: radial-gradient(circle at top right, #8b423c 0%, #8b423c 40%, transparent 50%);

	clip-path: polygon(51% 11%, 27% 7%, 11% 8%, 8% 25%, 11% 47%, 41% 78%, 84% 95%, 94% 96%, 94% 82%, 80% 39%);

	animation: kyouko-ears 1.9s ease-in-out infinite alternate, wriggle-wiggle 11s 5s ease-in-out infinite;
}

@keyframes kyouko-ears {
	from {
		transform: rotate(-2deg);
	}
	to {
		transform: rotate(3deg);
	}
}

#kyouko:hover > #shouting {
	opacity: 1;
}

#kyouko > #shouting {
	position: absolute;
	left: 0;
	top: 0;
	width: 16px;
	height: 16px;

	/* filter: drop-shadow(0 0 1px black); */

	/* background-image: linear-gradient(
			to right,
			black 0%,
			transparent 2%,
			transparent 20%,
			black 22%,
			#f0fff0 24%,
			#f0fff0 40%,
			black 41%,
			transparent 44%,
			transparent 59%,
			black 60%,
			#f0fff0 62%,
			#f0fff0 79%,
			black 81%,
			transparent 83%,
			transparent 98%,
			black 100%
		),
		linear-gradient(to bottom, black 0%, black 0.5%, transparent 1%),
		linear-gradient(to bottom, transparent 0%, transparent 22%, black 25%),
		linear-gradient(
			to right,
			white 0%,
			white 20%,
			transparent 20%,
			transparent 40%,
			white 40%,
			white 60%,
			transparent 60%,
			transparent 80%,
			white 80%,
			white 100%
		); */

	animation: ohayou 1s steps(2) infinite;

	transform: translate(6px, -7px);

	animation-composition: add;

	transition: opacity 0s 34ms;
	opacity: 0;
}

#kyouko > #shouting::before {
	content: "";
	position: absolute;
	inset: 0;

	width: 32px;

	transform: rotate(3deg) translateY(-5px) perspective(10px) translate(-40%, -100%) rotate3d(-1, 0.85, 0, 42deg)
		rotate(-36deg);

	background-color: #aa8b65;

	mask-image: linear-gradient(to right, black 0%, black 16%, transparent 16%, transparent 80%, black 80%, black 100%);

	clip-path: inset(0 0% 45% 0);
}

#kyouko > #shouting::after {
	content: "おはよー\Aございます";
	writing-mode: vertical-rl;
	overflow: visible;
	white-space: pre;
	position: absolute;
	inset: 0;
	color: black;
	font-size: 12px;
	font-synthesis: weight;
	font-weight: bolder;

	color: whitesmoke;
	transform: translate(-170%, -425%) rotate(-36deg);
	text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
}

@keyframes ohayou {
	from {
		transform: rotate(-5deg);
	}
	to {
		transform: rotate(5deg);
	}
}

#parsee {
	position: relative;
	display: inline-block;
}

#parsee > #parsee-word {
	background-clip: text;
	background-image:
		/* repeating-linear-gradient(225deg, #562c86 0%, #562c86 1%, transparent 2%, transparent 6%), */ repeating-linear-gradient(
			45deg,
			white 0%,
			white 1%,
			transparent 2%,
			transparent 6%
		),
		repeating-linear-gradient(135deg, white 0%, white 1%, transparent 2%, transparent 6%),
		linear-gradient(184deg, #fde456 0%, #fde456 10%, #b779ff 66%, #562c86 90%);
	color: transparent;
	/* color: #fde456; */
	/* color: #5b149e; */
	/* text-shadow: 0 0 2px #c5690f,0 0 2px #c5690f,0 0 2px #c5690f,0 0 2px #c5690f; */
	/* -webkit-text-stroke: 0.2px white; */
	-webkit-text-stroke: 0.66px #5c3712;

	filter: drop-shadow(0 0 0.5px #c5690f) drop-shadow(0 0 0.3px rgba(0, 0, 0, 0.7));

	font-size: 1.25em;
	font-weight: bold;

	letter-spacing: 0.5px;

	text-transform: uppercase;
}

.parsee-flower,
.parsee-eye {
	/* position: absolute; */
	/* display: inline-block; they're flex children now */
	aspect-ratio: 1;

	/* ! */
	contain: content;
}

#flowers {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 16px;

	display: inline-flex;
	justify-content: space-evenly;

	/* transform: translateY(10px); */
	z-index: -1;
}

.parsee-flower {
	height: 100%;

	color: #f658c8;
	/* background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50,50 L65,75 L50,100 L35,75 Z' transform='rotate(0, 50, 50)' fill='white' stroke='%23f658c8'/%3E%3Cpath d='M50,50 L65,75 L50,100 L35,75 Z' transform='rotate(72, 50, 50)' fill='white' stroke='%23f658c8'/%3E%3Cpath d='M50,50 L65,75 L50,100 L35,75 Z' transform='rotate(144, 50, 50)' fill='white' stroke='%23f658c8'/%3E%3Cpath d='M50,50 L65,75 L50,100 L35,75 Z' transform='rotate(216, 50, 50)' fill='white' stroke='%23f658c8'/%3E%3Cpath d='M50,50 L65,75 L50,100 L35,75 Z' transform='rotate(288, 50, 50)' fill='white' stroke='%23f658c8'/%3E%3C/svg%3E"); */
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E@keyframes morphPetal{0%{d:path('M50,50 L50,50 L50,50 L50,50 Z');opacity:1}20%,60%{d:path('M50,50 L65,75 L50,100 L35,75 Z');opacity:1}80%{d:path('M50,50 L80,100 L50,130 L20,100 Z');opacity:0}100%{d:path('M50,50 L95,125 L50,160 L5,125 Z');opacity:0}}path{animation:morphPetal 5s infinite;fill:white;stroke:%23f658c8}path:nth-child(2){animation-delay:0.1s}path:nth-child(3){animation-delay:0.15s}path:nth-child(4){animation-delay:0.2s}path:nth-child(5){animation-delay:0.25s}%3C/style%3E%3Cpath d='M50,50 L50,50 L50,50 L50,50 Z' transform='rotate(0, 50, 50)'/%3E%3Cpath d='M50,50 L50,50 L50,50 L50,50 Z' transform='rotate(72, 50, 50)'/%3E%3Cpath d='M50,50 L50,50 L50,50 L50,50 Z' transform='rotate(144, 50, 50)'/%3E%3Cpath d='M50,50 L50,50 L50,50 L50,50 Z' transform='rotate(216, 50, 50)'/%3E%3Cpath d='M50,50 L50,50 L50,50 L50,50 Z' transform='rotate(288, 50, 50)'/%3E%3C/svg%3E");
	filter: drop-shadow(0 0 2px #f658c8);

	transition-behavior: allow-discrete;

	opacity: 0.9;
}

.parsee-flower::after {
	content: "";
	position: absolute;
	inset: 0;

	background-image: radial-gradient(white 0%, white 33%, currentColor 55%, transparent 70.7%);

	animation: parsee-flower-flash 5s ease-out infinite;
	animation-delay: inherit;
}

.parsee-flower:nth-child(1) {
	animation: flower-pos-1 10s infinite steps(1);
}
.parsee-flower:nth-child(2) {
	animation: flower-pos-2 10s infinite steps(1);
	animation-delay: 200ms;
}
.parsee-flower:nth-child(3) {
	animation: flower-pos-3 10s infinite steps(1);
	animation-delay: 400ms;
}
.parsee-flower:nth-child(4) {
	animation: flower-pos-4 10s infinite steps(1);
	animation-delay: 600ms;
}

@keyframes parsee-flower-flash {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	10%,
	100% {
		transform: scale(0.66);
		opacity: 0;
	}
}

@keyframes flower-pos-1 {
	0% {
		transform: translateY(-40%) rotate(245deg);
	}
	50% {
		transform: translateY(50%) rotate(315deg);
	}
}
@keyframes flower-pos-2 {
	0% {
		transform: translateY(60%) rotate(315deg);
	}
	50% {
		transform: translateY(-40%) rotate(123deg);
	}
}
@keyframes flower-pos-3 {
	0% {
		transform: translateY(-30%) rotate(123deg);
	}
	50% {
		transform: translateY(40%) rotate(94deg);
	}
}

@keyframes flower-pos-4 {
	0% {
		transform: translateY(50%) rotate(94deg);
	}
	50% {
		transform: translateY(-40%) rotate(245deg);
	}
}

.parsee-eye {
	position: absolute;
	height: 125%;
	background-image: radial-gradient(white 0%, white 10%, #d9ffd1 30%, #4aff26 55%, #4aff26 55%, transparent 70.7%);

	top: 0;

	animation-composition: add;

	/* animating opacity doesn't work without this?? */
	opacity: 0;

	z-index: -1;
}

/* animation order matters here becase of transition order */
.parsee-eye:nth-child(2n) {
	left: 0;
	animation: parsee-eye-left-fly 6s 200ms ease-in infinite, parsee-eye-appear 6s ease-in-out infinite;
}

.parsee-eye:nth-child(2n + 1) {
	right: 0;
	animation: parsee-eye-right-fly 6s ease-in infinite, parsee-eye-appear 6s ease-in-out infinite;
}

@keyframes parsee-eye-appear {
	0%,
	50% {
		opacity: 0;
		transform: scale(0);
	}
	66% {
		opacity: 0.8;
		transform: scale(1);
	}
	90% {
		opacity: 0.8;
		transform: scale(1);
	}
	100% {
		transform: scale(0.9);
		opacity: 0;
	}
}

@keyframes parsee-eye-left-fly {
	0%,
	70% {
		transform: translate(-50%, -50%);
	}
	100% {
		transform: translate(250%, 50%);
	}
}

@keyframes parsee-eye-right-fly {
	0%,
	70% {
		transform: translate(50%, -50%);
	}
	100% {
		transform: translate(-250%, 50%);
	}
}

footer {
	font-size: 75%;

	padding-block-end: 1em;
	&::before {
		margin-block-end: 1em;
	}
}

footer::before {
	content: "";
	display: block;
	width: 100%;
	height: 1px;

	background-image: linear-gradient(
		to right,
		transparent 0%,
		/* mfw firefox STILL doesn't support currentColor here */ rgb(from darkgreen r g b / 0.33) 40%,
		rgb(from darkgreen r g b / 0.33) 60%,
		transparent 100%
	);
}

#ilikeorange {
	text-shadow: 1px 1px 1px rgba(127, 0, 0, 0.33);
	font-weight: bold;
	color: #ff6347;
}

a.footnote {
	vertical-align: super;
	font-size: 66%;
	margin-inline: 2px;
	color: hsl(300, 100%, 33%);
}

.hunter {
	color: black;
}

.x {
	color: coral;
}

.osu {
	color: #f863a6;
	-webkit-text-stroke-color: white;
	text-shadow: 0 0 0.5px #5a032a;
	-webkit-text-stroke-width: 0.33px;
	font-weight: bold;
}