:root {
	font-family: Inter, "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
	font-feature-settings: 'liga' 1, 'calt' 1;
	/* fix for Chrome */
}

body {
	background: linear-gradient(210deg, #f0f8ff 20%, #fff8f0 90%);
	color: #000711;
	font-family: Inter, "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
	font-feature-settings: "dlig" on, "zero", "ss02", "ss03", "case", "cv10";
	font-size: 17px;
	font-weight: 400;
	line-height: 1.5em;
}

a:link,
a:hover,
a:active {
	color: #004CCA;
}

a:visited {
	color: rebeccapurple;
}

@media (prefers-color-scheme: dark) {
	body {
		background: linear-gradient(210deg, #523172 20%, midnightblue 90%);
		color: #edc;
	}

	a:link,
	a:hover,
	a:active {
		color: lightskyblue
	}

	a:visited {
		color: #be96eb;
	}
}

body.page-home {
	margin: 0;
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
}

#container {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#vcard {
	position: relative;
	padding: 2em 3em;
	margin: 2em;
	width: auto;
	max-width: 46em;
}

#colophon {
	font-size: .875em;
}

#colophon code {
	font-size: .857em;
}

h1,
h2,
h3 {
	font-weight: normal;
}

h2,
h3 {
	text-shadow: 1px 1px 2px #fff;
}

h1 {
	font-family: "Fira Code", "Cascadia Code", "Input Mono", "Fira Mono", "Liberation Mono", "Source Code Pro", monospace;
	font-size: 1.45em;
	font-weight: 300;
	line-height: 1.35em;
}

mark {
	background: #3584e4;
	color: #fff8f0;
}

h1 b {
	font-weight: 600;
}

h1 img {
	margin-bottom: .5em;
}

p {
	hyphens: auto;
}

p b {
	font-weight: 600;
}

h2 {
	margin: 1.5em 0 1em;
	text-shadow: 1px 1px 1px #fff;
}

footer {
	opacity: .85;
	font-size: 0.85em;
	text-align: center;
}

footer p {
	margin: .5em 0;
}

@media screen and (max-width:56em)
/* 896px */

	{
	#vcard {
		margin: 1em;
		padding: .5em 1.5em;
	}
}

@media screen and (max-width:40em)
/* 640px */

	{
	#vcard {
		border: none;
		margin-top: 0;
		margin-left: 0;
		margin-right: 0;
	}
}


@keyframes fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

html {
	visibility: visible;
	opacity: 1;
	animation: .1s ease 0s fadein;
}