/*...........................................................

		variables

..........................*/

:root{
	--main: 59svw;
	--spacing: 5svw;
}

/*...........................................................

	 the whole thing

..........................*/

body{
	background-image: url("../background/01.png"), url("../background/02.png");
	background-repeat: repeat-y, repeat;
		background-position: 2svw 0, 0;
		background-size: 6svw auto, 8%;
}

h1, h2{
	text-shadow: 
		-0.05em -0.01em var(--aqua0),
		0.075em 0.06em var(--aqua2);
}

h2::before, h2::after{
	content: "";
	display: inline-block;
	width: 4.5em;
	height: 0.5em;
	background-image: url("../pixel/bone_03.png");
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
	margin: 0 0.5em;
	filter: drop-shadow(0.1em 0.1em rgba(var(--shadow-rgb),0.2));
}

/*..........................

	content spacing

..........................*/

main{
	box-sizing: border-box;
	float: right;
	width: var(--main);
	padding-right: calc(0.5 * var(--spacing));
}

p, ol, ul, h1, h2, h3{
	width: 100%;
	box-sizing: border-box;
}

b{
	font-family: "Determination Sans Web", "Determination Sans";
}

/*..........................

		removes the OTHER cute pic..

..........................*/

h1::before{
	display: none;
}

/*..........................

	NEW! CUTE PIC!!!

..........................*/

#vector{;
	position: fixed;
		top: calc(3 * var(--margin) + 1svh);
		left: calc(2 * var(--margin));
	max-width: calc(100% - var(--main) - var(--spacing));
	height: calc(97.5svh - 0.5 * var(--spacing));
	object-fit: contain;
	filter: drop-shadow(0.5svw 0.33svw rgba(var(--shadow-rgb),0.33));
}

#twinkle{
	position: fixed;
}