@import "a/260399-Busan/Busan-Hdr.css";
@import "a/260299-Documentaries/Documentaries-Hdr.css";
@import "a/251099-Japan/JapanFirstTrips-Hdr.css";
@import "a/250899-SG60/SG60-Hdr.css";
@import "a/250699-HelloWorld/HelloWorld-Hdr.css";

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

h1 {
	margin-block: 0.67em;
	font-size: 2em;
}

body {
	font-size: 100%;
	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: 1.8em;
			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)
				}

#scPosts {
	display: contents;
}

	#scPosts > h1 {
		display: block;
		box-sizing: border-box;
		font-family: monospace;
		font-size: 360%;
		font-weight: 700;
		line-height: 1.5;
		width: max-content;
		padding: 0.1em 1em;
		text-align: center;
		min-width: 32%;
		max-width: 39em;
		margin-inline: auto;
		margin-block: 1em;
		color: whitesmoke;
		text-shadow: 0.01em 0.01em lightgray;
		border-radius: 32% / 8%;
		background-color: var(--color-strong);
		box-shadow: 0.09em 0.12em darkkhaki;
	}

		#scPosts > h1 > span {
			font-size: smaller;
		}

#dvAnnouncement {
	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;
}

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

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

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

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

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

#dvPostList {
	font-size: 100%;
	box-sizing: border-box;
	max-width: 120em;
	margin-inline: auto;
	padding: 5ch 2ch 10ch 2ch;
	display: block flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 2em;
}

	#dvPostList > div.PostListItem {
		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;
		overflow-inline: hidden;
	}

article.ArticleHeader {
	display: contents;
}

	article.ArticleHeader p.time {
		white-space: pre-wrap;
	}

		article.ArticleHeader p.time:first-child {
			font: 1.6em/1.0 monospace;
			margin: 0 auto 0.5em 0;
			padding: 0.1em 0.3em;
			color: darkslategray;
		}

		article.ArticleHeader p.time > span.ongoing {
			font-weight: bold;
			font-style: oblique;
			color: green;
		}

	article.ArticleHeader p.genre {
		width: max-content;
		margin: 2.5em auto;
		font: 1.3em/1.3 monospace;
		color: gray;
	}

	article.ArticleHeader div.progress {
		font: 100% monospace;
		width: fit-content;
		min-width: 30%;
		max-width: 72%;
		margin-inline-start: 6%;
		padding: 1em;
		border: 0.2em dotted darkgray;
		border-radius: 0.5em;
		color: darkgray;
		opacity: 70%;
	}

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

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

		div#dvW > div#dvPs > p > strong {
			font-size: larger;
			font-weight: bolder;
		}

		div#dvW > div#dvPs > p > span:last-child {
			font-size: 180%;
		}

div#dvFtr {
	display: block flow-root;
	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;
								}