:root {
	color-scheme: light dark;
	--link-accent: light-dark(lightseagreen, plum);
	--visited-link-accent: color-mix(in oklab, var(--link-accent), black 15%);
	--mark-accent: light-dark(aquamarine, orchid);
	--block-fill: rgba(75%, 75%, 75%, 0.2);
	--block-outline: rgba(50%, 50%, 50%, 0.5);
}

:link {
	color: var(--link-accent);
}

:visited {
	color: var(--visited-link-accent);
}

mark {
	background-color: var(--mark-accent);
}

body {
	margin: 1em auto;
	width: min(90%, 75em);
	overflow-wrap: break-word;
	font-size: 1.1em;
	font-family: sans-serif;
	background-color: light-dark(#f0f0f0, #101010);
}

main {
	@media (min-width: 60em) {
		display: grid;
		grid-template-columns: min(25%, 20em) minmax(0, auto);
		column-gap: 1em;
		> .sidebar {
			height: fit-content;
			max-height: 100dvh;
			position: sticky;
			top: 0;
		}
	}
}

hr {
	margin: 0.5em 0;
	border: none;
	outline: none;
	width: 100%;
	border-bottom: 1px dashed light-dark(black, white);
}

ul:not(:has(> li)) {
	padding: 0;
}

li {
	margin-top: 0.5em;
}

.col {
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	text-align: center;
}

.buttons {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	gap: 1px;
	a {
		z-index: 1;
		img {
			display: block;
			transition: scale 0.5s ease-out;
		}
		&:hover {
			z-index: 10;
			img {
				scale: 2;
			}
		}
	}
}

article {
	background-color: var(--block-fill);
	padding: 0.5em;
	margin: 0.5em;
	> * {
		margin-top: 0;
	}
	> footer {
		display: flex;
		justify-content: space-around;
		width: 100%;
	}
}

pre:has(code) {
	background-color: var(--block-fill);
	overflow-x: auto;
	border: 0.5em;
	padding: 0.5em;
}

.subtext {
	opacity: 60%;
}

.spoiler {
	background-color: grey;
	color: transparent;
	&:hover {
		color: inherit;
		background-color: inherit;
	}
}

p > img, video {
	width: 100%;
	max-width: 100%;
	max-height: 100%;
}

details {
	margin-left: 1em;
	> summary {
		margin-left: -1em;
		p {
			display: inline flow;
			margin: 0 0 0 0;
		}
	}
}

.admonition {
	background-color: hsla(var(--tint), 50%, 50%, 40%);
	border-left: 4px solid hsla(var(--tint), 50%, 50%, 100%);
	padding-left: 4px;

	/* different types of admonition*/
	&.caution {
		--tint: 0;
	}
	&.important {
		--tint: 270;
	}
	&.tip {
		--tint: 119;
	}
	&.warning {
		--tint: 55;
	}
	&.note {
		--tint: 205;
	}
}

table {
	border-collapse: collapse;
	overflow: hidden;
}

th,
td {
	border: 1px solid var(--block-outline);
	padding: 0.25em;
}

.flush-right {
	margin-left: auto;
	margin-right: 0;
	text-align: right;
	float: right;
}

.align-self-end {
	align-self: end;
}

hr:only-child {
	display: none;
}

blockquote {
	margin-left: 0;
	margin-right: 0;
	> :not(pre) {
		margin-left: 1em;
	}
	border-left: 0.5em solid var(--link-accent);
}

.overflow-auto {
	overflow: auto;
}

.site-icon {
	max-width: 100%;
}

img {
	image-rendering: pixelated;
}