@import url(/styles/core.css);
@import url(/styles/themes/tiles/white/dotgrid24.css);
@import url(/styles/utility-classes.css);

:root {
	font-size: 10px;
	--page_light: beige;
	--green: yellowgreen;
	--img-bd: 0.156vw double var(--page_light);
}


body {
	margin: 0;
	background-color: var(--green);
	background-attachment: fixed;
	overflow-x: hidden;
	font-family: var(--font-sans-serif);
}


.them {
	img {
		width: 38vw;
		pointer-events: none;

		position: absolute;
		top: -11.979vw;
		left: -5vw;
		z-index: 6;
	}
}

.white-bar {
	position: fixed;
	z-index: -99;
	top: 0;
	bottom: 0;

	width: 9.375vw;
	background-color: var(--page_light);
	border-right: 0.26vw dashed var(--green);
	outline: 0.6vw solid var(--page_light);

}

.main-wrapper {

	/* position: relative; */
	/* display: flex; */
	&>* {
		position: absolute;
	}
}

.flexbox-1 {
	left: 20vw;
	top: 2.083vw;
	display: flex;

	&>* {
		flex-shrink: 0;
		height: fit-content;
		color: var(--page_light);
	}

	.heading-1 {
		h1 {
			display: inline-block;
			font-weight: normal;
			line-height: 1;
			font-size: 3.2vw;
			margin: 0;
			background-color: var(--green);

		}
	}

	.boy-list {
		display: flex;
		font-size: 1.5vw;

		.title {
			height: fit-content;
			background-color: var(--green);
		}

		.img {
			--sz: 5.208vw;
			width: var(--sz);
			height: var(--sz);
			display: flex;
			position: relative;

			img {
				max-width: 100%;
			}

			&::after {
				content: '';
				background-color: var(--green);
				position: absolute;
				bottom: 0;
				left: 1rem;
				line-height: 1;
			}

			&:nth-of-type(1)::after {
				content: '1';
				background-color: rgb(230, 206, 26);
			}

			&:nth-of-type(2)::after {
				content: '2';
				background-color: silver;
			}

			&:nth-of-type(3)::after {
				content: '3';
				background-color: chocolate;
			}

			&:nth-of-type(4)::after {
				content: '4';
				background-color: limegreen;
			}

			&:nth-of-type(5) {
				filter: grayscale(1);
				transform: scaleY(-1);

				&::after {
					content: 'deceased';
					font-size: 0.9vw;
					filter: grayscale(0);
					transform: scaleY(-1);
					bottom: 2.083vw;
				}
			}
		}
	}
}

.hr-clr {
	z-index: -99;
	left: 0;
	right: 0;

	&.hr-1 {
		top: 8.854vw;
	}

	&.hr-2 {
		top: 60vw;
	}
}

.hr-clr,
.style,
.fic img {
	background-color: var(--page_light);
	border: 0.26vw dashed var(--green);
}

.box {
	color: var(--green);
	outline: 0.6vw solid var(--page_light);
	font-size: 0.938vw;
	/* 18px / 1.8rem */
	font-family: var(--font-sans-serif-mono);
	padding: 0.521vw 1.042vw;

	p {
		text-align: justify;
		line-height: 1.4;
		margin: 0;

		&::first-letter {
			font-size: 125%;
		}

		&::first-line {
			font-weight: bold;
		}
	}

	.capt {
		display: inline-block;
		font-weight: bold;
		font-size: 110%;
		text-transform: uppercase;

		&::first-letter {
			font-size: 1.146vw;
			font-size: 125%;
		}
	}
}

.box-1 {
	top: 11.458vw;
	left: 20.75vw;
	width: 40vw;
	position: relative;
	z-index: 5;
}

.shouma-line {
	--gap: 0.4vw;
	top: 12.5vw;
	left: 20.25vw;
	width: 48vw;
	margin-right: -4vw;

	text-transform: uppercase;
	color: var(--page_light);
	font-size: 1.5vw;
	line-height: 1;

	position: relative;
	z-index: -100;

	display: flex;
	gap: var(--gap);
	overflow-x: hidden;

	.train {
		animation: marquee-h 10s linear infinite;
		display: flex;
		gap: var(--gap);

		@media (prefers-reduced-motion: reduce) {
			animation-play-state: paused;
		}
	}

	span {
		background-color: var(--green);
	}
}

@keyframes marquee-h {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(calc(-100% - var(--gap)));
	}
}

/* https://codepen.io/hexagoncircle/pen/eYMrGwW */


.shouma-profile {
	top: 12.76vw;
	left: 26.5vw;
	display: flex;
	position: relative;
	z-index: 5;

	font-family: var(--font-sans-serif-mono);
	line-height: 1;
	font-size: 1.2vw;
	font-style: italic;
	color: var(--page_light);

	.details {
		ul {
			font-weight: bold;
			text-transform: uppercase;
			list-style-type: none;
			padding-left: 0;

			li {
				padding-left: 1.5em;

				&::first-letter {
					font-size: 125%;
				}

				&:not(.name)>span {
					background-color: var(--green);
				}
			}

			li.name {
				padding-left: 0;
				letter-spacing: -0.15em;
				font-size: 3.5vw;
				line-height: 0.8;
				font-weight: normal;

				&>span {
					display: block;
					position: relative;

					&::first-letter {
						font-size: 125%;
					}

					&::after {
						content: '';
						position: absolute;
						background-color: var(--green);
						width: 90%;
						height: 2rem;
						bottom: 0;
						left: 0;
						z-index: -11;
					}
				}
			}
		}

		.charm-desc {
			position: relative;
			text-transform: unset;

			.box {
				position: absolute;
				z-index: 5;
				width: 30vw;
				top: 2.865vw;
			}

			.title {
				font-size: 125%;
				position: relative;
				bottom: -0.521vw;
				z-index: -11;
				display: block;
				font-weight: bold;

				&::after {
					content: '';
					position: absolute;
					background-color: var(--green);
					width: 90%;
					height: 40%;
					bottom: 0;
					left: 0;
					z-index: -11;
				}
			}
		}
	}

	.id-picture {
		position: relative;
		font-weight: bold;
		text-transform: uppercase;

		img {
			border: var(--img-bd);
			width: 100%;
		}

		.front {
			width: 14vw;
			position: relative;

			&::after {
				content: 'Front:';
				position: absolute;
				left: 0;
				bottom: 0em;
				font-size: 1.1em;
			}
		}

		.side {
			width: 8vw;
			position: absolute;
			right: -3vw;
			bottom: 0;

			&::after {
				content: 'Side:';
				position: absolute;
				left: 0;
				bottom: 0.1em;
				font-size: 0.8em;
			}
		}
	}
}

