@import "reset.css";
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono:wght@500;700&display=swap');

div, p, li {
	font-family: Arial, Helvetica, sans-serif;
	line-height: 1.15em;
}

#pageHeader {
	margin-top: .4rem;
	display: flex;
	flex: 1;
	flex-direction: row;
	flex-wrap: wrap-reverse;
	width: min(55rem,90vw);
	margin-inline: auto;
}

#pageHeader > * {
	margin-bottom: .5rem;
}

#pageInfo {
	width: 40%;
	margin-inline: auto;
}

details {
	text-align: justify;
}

summary {
	text-align: center;
	cursor: pointer;
	user-select: none;
}

details[open] summary {
	margin-bottom: .25em;
	text-decoration-line: underline;
	text-underline-offset: .25em;
	text-decoration-thickness: .05em;
	text-decoration-style: dashed;
}

#resume {
	margin-inline: auto;
	margin-bottom: 5rem;
	width: min(45rem,90vw);
}

.entry > div:not(.context) {
	margin-inline: 2vw;
}

h1, h2 {
	font-family: 'Fira Mono', monospace;
	text-align: center;
}

h1 {
	margin-top: 1rem;
	margin-bottom: .4rem;
	line-height: 85%;
	font-size: 2.6em;
	font-weight: 700;
}

h2 {
	font-size: 1.5em;
	font-weight: 700;
	margin-bottom: .5em;
}

h3 {
	font-size: 1.1em;
	font-weight: 600;
	margin-bottom: 0rem;
}

h4 {
	font-weight: 600;
	margin-top: .35rem;
}

header ul {
	text-align: center;
}
header ul li {
	display: inline;
}
header li + li::before {
	content: " \2022  ";
}
header p {
	padding-top: .5em;
}

hr {
	margin-block: 1rem;
}

a {
	color: inherit;
}

a:hover {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-style: dotted;
}

.context {
	font-style: italic;
	margin-top: 0rem;
	margin-bottom: .25rem;
}

.description {
	margin-top: .35rem;
}

.description ul {
	margin-top: .2rem;
}

.description li {
	list-style-type: disc;
	list-style-position: inside;
	margin-left: 1.25em;
	margin-bottom: .2em;
}

.entry {
	margin-bottom: .8rem;
}

@media (max-width: 670px) {
	#pageHeader {
		flex-direction: column;
	}
	#pageVisits {
		order: 2;
	}
	#pageInfo {
		order: 3;
		margin-inline: initial;
		width: initial;
	}
	#navigation {
		order: 1;
	}
	summary {
		text-align: left;
		list-style-position: outside;
	}
}