:root {
	--lcars-purple: oklch(75.56% 0.089 326.42);
	--lcars-blue: oklch(73.37% 0.14170034569599704 282.3377551442443);
	--lcars-red: oklch(62.85% 0.136 21.73);
	--lcars-orange: oklch(78.22% 0.172 67.55);
	--lcars-bisque: oklch(85.33% 0.113 70.42);
}

@media (prefers-color-scheme: dark) {
	body.trekTheme {
		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.trekTheme {
		background-color: var(--gen-dark);
		main {
			color: var(--gen-dark);
			article {
				border-color: var(--lcars-purple);
				background-color: var(--gen-light);
				blockquote {
					background-color: #f8f8f8;
					border-left: 4px solid #aaa;
				}
				hr {
					border-top-color: var(--gen-dark);
					color: var(--gen-dark);
					&::after {
						background-color: var(--gen-light);
					}
				}
			}
		}
	}
}

body.trekTheme {
	font-size: 1.2em;
	.top-nav {
		box-shadow: none;
		padding: 12px;
		background-color: var(--gen-dark);
		border-style: solid;
		border-color: var(--lcars-red);
		border-bottom-width: 6px;
		border-left-width: 48px;
		border-right-width: 48px;
		border-radius: 0 0 96px 96px;
		a {
			text-align: center;
			color: var(--gen-dark);
			padding: 6px 24px;
			border-radius: 9999px;
			background-color: var(--lcars-orange);
			font-family: "Antonio", sans-serif;
		}
	}
	main {
		background-color: var(--gen-dark);
		margin: 24px auto 0;
		max-width: 60rem;
		.back-link {
			border-left: 36px solid var(--lcars-blue);
			border-radius: 96px;
			color: var(--lcars-blue);
			padding: 12px;
			margin: 24px;
			display: inline-block;
			transition:
				background-color 0.2s ease-in-out,
				color 0.2s ease-in-out;
			&:hover {
				background-color: var(--lcars-blue);
				color: var(--gen-dark);
			}
		}
		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;
			font-family: "Antonio", sans-serif;
		}
		h1 {
			font-size: 2.3rem;
			margin: 24px 0;
			padding: 0 12px;
			color: var(--lcars-red);
			border-left: 48px solid var(--lcars-red);
			border-radius: 42px;
		}
		article {
			border-top-left-radius: 50px 80px;
			border-top-right-radius: 50px 80px;
			border-bottom-left-radius: 50px 80px;
			border-bottom-right-radius: 50px 80px;
			border-style: solid;
			border-left-width: 24px;
			border-right-width: 24px;
			border-top-width: 12px;
			border-bottom-width: 12px;
			padding: 24px;
			.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: 2em;
				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;
				&:nth-child(3n) {
					div {
						color: var(--lcars-blue);
						border-left-color: var(--lcars-blue);
					}
				}
				&:nth-child(3n + 1) {
					div {
						color: var(--lcars-purple);
						border-left-color: var(--lcars-purple);
					}
				}
				&:nth-child(3n + 2) {
					div {
						color: var(--lcars-orange);
						border-left-color: var(--lcars-orange);
					}
				}
			}
			a {
				text-decoration: none;
				color: unset;
				& > div {
					transition: padding 0.2s ease-in-out;
					padding: 0 12px;
					margin: 48px 0;
					border-left: 36px solid var(--lcars-red);
					border-radius: 36px 0 0 36px;
					h3 {
						display: inline-block;
						font-size: 1.3em;
					}
					.post-date {
						color: #999;
					}
				}
				&:hover {
					div {
						/* padding: 36px 0; */
						h3 {
							text-decoration: underline;
						}
					}
				}
			}
		}
	}
	footer {
		padding: 12px;
		box-shadow: none;
		background-color: var(--gen-dark);
		border-style: solid;
		border-color: var(--lcars-red);
		border-top-width: 6px;
		border-left-width: 48px;
		border-right-width: 48px;
		border-radius: 96px 96px 0 0;
	}
}

@media only screen and (max-width: 800px) {
	body.trekTheme {
		.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;
							}
						}
					}
				}
			}
		}
	}
}