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

body {
	font-size: 1rem;
	background-color: var(--color-background);
	margin: 0;
}

	body * {
		user-select: none;
	}

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

@media (width < 12.5rem) {
	body > article {
		font-size: 8vw;
		overflow-wrap: anywhere;
		word-break: break-all;
	}
	body > footer {
		font-size: 4vw;
	}
}

@media (12.5rem <= width < 25rem) {
	body > article {
		word-break: break-word;
		hyphens: auto;
		hyphenate-character: "\2E5D";
	}
	body > footer {
		font-size: 4vw;
	}
}

@media (25rem <= width < 36rem) {
	body > article {
		word-break: break-word;
		hyphens: auto;
		hyphenate-character: "\2E5D";
	}
}

@media (36rem <= width < 100rem) {
	body > article {
		word-break: break-word;
	}
}

@media (100rem <= width < 125rem) {
	body > article {
		font-size: 1vw;
	}
}

@media (125rem <= width) {
	body > article {
		font-size: 1vw;
	}
	body > footer {
		font-size: 0.8vw;
	}
}

div#dvAtcHello {
	max-width: 80em;
	padding: 0;
	margin: 0 auto 38vh auto;
}

	div#dvAtcHello > figure.banner {
		font-size: 4200%;
		max-width: 2ch;
		margin: auto;
		height: 1.3em;
		max-height: 50cqw;
		overflow: hidden;
		padding: 0;
	}

		div#dvAtcHello > figure.banner > div {
			font: 1em/1.0 emoji;
			width: fit-content;
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			user-select: none;
		}

	div#dvAtcHello > div[lang="en-VJX"] {
		font-family: "Consolas", monospace;
		max-width: 78ch;
		padding: 2em 2ch 1.3em 2ch;
		margin: auto;
	}

		div#dvAtcHello > div[lang="en-VJX"] * {
			user-select: text;
		}

		div#dvAtcHello > div[lang="en-VJX"] p {
			white-space: pre-wrap;
		}

		div#dvAtcHello > div[lang="en-VJX"] > hr {
			width: max-content;
			margin: 2.8em auto 2.3em auto;
			border: none;
		}

			div#dvAtcHello > div[lang="en-VJX"] > hr::after {
				content: "⎯⎯";
			}

		div#dvAtcHello > div[lang="en-VJX"] > hgroup {
			margin: auto auto 4.8em auto;
		}

			div#dvAtcHello > div[lang="en-VJX"] > hgroup > h1 {
				font-size: 4.2em;
				font-weight: 900;
				line-height: 1.35;
				margin: auto auto 0.4em auto;
				padding-left: 0.8ch;
				text-indent: -0.5ch;
			}

			div#dvAtcHello > div[lang="en-VJX"] > hgroup > p.subtitle {
				font-size: 2.1em;
				font-weight: bold;
				line-height: 1.35;
				margin: 0.6em auto 1.0em auto;
				padding-left: 3ch;
				text-indent: -0.5ch;
			}

				div#dvAtcHello > div[lang="en-VJX"] > hgroup > p.subtitle > strong {
					font-size: 1.3em;
				}

			div#dvAtcHello > div[lang="en-VJX"] > hgroup > p.author {
				font-size: 1.2em;
				font-style: italic;
				width: fit-content;
				max-width: 100%;
				margin: 1.6em 0.2em 1.6em auto;
			}

				div#dvAtcHello > div[lang="en-VJX"] > hgroup > p.author > u {
					font: 1.6em monospace;
					word-break: keep-all;
				}

			div#dvAtcHello > div[lang="en-VJX"] > hgroup > p.date {
				font: 1.6em monospace;
				width: fit-content;
				max-width: 100%;
				margin: 1.5em 0.2em 1.6em auto;
			}

		div#dvAtcHello > div[lang="en-VJX"] > aside.hint {
			font-size: 0.9em;
			max-width: 40em;
			padding: 0.3em 2em;
			margin: auto;
			border: 0.1em solid lightgray;
			border-radius: 0.8em;
			color: gray;
		}

		div#dvAtcHello > div[lang="en-VJX"] > p {
			font-size: 1.35em;
			line-height: 1.35;
		}

			div#dvAtcHello > div[lang="en-VJX"] > p:first-of-type {
				margin-top: 8em;
			}

		div#dvAtcHello > div[lang="en-VJX"] > figure.poem {
			padding: 0 3ch;
			max-width: 54ch;
			margin: auto;
		}

			div#dvAtcHello > div[lang="en-VJX"] > figure.poem > p {
				font-size: 1.35em;
				line-height: 1.35;
				margin: 0.6em auto 0.6em auto;
				padding: 0 0.3ch;
				text-indent: -0.3ch;
			}

				div#dvAtcHello > div[lang="en-VJX"] > figure.poem > p.l1 {
					margin-left: 1ch;
				}

				div#dvAtcHello > div[lang="en-VJX"] > figure.poem > p.l2 {
					margin-left: 2ch;
				}

				div#dvAtcHello > div[lang="en-VJX"] > figure.poem > p.l3 {
					margin-left: 3ch;
				}

			div#dvAtcHello > div[lang="en-VJX"] > figure.poem > hr {
				margin: 1.5em auto;
				border: none;
			}

			div#dvAtcHello > div[lang="en-VJX"] > figure.poem em {
				font-size: 115%;
				font-style: normal;
			}

		div#dvAtcHello > div[lang="en-VJX"] > figure.ending {
			font-size: 300%;
			font-family: emoji;
			text-align: center;
			margin: 2.8em auto 1em auto;
			padding: 0;
			user-select: none;
		}

		body > footer > div {
			padding: 1em 0;
		}

				body > footer > div > a#aStNm {
					font: 1.0em/1.3 monospace;
					display: block;
					width: max-content;
					padding: 0.5em 1.0em;
					border: 0.1em solid;
					border-radius: 0.3em;
					margin: 1em auto 1.8em auto;
					text-decoration: none;
					text-shadow: 0.03em 0.02em darkgray;
					color: lightgray;
				}

					body > footer > div > a#aStNm:hover, body > footer > div > a#aStNm:focus {
						color: var(--color-striking);
						outline: 0.15em solid var(--color-striking);
					}

					body > footer > div > a#aStNm:active {
						background-color: var(--color-striking);
						color: whitesmoke;
						text-shadow: 0.03em 0.02em gainsboro;
						outline: 0.2em solid var(--color-striking);
					}

			body > footer > div > p#pNnPmnt {
				font: 0.5em/1.3 sans-serif;
				width: max-content;
				padding: 0.5em 2ch;
				margin: auto;
				color: lightgray;
			}

			body > footer > div > p#pCprt {
				font: 0.8em/1.5 sans-serif;
				width: max-content;
				padding: 0.5em 2ch;
				margin: auto;
				color: lightgray;
			}