
:root {
	--color-background: #FFF8E7;
	--color-striking: #8818FF;
	--color-strong: #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: 3.125vw;
	}

	div#dvW {
		font-size: 3.125vw;
	}
}

@media (25rem <= width < 32rem) {
	body {
		font-size: 1rem;
	}

	div#dvM {
		font-size: 3.125vw;
	}

	div#dvW {
		font-size: 3.125vw;
	}
}

@media (32rem <= width < 40rem) {
	body {
		font-size: 1rem;
	}

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

	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%;
	}
}

section#scT {
	display: contents;
}

	section#scT > 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;
	}

		section#scT > div#dvT > figure {
			margin: auto;
			font-family: monospace;
			font-weight: 900;
			color: var(--color-striking);
		}

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

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

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.0em;
			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-striking);
			}

			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-striking);
				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-striking)
				}

section#scPstLst {
	display: contents;
}

	section#scPstLst > div#dvPstLst {
		font-size: 100%;
		width: 100%;
		max-width: 80em;
		margin: auto;
	}

		section#scPstLst > div#dvPstLst > div#dvPstLstHdr {
			font-size: 100%;
			box-sizing: border-box;
			min-width: 32%;
			width: min-content;
			margin: 1em auto;
			border-radius: 32% / 8%;
			padding: 0.1em 5ch;
			background-color: var(--color-strong);
			color: whitesmoke;
			box-shadow: 0.2em 0.3em darkkhaki;
		}

			section#scPstLst > div#dvPstLst > div#dvPstLstHdr > h1 {
				font: small-caps 3.6em/1.5 sans-serif;
				width: max-content;
				margin: 0 auto;
				text-shadow: 0.01em 0.01em lightgray;
			}

		section#scPstLst > div#dvPstLst > div#dvPstLstBdy {
			font-size: 100%;
			box-sizing: border-box;
			max-width: 100%;
			padding: 5ch 2ch 10ch 2ch;
			display: block flex;
			flex-flow: row wrap;
			justify-content: center;
			gap: 2em;
		}

			section#scPstLst > div#dvPstLst > div#dvPstLstBdy > article {
				display: contents;
			}

				section #scPstLst > div#dvPstLst > div#dvPstLstBdy > article > div.PstLstItm {
					display: block;
					box-sizing: border-box;
					width: max-content;
					min-width: 28em;
					max-width: 100%;
					height: fit-content;
					container-type: inline-size;
					padding: 2em 2ch;
					border: 0.1em solid lightgray;
					border-radius: 1em;
					background-color: whitesmoke;
					box-shadow: 0.1em 0.2em gainsboro;
				}

					section#scPstLst > div#dvPstLst > div#dvPstLstBdy > article > div.PstLstItm p.time:first-child {
						font: 1.6em/1.0 monospace;
						margin: 0 auto 0.5em 0;
						padding: 0.1em 0.3em;
						color: darkslategray;
					}

div#dvPstUpcoming {
	box-sizing: border-box;
	font-size: 100%;
	width: 77%;
	margin: 4em auto 1em auto;
	padding: 1em 2em;
	border: 0.4em dotted var(--color-strong);
	border-radius: 1.6em;
}

	div#dvPstUpcoming > article#atcUpcomingPosts {
		display: contents;
		font-family: monospace;
	}

		div#dvPstUpcoming > article#atcUpcomingPosts > h1 {
			font-size: 150%;
			letter-spacing: 0.2em;
			text-decoration: underline dotted 0.12em;
		}

		div#dvPstUpcoming > article#atcUpcomingPosts > p {
			line-height: 1.3;
		}

@media (width < 62rem) {
	div#dvPstUpcoming {
		max-width: 28em;
	}
}

@media (width >= 62rem) {
	div#dvPstUpcoming {
		max-width: 42em;
	}
}

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-striking);
									color: whitesmoke;
								}
