@layer Reset, PageGeneral, SectionGeneral, ContentSpecific;

@layer Reset {

	body {
		margin: 0;
		padding: 0;
	}

}

@layer PageGeneral {

	:root {
		font-size: 20px;

		@media (width<500px) {
			font-size: 5.0vw;
		}

		@media (2000px<width) {
			font-size: 1.0vw;
		}

		--Site_striking: #8818FF;
		--Japanese_red: #BC002D;
		--Japanese_white: #FFFFFF;
		--Japanese_sakura: #FFB6C5;
	}

	body {
		font-family: monospace;
		font-size: 1rem;
	}

	p {
		overflow-wrap: break-word;

		@container (width<25em) {
			hyphens: auto;
			hyphenate-character: '⹝';

			@container (width<12em) {
				word-break: break-all;
			}
		}
	}

	.EditingStatus {
		width: fit-content;
		padding: 0.1em 1em;
		border: 0.2em dotted gray;
		border-radius: 0.5em;
		color: gray;
		opacity: 70%;
	}
}

@layer SectionGeneral {

	#dvT {
		display: block grid;
		font-size: 100%;
		margin-block-end: 5em;
		row-gap: 3rem;
		-webkit-user-select: none;
		user-select: none;

		& * {
			-webkit-user-select: none;
			user-select: none;
		}

		&>#fgrT {
			grid-area: pct;
			margin: 0;

			@property --TransitionPercent {
				syntax: "<number>";
				inherits: true;
				initial-value: 0.5;
			}

			@property --TransitionOpacityPercent {
				syntax: "<number>";
				inherits: true;
				initial-value: 0.5;
			}

			&>img {
				display: block;
			}
		}

		&>#dvH {
			display: block flow-root;
			grid-area: txt;
			box-sizing: border-box;
			padding-inline: 2ch;
			container-type: inline-size;
		}
	}

	@media (width<=30rem) {
		#dvT {
			grid-template-areas: "pct" "txt";

			&>#fgrT {
				width: 100%;

				&>img {
					width: 100%;
					height: auto;
				}
			}
		}
	}

	@media (30rem<width<35rem) {
		#dvT {
			grid-template-areas: "pct" "txt";

			&>#fgrT {
				position: relative;
				width: 100%;
				height: 115vw;
				align-content: center;

				&::before {
					content: "";
					position: absolute;
					inset: 0;
					background-image: url('JapanFirstTrips-hero.jpg');
					background-size: cover;
					filter: opacity(var(--TransitionOpacityPercent)) blur(calc(5px*var(--TransitionPercent)));
					z-index: -1;
				}

				&>img {
					object-fit: scale-down;
					width: 30rem;
					height: 34.3rem;
					border-radius: calc(25%*var(--TransitionPercent));
					margin-inline: auto;
				}
			}
		}

	}

	@media(35rem <=width <=66rem) {
		#dvT {
			grid-template-areas: "pct" "txt";
			padding-block-start: 3rem;

			&>#fgrT {
				width: fit-content;
				height: fit-content;
				margin-inline: auto;
				align-content: center;

				&>img {
					object-fit: scale-down;
					width: 30rem;
					height: auto;
					border-radius: 25%;
				}
			}

			&>#dvH {
				width: 100%;
				max-width: 35rem;
				margin-inline: auto;
			}
		}
	}


	@media(66rem<width) {
		#dvT {
			grid-template-areas: "txt pct";
			grid-template-columns: auto max(27em, 48%);
			padding-inline: 5%;
			max-width: 80em;
			margin-inline: auto;
			column-gap: 3%;
			padding-block-start: max(3em, 8vw);
		}

		#fgrT {
			width: 100%;
			height: fit-content;
			margin-inline: auto;
			align-content: center;

			&>img {
				object-fit: scale-down;
				width: 100%;
				height: auto;
				border-radius: 25%;
			}
		}

		#dvH {
			width: 100%;
			margin-inline: auto;
			margin-block: auto;
		}
	}

	#dvH>hgroup {
		font-size: 4.0cqw;
		margin-block: auto;
		align-self: center;
	}

	#h1CollectionTitle {
		font-family: sans-serif;
		font-size: 200%;
		margin-block-start: 0;

		&>span {
			display: block;
			width: fit-content;
			margin-inline: auto;
		}

		&>span:nth-of-type(1) {
			margin-block-end: 0.1em;

			&>span:nth-of-type(1) {
				font-size: 100%;
			}

			&>span:nth-of-type(2) {
				font-size: 70%;
			}

			&>span:nth-of-type(3) {
				font-size: 150%;
			}

			&>span:nth-of-type(4) {
				font-size: 70%;
			}

			&>span:nth-of-type(5) {
				font-size: 100%;
			}
		}

		&>span:nth-of-type(2) {
			margin-block: 0.1em;

			&>span:nth-of-type(1) {
				font-size: 70%;
			}

			&>span:nth-of-type(2) {
				font-size: 180%;
				color: var(--Japanese_red);
			}

			&>span:nth-of-type(3) {
				font-size: 70%;
			}

			&>span:nth-of-type(4) {
				font-size: 80%;
			}

			&>span:nth-of-type(5) {
				font-size: 70%;
			}
		}

		&>span:nth-of-type(3) {
			font-size: 220%;
			padding: 0.1em 0.6em;
			border-radius: 0.7em;
			color: var(--Japanese_white);
			background-color: var(--Japanese_red);
		}

		& strong {
			text-shadow: 0.01em 0.02em lightgray;
		}
	}

	#pCollectionGenre {
		font-family: monospace;
		font-size: 100%;
		width: max-content;
		margin-inline: auto;
		margin-block: 2em 2em;
		color: gray;
	}

	#pCollectionAuthor {
		font-size: 120%;
		width: max-content;
		margin-inline: auto 0em;
		margin-block: 2em 1.5em;

		&>span {
			font-family: monospace;
			font-size: 80%;
		}

		&>u {
			font-family: monospace;
			font-style: italic;
			font-weight: bold;
			font-size: 150%;
			text-decoration: underline solid black;
			text-underline-offset: 0.3em;
		}
	}

	#pCollectionPeriod {
		font-family: monospace;
		font-size: 120%;
		width: max-content;
		margin-inline: auto 0em;
		margin-block: 1em 0.5em;

		&>span.ongoing {
			font-family: monospace;
			font-size: 90%;
			font-weight: bolder;
			font-style: oblique;
			color: green;
		}
	}

	#pCollectionLastUpdate {
		font-family: monospace;
		font-size: 70%;
		width: max-content;
		margin-inline: auto 0em;
		margin-block: 0;

		&>span:nth-of-type(1) {
			font-size: 80%;
		}
	}
}

