@import "ibm-font.css";

body {
	font-family: "IBM Plex Serif", serif;
	font-size: 16px;
	line-height: 1.7;
	max-width: 40em;
	margin: 0 auto;
	padding: 1em;
}

h1,
h2,
h3,
h4 {
	font-weight: 600;
	line-height: 1.3;
}

header {
	text-align: center;
	margin-bottom: 2em;
}

.project-details {
	font-size: 1rem;
	font-weight: normal;
}

.highlight {
	font-weight: 500;
	border-radius: 3px;
	padding: 0.2em 0.3em;
}

.important-gif {
	width: 100%;
}

code,
pre {
	font-family: "IBM Plex Mono", monospace;
	font-size: 14px;
	max-width: fit-content;
	border-radius: 3px;
	padding: 0.3em 0.5em;
}

pre {
	overflow-x: auto;
	padding: 0.8em 1em;
}

@media (prefers-color-scheme: light) {
	body {
		background-color: #f7f3ed;
		color: #3b342b;
	}

	h1,
	h2,
	h3,
	h4 {
		color: #32281b;
	}

	.highlight {
		background-color: #f7be6e;
		color: #3b342b;
	}

	pre,
	code {
		background-color: #e4dbcd;
		color: #32281b;
	}

	a,
	a:visited,
	a:active {
		color: #264673;
	}

	a:hover {
		color: #335d99;
	}

	::selection {
		background-color: #f7be6e;
		color: #3b342b;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #1e1a15;
		color: #f4eee6;
	}

	h1,
	h2,
	h3,
	h4 {
		color: #f4eee6;
	}

	.highlight {
		color: #f7be6e;
		background: none;
	}

	pre,
	code {
		background-color: #12100c;
		color: #ece5d9;
	}

	a,
	a:visited,
	a:active {
		color: #7ca7e4;
	}

	a:hover {
		color: #96baee;
	}

	::selection {
		background-color: #7a5520;
		color: #f4eee6;
	}
}

a.site-title-link {
	color: inherit;
	text-decoration: none;
}

a.site-title-link:hover {
	text-decoration: underline;
}