@media print {
  .noprint, .noprint * {
      display: none !important;
  }
}

@media not print {
	.onlyprint, .onlyprint * {
		display: none !important;
	}
}

html {
	background-color: #eee;
	color: #444;
	font-family: serif;
	font-variant-emoji: emoji;
}

a, a:link {
	color: #444;
}

@media (prefers-color-scheme: dark) {
	html {
		/* if this scheme looks familiar it's because it's the same as
		 * vulpes.one's gemini proxy. several design decisions were borrowed
		 * from there, actually... */
		color: #cad1d8;
		background-color: #14171a;
	}

	html * {
		caret-color: #888;
	}

	a, a:link {
		color: #eee;
	}

	.invert-when-dark {
		filter: invert(100%);
	}
}

.is-blocky {
	display: block;
}

.is-inline-blocky {
	display: inline-block;
}

@media print {
	/* HACK to make printed version of my resume look better. no idea what this
	 * will do to eg. blog posts, and hopefully I never have to solve for that.
	 */
	.is-inline-blocky {
		display: block;
	}

	.more-formal-when-printed {
		text-transform: none;
	}

	.avoid-print-break {
		break-inside: avoid;
	}
}

body {
	font-size: 13pt;
	margin-top: 0;
	padding: 0 10px;
	padding-top: 0;
}

@media only screen and (min-width: 800px) {
	body {
		max-width: 750px;
		margin: 40px auto;
	}
}

/* these two media blocks are to make Chromium suck less at rendering
 * downscaled images: https://stackoverflow.com/a/69137897
 */
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}
/* Unset for Safari 11+ */
@media not all and (min-resolution:.001dpcm) {
	@supports (-webkit-appearance:none) and (stroke-color:transparent) {
		img {
			image-rendering: unset !important;
		}
	}
}

header {
	padding-bottom: 0.5em;
	border-bottom: 0.15em dotted lightgrey;
}

header ul li img {
	max-height: 5em;
}

footer {
	padding-top: 0.5em;
	border-top: 0.15em dotted lightgrey;
	text-align: center;
	margin: auto;
}

nav {
	overflow: auto;
	text-align: center;
	margin: auto;
}

nav::after, footer::after {
	clear: both;
}

nav ul {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

nav ul li {
	display: inline;
	text-transform: lowercase;
	list-style-type: none;
	margin-right: 0.75em;
	font-size: 95%;
	font-family: monospace;
}

nav ul li::last {
	margin-right: 0;
}

nav ul li span {
	display: inline-block;
}

img.float-left {
	float: left;
	max-width: 25%;
	margin-right: 1em;
	margin-bottom: 1em;
}

p::after {
	clear: both;
}

#content {
	line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6 {
	font-variant: small-caps;
	font-family: sans-serif;
	text-align: center;
}

a {
	text-decoration: none;
	border-bottom: 1px dotted;
}

header .whoami {
	border-bottom: none;
}

header .whoami h1 {
	border-bottom: none;
	font-variant: normal;
	margin: 0.25em 0;
}

#content blockquote .tangential {
	display: block;
	border: 1px dotted;
	padding: 0.5em;
	text-align: center;
	font-size: 85%;
	break-inside: avoid;
}

@media only screen and (max-width: 700px) {
	#content blockquote .tangential {
		margin: 0;
	}

	#content blockquote {
		margin: 0;
	}
}

#content p img {
	max-width: 100%;
	width: 100%;
}

.force-caps {
	text-transform: uppercase;
}

.grayscale {
	filter: grayscale(100%);
}

.comma-separated-list li {
	display: inline;
}

.comma-separated-list li:after {
	content: ",";
}

.comma-separated-list li:last-child:after {
	content: "";
}

.resume .job,
.projects-project {
	break-inside: avoid;
}

.flexy {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

.flexy .flex {
	flex: 1;
}

.flexy .break {
	flex-basis: 100%;
	height: 0;
}

.flexy .push-left-20 {
	flex-basis: 20%;
	flex-grow: 0;
}

.flexy .push-left-30 {
	flex-basis: 30%;
	flex-grow: 0;
}

.flexy h3, .flexy h4 {
	display: inline-block;
	align-self: center;
	text-align: left;
}

.resume .skillset h3,
.resume .job .title,
.resume .testimonial h4,
.resume .foss-where,
.projects-project .title {
	margin-bottom: 0;
	text-align: left;
}

.resume .job .tenure,
.projects-project .tenure,
.resume .testimonial .author p {
	font-size: 85%;
	padding: 0.5em 0;
	text-align: left;
}

.resume .job .tenure span,
.projects-project .tenure span {
	display: inline-block;
}

.flex.description {
	align-self: center;
	margin-left: 1em;
	margin-right: 0;
}

details.heading summary {
	text-align: center;
}

details.heading summary h3 {
	display: inline-block;
}

.resume .testimonial .flex.description {
	margin-top: 0;
}