@layer SectionGeneral {
	#scI {
		display: block flow-root;
		font-family: monospace;
		font-size: 120%;
		max-width: 40em;
		padding-inline: max(1ch, 5%);
		margin-inline: auto;
		margin-block: 8em 2em;
		container-type: inline-size;

		&>p {
			line-height: 2.0;
			word-spacing: 0.2em;
		}

		& *::selection {
			background-color: var(--Japanese_red);
			color: var(--Japanese_white);
		}
	}
}

@layer SectionGeneral {
	#scL {
		display: block flow-root;
		box-sizing: content-box;
		font-size: 100%;
		max-width: 72em;
		padding-inline: max(1ch, 3%);
		margin-inline: auto;
		margin-block: 2em;
		container-type: inline-size;

		& * {
			-webkit-user-select: none;
			user-select: none;
		}

		&>article {
			display: block grid;
			padding-inline: max(1ch, 3%);
			padding-block: 1em;
			margin-inline: auto;
			margin-block: 3em;
			border: 0.15em solid lightgray;
			border-radius: 0.8em;
			background-color: whitesmoke;
			box-shadow: 0.08em 0.12em lightgray;
			overflow-x: hidden;

			&>figure:first-of-type {
				grid-area: pct;
				margin-inline: auto;

				&>img {
					max-width: 100%;
					border-radius: 3%;
				}
			}

			&>hgroup {
				grid-area: txt;
				margin-block-end: 2em;
				container-type: inline-size;
			}

			&>*:last-child {
				grid-area: lnk;
			}

			@container (width<=42em) {
				max-width: 28em;
				grid-template-areas:
					"pct"
					"txt"
					"lnk";

				& h1 {
					margin-inline: auto;
				}

				&>figure:first-of-type {
					width: 90%;
					max-width: 18em;
				}
			}

			@container (42em<width) {
				grid-template-areas:
					"pct txt"
					"lnk lnk";
				grid-template-columns: max(12em, 28%) auto;
				column-gap: 3%;

				&>figure:first-of-type {
					grid-template-areas: "pct txt" "lnk lnk";
					grid-template-columns: max(12em, 28%) auto;
					column-gap: 3%;
				}
			}
		}

		&>div:last-of-type {
			margin-block: 5em 3em;
			color: gray;

			&>p:first-child {
				font-size: 250%;
				text-align: center;
			}

			&>#dvCollectionStatus {
				max-width: min(20em, 80%);
				margin-inline: auto;
				margin-block-start: 2em;

				&>p:first-of-type {
					margin-block-end: 0.3em;
					word-spacing: 0.1em;
				}

				&>p:nth-of-type(2) {
					font-size: smaller;
					line-height: 1.3;
					word-spacing: 0.1em;
					margin-inline-start: 1em;
				}
			}
		}
	}
}

