@font-face {
	font-family: "Instrument Serif";
	src: url("/static/font/InstrumentSerif-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

:root {
	color-scheme: light;

	--bg-gradient: linear-gradient(#eefeff, #fff);
	--bg-fallback: #fff;
	--main: #202020;
	--muted: #666;
	--border: #ddd;
	--surface: #fafafa;
	--surface-hover: #efefef;
	--code-bg: #dadce0;
	--input-bg: #f7f7f7;
	--input-border: #ccc;
	--input-focus: #7c9fff;
	--metadata-bg: #ebecee;
	--button: #183352;
	--button-bg: #dfeaf8;
	--button-bg-hover: #d1def0;
	--button-top-shadow: rgba(255, 255, 255, 0.45);
	--button-bottom-shadow: rgba(55, 82, 122, 0.12);
	--accent: #2f80fa;
	--accent-hover: #1b74fa;
	--warning: #ff9800;

	--1d2021: var(--bg-fallback);
	--282828: var(--surface);
	--3c3836: var(--surface-hover);
	--504945: var(--border);
	--928374: var(--muted);
	--a89984: var(--main);
	--bdae93: var(--main);
	--8ec07c: #257a4d;
	--ebdbb2: var(--main);
	--fbf1c7: var(--main);
	--comment: #68737f;
	--default: var(--main);
	--html: var(--main);
	--keyword: #8b4fd1;
	--string: #0f7a4d;
	--green: #178b3f;
	--yellow: #b7791f;
	--red: #d22d3d;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;

		--bg-gradient: linear-gradient(#16181d, #101010);
		--bg-fallback: #101010;
		--main: #e7e7e7;
		--muted: #999;
		--border: #2a2a2a;
		--surface: #18181a;
		--surface-hover: #222428;
		--code-bg: #222428;
		--input-bg: #222325;
		--input-border: #444;
		--input-focus: #284186;
		--metadata-bg: #18181a;
		--button: #ececec;
		--button-bg: #242424;
		--button-bg-hover: #303030;
		--button-top-shadow: rgba(255, 255, 255, 0.1);
		--button-bottom-shadow: rgba(0, 0, 0, 0.1);

		--1d2021: var(--bg-fallback);
		--282828: var(--surface);
		--3c3836: var(--surface-hover);
		--504945: var(--border);
		--928374: var(--muted);
		--a89984: var(--main);
		--bdae93: var(--main);
		--8ec07c: #bbf7d0;
		--ebdbb2: var(--main);
		--fbf1c7: var(--main);
		--comment: #89929f;
		--default: var(--main);
		--html: var(--main);
		--keyword: #b890ff;
		--string: #8ee8b5;
		--green: #22c55e;
		--yellow: #fbbf24;
		--red: #fb7185;
	}
}

html,
body {
	background: var(--bg-fallback) var(--bg-gradient) no-repeat;
	background-attachment: fixed;
}

.home {
	background: transparent;
	background-attachment: fixed;
}

@media only screen and (max-width: 1000px) {
	.web.has-answer .left::before {
		font-family: "Instrument Serif", Georgia, serif;
		font-weight: 400;
	}
}