/*! License: CC0 */

:root {
	--background-color: #000;
	--secondary-color: #212121;
	--foreground-color: #E0E0E0;
	--title-color: #CE93D8;
	--accent-color: #EC407A;
	--error-color: #AB47BC;
}

/* Global */

html { font-size: clamp(1rem, .8rem + 1vw, 1.25rem); }

body {
	line-height: 1.5;

	background: var(--background-color);
	color: var(--foreground-color);
}

::selection {
	background: var(--foreground-color);
	color: var(--background-color);
}


/* Generic */

a {
	color: var(--accent-color);
	text-decoration: none;

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

hr {
	width: 100%;
	height: 1px;
	border: 0;

	background: linear-gradient(
		to right,
		var(--accent-color),
		var(--title-color),
		var(--accent-color)
	);
}


/* Specific */

body {
	display: flex;
	flex-direction: column;
	align-items: center;

	min-height: 100vh;

	& > header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;

		margin: 2rem;
		row-gap: 2rem;
		column-gap: 4rem;

		& > a {
			text-align: center;

			font-size: 2.2rem;
			font-weight: bolder;

			color: var(--title-color);
		}

		& > nav > menu {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-around;
			column-gap: 2.2rem;

			margin-top: 0;
			margin-bottom: 0;
			padding-left: 0;

			font-size: 1.1rem;

			& > li { display: block; }
		}
	}

	& > hr {
		margin-top: 0;
		margin-bottom: 0;
	}

	& > main {
		flex-grow: 1;

		width: 95%;
		max-width: 80ch;
	}

	& > footer {
		display: flex;
		flex-direction: column;
		align-items: center;

		margin: 1.4rem 0;
		row-gap: .6rem;

		& > p {
			margin-top: 0;
			margin-bottom: 0;
			text-align: center;

			font-size: .9rem;

			&[rel=generator] { font-style: italic; }
		}
	}
}

main.error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	color: var(--error-color);
}

main.list > menu {
	display: flex;
	flex-direction: column;
	row-gap: .5rem;

	padding-left: 0;

	& > li {
		display: flex;
		column-gap: .5rem;

		& > time {
			flex-shrink: 0;
			font-weight: lighter;
		}
		&::before { content: "→"; }
	}
}

main.page {
	display: flex;
	flex-direction: column;

	& > header {
		color: var(--title-color);

		display: flex;
		flex-direction: column;

		& > p {
			align-self: end;

			font-size: .9rem;
			font-weight: lighter;

			& > time { font-weight: bolder; }
		}
	}

	& > header:not(:has(p)) { align-self: center; }
}

:is(main.page, main.index) > content {
	text-align: justify;

	:is(h1, h2, h3, h4, h5) > sup {
		font-weight: lighter;
	}

	div.highlight > pre {
		border-radius: 25px;
		padding: 1rem;

		font-size: .9rem;

		overflow: auto;
	}

	img { max-width: 25vw; }

	math {
		padding: .4rem;
		font-size: .9rem;
		font-weight: bolder;
		background-color: var(--secondary-color);
	}

	:is(p, a):has(> img) {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		gap: .5rem;
	}

	blockquote {
		padding: .1rem 1.3rem;

		background-color: var(--secondary-color);
		font-style: italic;
	}

	table {
		width: 100%;

		border-collapse: collapse;

		th {
			font-weight: bolder;
			color: var(--title-color);
		}

		:is(th, td) {
			padding: 1rem;
			border: 1px solid var(--accent-color);
		}
	}
}