:root {
	--background: #ffffff;
	--text-color: #000000;
	--accent-pri: rgb(66, 0, 66);
	--accent-sec: rgb(114, 11, 0);
	--accent-tri: #a57e00;
	--table-light: #ddd;
	--text-light: #444444;
	--monospace: "Atkinson Hyperlegible Mono", "IBM Plex Mono", monospace;
}

.print-hide {
	display: none;
}

.print-show {
	display: unset;
}

#hack {
	display: list-item;
}

*:not(img)[title] {
	text-decoration: none;

	&::after {
		content: " (" attr(title) ") ";
		font-size: 70%;
		baseline-shift: -2px;
		font-family: var(--sans-serif);
	}
}

@page {
	margin: 0.5in;
}

@page cover {
	margin: 0;
}

@page footer {
	margin: 0;
}


body {
	height: 100%;

	.margin {
		max-width: unset;
		padding: 0;
	}

	& pride-gradient,
	& .trans,
	& .girl {
		background: none !important;
		color: var(--text-color) !important;
	}

	& a {
		color: var(--text-color) !important;

		&[href=""]::after {
			/* TODO: Figure out the proper syntax for external links only */
			content: "[" attr(href) "]";
			font-size: 70%;
			baseline-shift: -2px;
		}
	}


	& blockquote.chicory {
		background-color: rgb(255, 195, 219);
		color: rgb(221, 0, 88)
	}

	& .pro {
		outline: 1px solid;
		padding: 0 0.5em;
	}

	& nav>details>summary>h2::before {
		content: "#";
	}

	& nav>details>ol>li>a::after {
		content: "";
	}
	


	& header {
		color: white;
		background: #212 url(assets/waves.svg) repeat-x 50em/0em center;
		background-size: 50em;
		padding: 0;
		padding-top: 30%;
		height: 11in;
		font-size: 22px;
		display: block;
		break-after: page;
		page: cover;

		


		&>h1 {
			line-height: 0.75;
			margin: 0;
		}

		&>p {
			margin: 4px 0 0;
		}

		&>data[data-type="dollcode"] {
			color: #faf;
			position: absolute;
			right: 3em;
			top: 2em;
			font-size: 16px;
			font-family: monospace;
			padding: 3px 6px;
		}

		&>.updated {
			font-weight: bold;
			color: #faf;
		}
	}

	#notes > h2 {
		break-before: page;
	}

	.notes {
		height: 100%;
		min-height: 224mm;

		background: url(/assets/img/manual/notes.svg);
		background-size: 8mm 8mm;
	}

	footer {
		margin: 0;
		padding: 3em;
		background-color: #212;
		color: white;
		font-size: 32px;
		box-sizing: border-box;
		height: 11in;
		border: none;
		page: footer;

		
		& article {
			display: grid;
			width: 264px;
			
			grid-template-rows: repeat(4, 124px);
			margin: auto;
			image-rendering: pixelated;


			& * {
				height: 93px;
				width: 264px;
			}
		}
	}

}