:root {
	/* Font size variables */
	--font-size-base: 11pt;
	--font-size-h1: 68pt;
	--font-size-h2: 16pt;
	--font-size-h3: 16pt;
	--font-size-h4: 12pt;
	--font-size-h1-mobile: 36pt;
}

@page {
	size: letter;
	margin: 0.25in 0 ;
}

@page :first {
	margin: 0;
}

@media print {
	html,
	body {
		padding: 0;
		margin: 0;
	}
}

html {
	font-family: 'Gill Sans', 'Gill Sans MT', 'Puritan', 'Trebuchet MS', sans-serif;
	font-weight: 200;
}

header#resume-header {
	background: #ECECEC;
	padding: 0.25in;
	display: flex;
	justify-content: space-between;
}

main {
	padding: 0.25in;
	font-size: var(--font-size-base, 11pt);
}

#masthead {
	display: flex;
}

#logo {
	flex-shrink: 0;
	height: 0.875in;
	width: 0.875in;
	/* aspect-ratio: 1;
	height: 100%;
	width: auto; */
}

h1,
h3 {
	font-family: "Bebas Neue", sans-serif;
	font-weight: 400;
	font-style: normal;
}

h1 {
	font-size: var(--font-size-h1, 68pt);
	margin-left: 0.15in;
	margin-top: -5pt;
	white-space: nowrap;
}

h2 {
	font-size: var(--font-size-h2, 16pt);
	line-height: 1;
	border-bottom: 1px solid currentcolor;
	margin-bottom: 0.15in;
}

h3 {
	font-size: var(--font-size-h3, 16pt);
	line-height: 1.3;
}

h4 {
	font-size: var(--font-size-h4, 12pt);
	line-height: 1.3;
	font-family: "Puritan", sans-serif;
	font-weight: 400;
	font-style: normal;
	/* text-transform: uppercase; */
}

article + article {
	margin-top: 0.2in;
}

article header {
	display: flex;
	align-items: baseline;
}

article header hgroup {
	flex-grow: 1;
	margin-left: 1ch;
}

hgroup {
	display: flex;
	justify-content: space-between;
	page-break-after: avoid;
	break-after: avoid;
}

ul + hgroup {
	margin-top: 0.2in;
}

hgroup p {
	font-style: italic;
}

main ul {
	padding-left: 0.15in;
	list-style-type: "•\00a0";
	list-style-position: inside;
	line-height: 1.15;
	margin-right: 0.25in;
	padding-left: 0.2in;
}


ul li {
	text-indent: -1.5ch;
	margin: 0.075in 0;
	page-break-inside: avoid;
	break-inside: avoid;

	hyphens: none;
  word-break: normal;
  overflow-wrap: normal;
}

dt {
	font-weight: 500;
}

#skills-section dl {
	line-height: 1.4;
}

#skills-section dt {
	display: inline-block;
}

#skills-section dt::after {
	content: ": ";
}


#skills-section dd {
	display: inline
}

#skills-section dd:not(:last-child)::after {
	content: ",";
	display: inline
}

section + section {
	margin-top: 0.25in;
}

aside {
	/* display: flex; */
	gap: 0.15in;
	/* justify-content: space-evenly; */
	/* align-content: start; */
}

aside section {
	/* flex-basis: 50%; */
}


/* =====================================================================
	Mobile Styling
	==================================================================== */

@media screen and (max-width: 768px) {
	#logo {
		height: 0.5in;
		width: 0.5in;
	}

	h1 {
		font-size: var(--font-size-h1-mobile, 36pt);
		margin-left: 0.1in;
		margin-top: -3pt;
	}
}

/* =====================================================================
	Web Ouptut Only Styling
	==================================================================== */

@media screen and (min-width: 768px) {
	:root {
		--page-size: 8.5in;
		--font-size-base: 14pt;
		--font-size-h2: 21pt;
		--font-size-h3: 21pt;
		--font-size-h4: 16pt;
	}

	main {
		width: var(--page-size);
		max-width: 100%;
		margin: 0 auto;
	}

	header#resume-header {
		padding: 0.25in calc(calc(100% - var(--page-size)) / 2);
	}
}