:root, [force-animation="true"] {
	--enable-animation: 1;
}

[force-animation="false"] {
	--enable-animation: 0;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--enable-animation: 0;
	}
}

* {
	box-sizing: border-box;
	scrollbar-color: var(--col-fg) transparent;

	@media (pointer: fine) {
		scrollbar-width: thin;
	}
}

body:has(#__nuxt, #__next) {
	padding: 0;
}

body:not(:has(#__nuxt, #__next)), #__nuxt, #__next {
	min-width: 17.5rem;
	margin: auto;
	word-wrap: break-word;
	padding: 0 1rem;

	> :is(header, footer) {
		display: grid;
		grid-template-columns: auto min(var(--body-width, 100%), 100%) auto;
		position: relative;
		margin: 0 -1rem;
		padding: 1rem;
		background: var(--col-bg3);

		> * {
			grid-column: 2 / 4;
			max-width: min(var(--body-width, 100%));
		}
	}

	&:not(:has(header)) {
		padding-top: 1rem;
	}

	&:not(:has(footer)) {
		padding-bottom: 1rem;
	}

	> header {
		margin-bottom: 1rem;
	}

	> *:not(header, footer) {
		max-width: var(--body-width);
		margin: auto;
		width: 100%;
	}

	> footer {
		margin-top: 5rem;
	}
}

figure,
video,
canvas,
iframe {
	display: block;
	max-width: 100%;
	margin-inline-start: 0;
	margin-inline-end: 0;
}

img,
svg {
	max-width: 100%;
	height: auto;
	vertical-align: text-bottom;
}

nav ul {
	list-style: none;
	padding-inline-start: 0;
}