@media (prefers-color-scheme: dark) {
	main article,
	body,
	header svg {
		color: var(--secondary-light-300);
	}
	main article {
		border-color: var(--secondary-300);
		background-color: var(--secondary-200);
		& #default {
			box-shadow: inset 0 0 0 2px var(--secondary-500);
			background-color: var(--secondary-300);
		}
		& s,
		u {
			text-decoration-color: color-mix(in lch, red, var(--secondary-500) 20%);
		}
		& code:not(pre *) {
			color: var(--secondary-400);
			background-color: var(--secondary-light-400);
		}
		& pre {
			background-color: var(--secondary-100);
			&:hover {
				border-color: var(--secondary);
				background-color: var(--secondary-400);
			}
		}
		& pre,
		code {
			border-color: var(--secondary-400);
		}
		& .post-warning {
			background-color: var(--secondary);
			color: var(--secondary-100);
			&::before,
			&::after {
				background-color: var(--secondary);
			}
		}
		& .addendum {
			background-color: var(--secondary-400);
			border-color: var(--secondary);
		}
			& ul li::before {
		background-color: var(--secondary-light-300);
	}
	}
	#posts {
		& p:not(:last-child) {
			color: var(--secondary-light-700);
		}
	}
	body {
		background-color: var(--secondary-100);
		& a,
		button {
			color: var(--secondary-light-400);
			border-color: var(--secondary-600);
			background-color: color-mix(in lch, var(--secondary-300), transparent);
			&:is(:hover, :focus) {
				color: var(--secondary-light-500);
				border-color: currentColor;
				background-color: var(--secondary-500);
			}
		}
		& span a {
			color: inherit;
		}
		& #default,
		#floating {
			background-color: var(--secondary-100);
			border-color: var(--secondary);
			& section {
				border-color: var(--secondary);
				background-color: var(--secondary-300);
				color: var(--secondary-light-300);
				& a[aria-current] {
					color: var(--secondary-500);
					border-color: var(--secondary-light-500);
					background-color: var(--secondary-light-500);
				}
			}
			&::after {
				background-image: linear-gradient(
					to bottom,
					var(--secondary-600) 0%,
					transparent 30vw
				);
			}
		}
		&::after,
		& #default::before {
			background-color: var(--secondary);
		}
	}
	#interests {
		& a:is(:hover, :focus):not(.header-anchor) {
			box-shadow: 0 0 0 1px currentColor;
			background-color: var(--secondary-500);
		}
		& details h3 {
			border-color: var(--secondary-600);
		}
	}
	a:has(img[src*="/assets/img/button"]) {
		background-color: unset;
	}
}