@font-face {
	font-family: "Source Code Pro";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/typeface/source_code_pro_400.ttf) format("truetype");
}

@font-face {
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url(/typeface/source_code_pro_600.ttf) format("truetype");
}

:root {
	--bg-primary-color: #263238;
	--bg-primary-color-alpha: #26323840;
	--fg-primary: #dbdbdb;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg-color: #212121;
		--bg-color-alpha: #21212140;
		--bg-highlight-color: #424242;
		--fg-color: #dbdbdb;
		--fg-secondary-color: #616161;
		--fg-link-color: #03a9f4;
	}
}

@media (prefers-color-scheme: light) {
	:root {
		--bg-color: #fafafa;
		--bg-color-alpha: #fafafa40;
		--bg-highlight-color: #e0e0e0;
		--fg-color: #212121;
		--fg-secondary-color: #9e9e9e;
		--fg-link-color: ##0288d1;
	}
}

html {
	background-color: var(--bg-color);
	font-family: "Source Code Pro", monospace;

	padding: 0;
	margin: 0;
}

body {
	padding: 0;
	margin: 0;
}

main {
	max-width: 1000px;
	margin: 5rem auto;
	padding: 0 1rem;
}

h1, h2 {
	color: var(--fg-color);
	margin-top: 2rem;
    text-decoration: none;
	color: var(--fg-color);
	font-weight: 500;
}

h1 > a, h2 > a {
    text-decoration: none;
	color: var(--fg-color);
	font-weight: 500;
}

h1 > a::before, h2 > a::before {
	content: "#";
	padding-right: 0.5em;
	color: var(--fg-secondary-color);
	opacity: 0;
	transition: opacity 0.1s;
}

h1 > a:hover::before, h2 > a:hover::before {
	opacity: 1;
}

a {
	color: var(--fg-link-color);
	text-decoration: none;
}

p > a:before {
	content: "[";
}

p > a:after {
	content: "]";
}

.padded-container {
	max-width: 95vw;
	margin: 10rem auto 5rem;
}

.input-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 2rem auto;
	max-width: min(700px, 80vw);
}

label {
	color: var(--fg-color);
	font-size: 1.3rem;
}

input {
	width: 100%;
	font-size: 1.2rem;
	background-color: var(--bg-highlight-color);
	border: none;
	border-radius: 0.3rem;
	color: var(--fg-color);
	padding: 0.5rem 0.7rem;
	outline: none;
}

.highlight {
	font-size: 1.0rem;
	padding: 0.5rem 0;
}

.highlight > .chroma {
	padding: 0 0.5rem;
	border-radius: 0.3rem;
}

code:not(.highlight code) {
	background-color: var(--bg-highlight-color);
	padding: 0.05rem 0.25rem;
	border-radius: 0.3rem;
	font-size: 1.2em;
}

p {
	padding: 0.5rem 0;
	margin: 0 1.5em;
	color: var(--fg-color);
}

@media print {
	@page {
		margin: 2rem 0.5rem;
	}

	main {
		margin: 0;
		padding: 0;
	}

	h1 {
		text-align: center;
	}

	h1 > a:hover::before, h2 > a:hover::before {
		opacity: 0;
	}
}