.shouma-gallery {
	left: 26.5vw;
	top: 49vw;
	z-index: 4;
	color: var(--page_light);
	text-transform: lowercase;

	.title {
		font-size: 2.2vw;
		margin-left: 2vw;
		background-color: var(--green);
		line-height: 1;
	}

	.img {
		margin-top: 0.521vw;
		margin-left: -0.521vw;

		img {
			height: 12.5vw;
		}
	}
}

.fic-0 {
	right: 3vw;
	top: 10.417vw;
	text-align: right;
	width: 26vw;
	font-family: var(--font-sans-serif-mono);

	.fic-title {
		color: var(--page_light);

		margin: 0;
		line-height: 1;
		position: relative;
		display: inline-block;

		text-transform: uppercase;
		font-style: italic;
		font-size: 3.5vw;
		font-weight: normal;
		letter-spacing: -0.15em;

		&::first-letter {
			font-size: 125%;
		}

		&::after {
			content: '';
			position: absolute;
			background-color: var(--green);
			width: 90%;
			height: 0.5em;
			bottom: 0;
			left: 0;
			z-index: -11;
		}
	}

	p {
		margin: 0;

		color: var(--page_light);
		font-size: 0.9vw;

		&>span {
			background-color: var(--green);
		}
	}
}

.fic {
	color: var(--page_light);

	img {}

	.box {
		position: relative;

		.title {
			font-size: 1.5vw;
			display: block;
		}

		p {
			font-style: italic;

			&::first-letter {
				font-size: inherit;
			}

			&::first-line {
				font-weight: unset;
			}

			&::before,
			&::after {
				content: '"';
				font-weight: bold;
			}
		}

		.read-more {
			font-weight: bold;
			font-style: italic;
			text-decoration: none;
			color: var(--green);

			&:hover {
				text-decoration: underline;
				color: blue;
			}
		}
	}

	.tags {
		display: block;
		position: absolute;
		background-color: var(--green);

		font-size: 1.1vw;
	}
}

.fic-1 {
	position: absolute;
	top: 21.875vw;
	right: 6vw;

	width: 36vw;

	img {
		position: relative;
		z-index: 6;
	}

	.the-glob {
		width: 12vw;
		float: left;
		margin: 0 0.75vw 0.75vw 0;
	}

	.what-hamster {
		height: 8.854vw;
		width: 9vw;
		position: absolute;
		right: -4vw;
		bottom: -7.292vw;
	}

	.box {
		z-index: 5;
		margin-top: 4.167vw;
		margin-left: 5vw;
	}

	.tags {
		left: 4.5vw;
		bottom: -2.083vw;
	}
}

.music-video {
	position: absolute;
	right: 1.25vw;
	top: 48vw;
	width: 15.625vw;
	height: 7.813vw;
}

.comic-1 {
	position: absolute;
	right: 27vw;
	top: 41vw;

	
	a {
		filter: grayscale(100%) contrast(200%);
		display: block;
		text-decoration: none;
		color: var(--page_light);
		font-weight: bold;
		font-style: italic;
		font-size: 1vw;
		&:hover {
			outline: var(--img-bd);
			outline-width: 1px;
		}
	}

	.p1 {
		background-image: url(/assets/creations/art/shougamu-comic-1_1.webp);
		background-size: 120%;
		background-position: -2rem  -1.5rem;
		width: 13.417vw;
		height: 10.813vw;
		position: relative;
		z-index: 6;
		&::after {
			content: 'next ⟶';
			position: absolute;
			bottom: 0;
			right: 12%;
		}
	}

	.p2 {
		position: absolute;
		right: -40%;
		bottom: -4%;
		z-index: 7;
		background-image: url(/assets/creations/art/shougamu-comic-1_2.webp);
		background-size: 120%;
		background-position: -0.7rem 0;
		width: calc((10.813vw / 2) * 1.24);
		height: calc(10.813vw / 2);
		&::after {
			content: 'very mild gore';
			line-height: 1;
			display: block;
			text-align: center;
		}
	}
}

.wip {
	position: absolute;
	right: -60vw;
	bottom: -37vw;
	color: var(--page_light);

	margin: 0;
	line-height: 1;
	position: relative;
	display: inline-block;

	font-style: italic;
	font-size: 3.5vw;
	font-weight: normal;

	&::after {
		content: '';
		position: absolute;
		background-color: var(--green);
		width: 90%;
		height: 0.5em;
		bottom: 0;
		left: 0;
		z-index: -11;
	}

	.small {
		font-size: 30%;
	}
}

footer.date {
	position: absolute;
	bottom: -15.365vw;
	right: 0;

	color: var(--page_light);
	background-color: var(--green);
	font-size: 0.8vw;
}