@layer ContentSpecific {
	#h1TokyoEve {
		font-family: sans-serif;
		font-size: 100%;
		text-align: center;
		overflow-wrap: normal;
		margin-block-end: 2em;
		color: #303030;

		&>span:nth-of-type(1) {
			font-size: 240%;

			&>span {
				font-size: 50%;
			}
		}

		&>span:nth-of-type(2) {
			font-size: 200%;
		}

		&>strong:nth-of-type(1) {
			font-size: 270%;

			&>span:nth-of-type(3)>span {
				font-size: 80%;
			}
		}

		&>span:nth-of-type(3) {
			font-size: 100%;
		}

		&>span:nth-of-type(4) {
			font-size: 160%;
		}

		&>span:nth-of-type(5) {
			font-size: 100%;
		}

		&>strong:nth-of-type(2) {
			font-size: 360%;
		}

		@container (width<26em) {
			line-height: 1.2;

			&>span:nth-of-type(2)::after,
			&>strong:nth-of-type(1)>span:nth-of-type(4)::after,
			&>strong:nth-of-type(2)>span::after {
				content: "\00000a";
				white-space: pre-wrap;
			}

			@container (width<20em) {
				font-size: 5.0cqi;
			}
		}

		@container (26em<=width<41em) {
			line-height: 1.3;

			&>span:nth-of-type(2)::after,
			&>span:nth-of-type(3)::before {
				content: "\00000a";
				white-space: pre-wrap;
			}
		}

		@container (41em<=width) {
			&>span:nth-of-type(3)::before {
				content: "\00000a";
				white-space: pre-wrap;
			}
		}
	}

	#atcTokyoEve>hgroup>p {
		font-size: 110%;
		font-style: italic;
		width: fit-content;
		margin-inline: auto;
		line-height: 1.3;
		color: #505050;

		&>em {
			font-size: 110%;
		}
	}

	#atcTokyoEve>section.EditingStatus {
		min-width: 20%;
		margin-inline: auto;
		margin-block: 0.5em;

		&>p {
			margin-block: 0.5em;
			word-spacing: 0.1em;

			&>small {
				font-size: 60%;
				font-style: oblique;
			}
		}
	}
}

@layer SectionGeneral {

	#scN {
		display: block flow-root;
		box-sizing: content-box;
		font-size: 100%;
		max-width: 40em;
		padding-inline: max(1ch, 5%);
		margin-inline: auto;
		margin-block-start: 10em;
		color: gray;
		container-type: inline-size;

		& h1,
		& p {
			white-space-collapse: preserve-spaces;
		}

		&>h1 {
			-webkit-user-select: none;
			user-select: none;
		}

		&>article {
			margin-block: 3em;

			& *::selection {
				background-color: var(--Japanese_red);
				color: var(--Japanese_white);
			}
		}
	}
}

@layer ContentSpecific {

	#atcNoteOsu {
		&>h1 {
			font-size: 150%;
		}

		&>p {
			text-align: start;
			line-height: 2.0;
			word-spacing: 0.2em;
			margin-block: 1.3em;
		}

		& span[lang="ja"] {
			text-wrap-mode: nowrap;

			&::selection,
			*::selection {
				background-color: var(--Japanese_sakura);
				color: var(--Japanese_white);
			}
		}

		& figure {
			display: block flow-root;
			width: fit-content;
			margin-inline: auto;

			& svg {
				display: block;
				width: 100%;
				margin-inline: auto;
				-webkit-user-select: none;
				user-select: none;
			}

			&>figcaption {
				font-size: 90%;
				font-weight: lighter;
				margin-inline: auto;

				&>p {
					line-height: 1.35;
					margin-block: 0.5em;
					word-spacing: 0.1em;
				}
			}
		}

		& figure:nth-of-type(1) {

			&>div {
				display: block flex;
				flex-direction: row;
				flex-wrap: wrap;
				column-gap: 2em;
				width: fit-content;
				margin-block: 1em;
			}

			& svg {
				max-width: min(10em, 80%);
			}

			&>figcaption {
				max-width: 25em;
			}
		}

		& figure:nth-of-type(2) {

			& svg {
				max-width: min(4em, 32%);
			}

			&>figcaption {
				max-width: 15em;
			}
		}

		& figure:nth-of-type(3) {
			& svg {
				max-width: min(10em, 80%);
			}
		}
	}
}

@layer SectionGeneral {
	#dvEndBlank {
		height: min(66vh, 300vw);
	}
}

@layer SectionGeneral {
	#ftrPgFtr {
		display: block flow-root;
		font-size: 100%;
		padding: 1em 1ch;
		-webkit-user-select: none;
		user-select: none;

		&>#aStNm {
			display: block flow-root;
			font: 1.0em/1.3 monospace;
			width: max-content;
			padding: 0.5em 1.0em;
			border-width: 0.2em;
			border-style: solid;
			border-radius: 0.3em;
			border-color: lightgray;
			margin-inline: auto;
			margin-block: 1em 1.6em;
			text-decoration: none;
			text-shadow: 0.03em 0.02em darkgray;
			color: lightgray;

			&:hover,
			&:focus {
				color: var(--Site_striking);
				border-color: var(--Site_striking);
				text-shadow: 0.03em 0.02em gray;
				outline: 0.2em dashed var(--Site_striking);
				outline-offset: 0.3em;
			}

			&:active {
				border-style: inset;
				border-color: var(--Site_striking);
				background-color: var(--Site_striking);
				color: whitesmoke;
				text-shadow: 0.03em 0.02em gainsboro;
				outline: 0.1em solid var(--Site_striking);
				outline-offset: 0.3em;
			}
		}

		&>#pCprt {
			font: 0.8em/1.5 sans-serif;
			width: max-content;
			padding: 0.5em 1ch;
			margin-inline: auto;
			color: lightgray;
		}
	}
}