:root { background-color: #EBF6F7; /* Aijiro */ }

#h {
	text-align: right;
	color: #012F33;
}

body { font-size: 2.5rem; }

a { color: #331925; }
a:hover { color: #DD0000; }
.reflink a:hover{ font-weight: bold; }

#one, #end, #copy {
	color: #012F33;
	text-align: center;
}

#copy {
	display: grid;
	grid-template-columns: 1fr min(50ic, calc(76% - 1%)) 1fr;
	z-index: -1;
}
#copy div {
	grid-column: 2;
	text-align: justify;
}

/* we must calc our random vars to force a unit value from a raw number */
#overlay {
	width: calc(var(--b) * 10px);
	height: calc(var(--a) * 1vh);
	left: calc(var(--c) * 1vw);
	top: calc(var(--d) * 1px);
	background-color: #778DBA;
	z-index: 2;
}
#overlay a, #overlay2 a {
	width: 100%;
	padding: 0 1vw 0 1vw;
}

#overlay2 {
	width: calc(var(--b) * 1vw);
	height: calc(var(--a) * 5px);
	top: calc(var(--d) * 1vh);
	left: calc(var(--d) * 1vw);
	background-color: #77BA79;
	z-index: 3;
}

#overlay3 {
	width: calc(var(--a) * 5px);
	height: calc(var(--b) * 10px);
	top: calc(var(--c) * 1px);
	left: calc(var(--d) * 1px);
	background-color: #BB7796;
	z-index: 1;
}

#overlay4 {
	width: 256px;
	top: calc(var(--z) * 6px);
	left: 33vw;
}

/* catch-all bits */
#overlay, #overlay2, #overlay3, #overlay4 {
	display: flex;
	position: fixed;
	overflow: hidden;
	place-items: center;
	text-align: center;
	word-wrap: break-word;
	box-shadow: 1vw 1vh 0 0;
	border: 0.2rem solid;
}

#links {
	display: flex;
	padding: 1vh 0 10vh 0;
	justify-content: center;
	align-items: center;

}
#links a { color: #0E484D; }

#pm {
	display: grid;
	#grid-template-columns: fit-content(10px);
	grid-gap: 10px;
	width: 800px;
	font-size: 1rem;
	box-shadow: 1vw 1vh 0 0;
	padding: 10px;
	border: 0.2rem solid;
	background-color: #F7EBF2;
	z-index: 69;
}
#pm > div {
	padding: 10px;
	text-align: center;
	background-color: #549CA2;
}

#p12 { grid-column: 3 / 5; }