:root {
	--wars-blue: rgb(95, 210, 232);
	/* --wars-yellow: rgb(242, 187, 66); */
	--wars-yellow: oklch(84.12% 0.1927 83.27);
	--wars-black: rgb(2, 2, 2);
}

/* @media (prefers-color-scheme: dark) {
	body.warsTheme {
		background-color: var(--gen-dark);
		main {
			color: var(--gen-light);
			article {
				border-color: var(--lcars-purple);
				background-color: var(--gen-dark);
				blockquote {
					background-color: #333;
					border-left: 4px solid #888;
				}
				hr {
					border-top-color: var(--gen-light);
					color: var(--gen-light);
					&::after {
						background-color: var(--gen-dark);
					}
				}
			}
		}
	}
} */

/* @media (prefers-color-scheme: light) { */
body.warsTheme {
	font-family: sans-serif;
	background-color: var(--wars-black);
	main {
		color: var(--wars-yellow);
		article {
			blockquote {
				border-left: 4px solid var(--wars-yellow);
			}
			hr {
				border-top-color: var(--gen-dark);
				color: var(--gen-dark);
				&::after {
					background-color: var(--gen-light);
				}
			}
		}
	}
}
/* } */

body.warsTheme {
	font-size: 1.2em;
	perspective: 400px;
	/* https://projects.verou.me/css3patterns/#starry-night */
	background-color: var(--wars-black);
	background-image: radial-gradient(
			white,
			rgba(255, 255, 255, 0.2) 2px,
			transparent 4px
		),
		radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 3px),
		radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 4px),
		radial-gradient(
			rgba(255, 255, 255, 0.4),
			rgba(255, 255, 255, 0.1) 2px,
			transparent 3px
		);
	background-size:
		550px 550px,
		350px 350px,
		250px 250px,
		150px 150px;
	background-position:
		0 0,
		40px 60px,
		130px 270px,
		70px 100px;
	.top-nav {
		box-shadow: none;
		padding: 12px;
		background: var(--wars-black);
		a {
			color: var(--wars-blue);
		}
		z-index: 100;
	}
	main {
		padding: 10px;
		margin: -100px auto 0;
		font-size: 1.2em;
		/* max-width: 60rem; */
		max-width: 900px;
		transform-origin: 50% 100%;
		padding-top: 50vh;
		transform: rotateX(9deg) translateZ(0);
		/* max-height: 30vh; */
		overflow: scroll;
		.back-link {
			color: var(--wars-blue);
			padding: 12px;
			margin: 24px;
			display: inline-block;
			transition:
				background-color 0.2s ease-in-out,
				color 0.2s ease-in-out;
			&:hover {
			}
		}
		hr {
			overflow: visible;
			margin: 48px 24px 24px;
			opacity: 0.3;
			padding: 0;
			border: none;
			border-top: 1px solid var(--gen-dark);
			text-align: center;
			&::after {
				content: "⬙";
				display: inline-block;
				position: relative;
				top: -0.65em;
				font-size: 1.5em;
				padding: 0 0.25em;
			}
		}
		h1,
		h3,
		h4 {
			font-weight: 700;
			text-transform: uppercase;
		}
		h1 {
			font-size: 2.3em;
			margin-bottom: 1.5em;
			text-align: center;
		}
		article {
			text-align: justify;
			text-justify: inter-word;
			/* .yt-embed {
				left: 0;
				width: 100%;
				height: 0;
				position: relative;
				padding-bottom: 75%;
				margin: 24px 0;
				border-radius: 8px;
				overflow: hidden;
			} */
			&.post p {
				/* &:not(:has(> img))::before {
					content: "⟣";
					opacity: 0.3;
					display: inline-block;
					margin-right: 6px;
				} */
				&:has(> img) {
					text-align: center;
				}
				img {
					max-height: 400px;
					max-width: 100%;
					border-radius: 2px;
				}
			}
			blockquote {
				margin: 24px 0 12px;
				border-radius: 4px;
				padding: 6px 18px;
				font-style: italic;
				p,
				& + p {
					&::before,
					&::after {
						display: none !important;
					}
					font-style: italic;
				}
			}
			p {
				line-height: 1.8;
				letter-spacing: 0.09em;
				font-weight: 400;
				& + p {
					margin-top: 36px;
				}
				a {
					color: var(--gen-link);
					&:hover {
						text-decoration: underline;
					}
				}
			}
			&.post {
				ul {
					line-height: 1.7em;
					font-weight: 400;
					margin: 12px 48px 36px;
					li {
						margin: 6px 0;
						list-style-type: circle;
					}
				}
			}
			ul {
				li {
					list-style-type: none;
				}
			}
			h4 {
				margin-top: -24px;
				margin-bottom: 12px;
				font-size: 1.1em;
				a {
					text-decoration: none;
					color: var(--gen-link);
					&:hover {
						text-decoration: underline;
					}
				}
			}
		}
		.contents {
			li {
				list-style-type: none;
			}
			a {
				text-decoration: none;
				color: unset;
				& > div {
					margin: 100px 0;
					h3 {
						display: inline-block;
						font-size: 1.5em;
					}
					.post-date {
						margin-bottom: 5px;
						color: var(--wars-blue);
					}
				}
				&:hover {
					div {
						h3 {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
	footer {
		background: var(--wars-black);
		z-index: 100;
	}
}
/* 
@media only screen and (max-width: 800px) {
	body.warsTheme {
		.top-nav,
		footer {
			border-left-width: 24px;
			border-right-width: 24px;
		}
		.top-nav {
			gap: 6px;
			a {
				font-size: 1em;
			}
		}
		main {
			margin: 12px 0;
			border: none;
			border-radius: 12px;
			padding: 12px 0;
			.back-link {
				margin-left: 12px;
				border-left-width: 24px;
			}
			article {
				padding: 12px;
				border-radius: 12px;
			}
			h1 {
				margin: 0 12px 12px;
				font-size: 1.6em;
				border-left-width: 24px;
				border-radius: 18px;
			}
			.contents {
				padding: 0 12px;
				li {
					a {
						div {
							border-left-width: 24px;
							border-radius: 24px;
							h3 {
								font-size: 1.3em;
							}
						}
					}
				}
			}
		}
	}
} */