
:root {
	--color-background: #FFF8E7;
	--color-strong: #8818FF;
	--color-plain: #680880;
}

body {
	background-color: var(--color-background);
	margin: 0;
}

	body * {
		user-select: none;
	}

		body *::selection {
			background-color: purple;
			color: gainsboro;
		}

@media (width < 25rem) {
	body {
		font-size: 4vw;
	}
	div#dvM {
		font-size: 2.5vw;
	}
	div#dvW {
		font-size: 3.125vw;
	}
}

@media (25rem <= width < 32rem) {
	body {
		font-size: 1rem;
	}
	div#dvM {
		font-size: 2.5vw;
	}
	div#dvW {
		font-size: 3.125vw;
	}
}

@media (32rem <= width < 40rem) {
	body {
		font-size: 1rem;
	}
	div#dvM {
		font-size: 2.5vw;
	}
	div#dvW {
		font-size: 100%;
	}
}

@media (40rem <= width < 50rem) {
	body {
		font-size: 1rem;
	}
	div#dvM {
		font-size: 100%;
	}
	div#dvW {
		font-size: 100%;
	}
}

@media (50rem <= width < 80rem) {
	body {
		font-size: 1rem;
	}
	div#dvM {
		font-size: 100%;
	}
	div#dvW {
		font-size: 100%;
	}
}

@media (80rem <= width < 100rem) {
	body {
		font-size: 1rem;
	}
	div#dvM {
		font-size: 100%;
	}
	div#dvW {
		font-size: 100%;
	}
}

@media (100rem <= width < 125rem) {
	body {
		font-size: 1rem;
	}
	div#dvM {
		font-size: 100%;
	}
	div#dvW {
		font-size: 100%;
	}
}

@media (125rem <= width) {
	body {
		font-size: 0.8vw;
	}
	div#dvM {
		font-size: 100%;
	}
	div#dvW {
		font-size: 100%;
	}
}

div#dvT {
	container-type: inline-size;
	width: 100%;
	max-width: 100rem;
	min-height: 100vh;
	margin: auto;
	display: block grid;
	align-items: center;
	justify-items: center;
	overflow: hidden;
}

	div#dvT > figure {
		font-family: monospace;
		font-weight: 900;
		color: var(--color-strong);
	}

@media (aspect-ratio >= 9 / 16) {
	div#dvT > figure {
		writing-mode: horizontal-tb;
		font-size: 20cqw;
	}
}

@media (aspect-ratio < 9 / 16) {
	div#dvT > figure {
		writing-mode: vertical-lr;
		text-orientation: upright;
		font-size: 9cqh;
	}
}

div#dvM {
	padding: 5ch 2ch;
	margin: 10vh auto;
}

	div#dvM > hr {
		border: none;
		margin: 4.8em auto;
	}

	div#dvM > section#scIntro > div#dvIntro {
		max-width: 60em;
		margin: auto;
	}

		div#dvM > section#scIntro > div#dvIntro > p#pIntro {
			font-size: 2.5em;
			font-family: monospace;
			line-height: 1.8;
			text-align: center;
			margin: 3ch auto;
			padding: 1ch 1ch;
			color: gray;
		}

			div#dvM > section#scIntro > div#dvIntro > p#pIntro > u {
				font-size: 110%;
				color: var(--color-strong);
			}

			div#dvM > section#scIntro > div#dvIntro > p#pIntro > s {
				position: relative;
				text-decoration-line: line-through;
				text-decoration-style: solid;
				text-decoration-color: var(--color-strong);
				text-decoration-thickness: 0.1em;
			}

				div#dvM > section#scIntro > div#dvIntro > p#pIntro > s > span {
					position: absolute;
					width: max-content;
					font: 30%/1.0 sans-serif;
					top: 90%;
					left: -80%;
					color: var(--color-strong)
				}

div#dvPstLst {
	font-size: 100%;
	max-width: 60em;
	margin: auto;
}

	div#dvPstLst > div#dvPstLstHdr {
		font-size: 100%;
		width: max-content;
		border: 0.2em solid var(--color-plain);
		border-radius: 1em 1em 0 0;
		padding: 0 2ch;
		background-color: var(--color-plain);
		color: whitesmoke;
	}

		div#dvPstLst > div#dvPstLstHdr > h1 {
			font: small-caps 3.6em/1.6 sans-serif;
			margin: 0;
		}

	div#dvPstLst > div#dvPstLstBdy {
		font-size: 100%;
		border: 0.2em solid var(--color-plain);
		border-radius: 0 1em 1em 1em;
		padding: 5ch 2ch 10ch 2ch;
	}

		div#dvPstLst > div#dvPstLstBdy > p:first-of-type {
			font-size: 1.1em;
			font-style: oblique;
			text-align: center;
		}

ol#olPstLst {
	display: block flex;
	width: max-content;
	padding: 0;
	margin: auto;
}

	ol#olPstLst > li {
		display: block grid;
	}

		ol#olPstLst > li > button.pstbtn {
			font-size: 100%;
			min-width: 35em;
			max-width: 100%;
			margin: auto;
			padding: 0.75em 3em 0.75em 0.5em;
			position: relative;
			background-color: whitesmoke;
			border-width: 0.25em;
			border-color: gainsboro;
		}

			ol#olPstLst > li > button.pstbtn::after {
				content: url("data:image/svg+xml,<svg viewBox='-3 -4 4 8' xmlns='http://www.w3.org/2000/svg'><path d='M-2,-3 L0,0 L-2,+3' stroke='darkgray' stroke-width='0.7' fill='none'/></svg>");
				position: absolute;
				width: 2em;
				right: 0.5em;
				top: 50%;
				transform: translateY(-50%);
			}

			ol#olPstLst > li > button.pstbtn:hover {
				outline: 0.2em dashed var(--color-plain);
				outline-offset: 0.1em;
			}

				ol#olPstLst > li > button.pstbtn:hover::after {
					content: url("data:image/svg+xml,<svg viewBox='-3 -4 4 8' xmlns='http://www.w3.org/2000/svg'><path d='M-2,-3 L0,0 L-2,+3' stroke='purple' stroke-width='1.0' fill='none'/></svg>");
					position: absolute;
					width: 2em;
					right: 0.5em;
					top: 50%;
					transform: translateY(-50%);
				}

			ol#olPstLst > li > button.pstbtn > div.pstbtnctn {
				container-type: inline-size;
				width: 100%;
			}

div#dvA {
	font-size: 100%;
}

	div#dvA > header > div#dvAHdr {
		background-color: lightgray;
		padding: 0.2em 0.3em;
	}

		div#dvA > header > div#dvAHdr > div#dvAHdrCtt {
			display: block grid;
			grid-template-columns: max-content auto max-content;
			max-width: 90em;
			margin: 0 auto;
		}

			div#dvA > header > div#dvAHdr > div#dvAHdrCtt > button#btnARtn {
				grid-column: 1;
				font-size: 100%;
				width: 5.2em;
				height: 3.2em;
				padding: 0.4em 1.8em;
				color: gray;
				background-color: gainsboro;
				border-width: 0.2em;
				border-radius: 0.8em;
				border-color: darkgray;
			}

			div#dvA > header > div#dvAHdr > div#dvAHdrCtt > figure#fgrStNm {
				grid-column: 3;
				font: 1.5em/1.0 monospace;
				margin: 0.5em 1em;
				padding: 0;
				color: gray;
				text-shadow: 0.04em 0.03em darkgray;
				user-select: all;
				cursor: default;
			}

				div#dvA > header > div#dvAHdr > div#dvAHdrCtt > figure#fgrStNm::selection {
					background-color: var(--color-strong);
					color: whitesmoke;
				}

div#dvW {
	display: block grid;
	max-width: 80em;
	min-height: 100vh;
	margin: 5vh auto;
	align-items: center;
}

	div#dvW > div#dvPs > p {
		font: 1.8em/1.35 monospace;
		text-align: center;
		color: darkgray;
		opacity: 0.42;
	}

div#dvFtr {
	font-size: 100%;
	padding-top: 1em;
	background-color: lightgray;
}

	div#dvFtr > div#dvFtrCtt {
		max-width: 90em;
		margin: 0 auto;
	}

		div#dvFtr > div#dvFtrCtt > hr {
			border: none;
			margin: 0.5em 0;
		}

		div#dvFtr > div#dvFtrCtt > div#dvFtrRw1 {
			display: grid;
			grid-template-columns: auto max-content;
		}

			div#dvFtr > div#dvFtrCtt > div#dvFtrRw1 > div {
				grid-column: 2;
			}

				div#dvFtr > div#dvFtrCtt > div#dvFtrRw1 > div > p#pCprt {
					font: 80%/1.5 sans-serif;
					padding: 0 2ch;
					margin-right: 2ch;
					color: gray;
				}

		div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 {
			display: grid;
			grid-template-columns: max-content auto;
		}

			div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div {
				grid-column: 1;
			}

				div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div > address#adrEml {
					font-size: 120%;
					line-height: 1.8;
					padding: 0 1ch;
					margin-left: 2ch;
					color: gray;
				}

					div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div > address#adrEml > p {
						font-size: 100%;
						margin: auto;
					}

					div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div > address#adrEml > dl {
						display: block grid;
						grid-template-columns: max-content max-content;
						width: min-content;
						margin: auto;
					}

						div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div > address#adrEml > dl > dt {
							margin-left: 0.3em;
							padding: 0.1em 0.1em;
						}

						div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div > address#adrEml > dl > dd {
							font-weight: bold;
							margin-left: 0.5em;
							padding: 0.1em 0.1em;
						}

							div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div > address#adrEml > dl > dd > a#aEml {
								font-family: monospace;
								font-style: normal;
								color: gray;
							}

								div#dvFtr > div#dvFtrCtt > div#dvFtrRw2 > div > address#adrEml > dl > dd > a#aEml:hover {
									background-color: var(--color-strong);
									color: whitesmoke;
								}
