/* leave it all to me, please */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

@font-face {
	font-family: Lora;
	src: url("Lora/Lora-VariableFont_wght.ttf");
}

@font-face {
	font-family: Lora;
	src: url("Lora/Lora-Italic-VariableFont_wght.ttf");
	font-style: italic;
}

/* Nonspecific stylings */

body {
	font-family: Lora, serif;

	width: 100%;
	height: 100%;
	font-size: var(--text-fs);
}

/* Header things! Name/Title/Contact */

header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	column-gap: 24pt;
	/* for narrow view but keeping it here */
	row-gap: 12pt;

	padding-top: var(--vertpad);
	padding-bottom: var(--vertpad);

	background-color: rgb(28, 125, 97);

	color: white;
}

h1 {
	margin-bottom: 4pt;

	letter-spacing: 1px;
	font-size: var(--h1-fs);
	font-weight: normal;
}

h2 {
	font-size: var(--h2-fs);
	font-weight: normal;
}

h3 {
	font-size: var(--h3-fs);
	font-weight: normal;
}

h4 {
	font-size: var(--h4-fs);
	font-weight: normal;
}

#contact {
	display: grid;
	grid-template-columns: 14pt min-content 14pt 1fr;
	align-items: center;

	font-size: var(--contact-links);
}

#contact svg {
	width: 100%;
	height: 100%;
	color: white;
	stroke: white;
}

#contact a,
#contact span {
	padding-left: 6pt;
	padding-right: 8pt;

	/*text-decoration: none;*/
	color: inherit;
	font-weight: normal;
}

#contact a:hover {
	text-decoration: underline;
}

/* the skills section is for robots */

#skills {
	display: grid;
	grid-template-columns: min-content 1fr;
	align-items: baseline;

	margin-top: 8pt;
	row-gap: 4pt;
	column-gap: 8pt;
}

/* the foreword makes me human */

#foreword {
	margin-top: 16pt;
	margin-bottom: 8pt;
}

/* projects demonstrate I can write code and highlights specific solved problems or libraries/apis used  */

h3 {
	margin-bottom: 6pt;
}

#projects>div {
	margin-bottom: 12pt;
}

#projects>div>h4 {
	font-weight: 500;
	margin-bottom: 6pt;
}

ul {
	list-style: '- ';
	list-style-position: outside;
	margin-left: 10pt;
}

#projects>div>ul {
	margin-left: 24pt;
}

#projects>div>p {
	margin-left: var(--indent-width);
	margin-bottom: 6pt;
}

#smalls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12pt;
}

.small h4 {
	font-weight: 500;
	font-style: italic;
	display: inline;
}

.small h4::after {
	font-weight: normal;
	content: ' - ';
}

.small p {
	display: inline;
}

#small-foreword {
	grid-column: 1 / 3;
}

#small-foreword p {
	grid-column: 1 / 3;
}

/* devops section */

#devops>p {
	margin-left: var(--indent-width);
}

/* previous experience to show i cannot entirely be crushed by capitalism */

.job {
	margin-top: 12pt;
	margin-bottom: 12pt;
}

.job li {
	margin-top: 3pt;
}

.job h4 {
	font-weight: 500;
}

.job .title {
	display: inline-block;
}

.job .timerange {
	display: inline-block;
	padding-left: 24pt;
	font-style: italic;
}

/* "the web is very dynamic and we want this to look good on as many device as possible", section */

@page {
	width: 8.5in;
	height: 11in;
}

:root {
	--indent-width: 12pt;
}

.spaceout {
	margin-top: 16pt;
	margin-bottom: 16pt;
}

@media print {
	:root {
		--spacing: 24pt;

		--vertpad: 0.5in;

		--h1-fs: 22pt;
		--h2-fs: 16pt;
		--h3-fs: 16pt;
		--h4-fs: 14pt;
		--text-fs: 12pt;

		--contact-links: 14pt;
	}

	header {
		padding-top: 0.25in;
		padding-bottom: 0.25in;
	}

	.sheet {
		width: 8.5in;
		height: 11in;
	}

	.page-width {
		padding-left: 0.5in;
		padding-right: 0.5in;
	}

	#projects {
		padding-top: var(--vertpad);
	}
}

@media screen {
	:root {
		--spacing: 24pt;

		--vertpad: 24pt;

		--h1-fs: 18pt;
		--h2-fs: 16pt;
		--h3-fs: 16pt;
		--h4-fs: 14pt;
		--text-fs: 12pt;

		--contact-links: 12pt;
	}

	.sheet {
		max-width: 49rem;
		margin: 0 auto;
	}

	.page-width {
		padding-left: 24pt;
		padding-right: 24pt;
	}
}

/*@media screen and (min-width: 44rem) {
	.sheet {
		margin: 5rem auto;

		border: 1px solid black;
		box-shadow: 6px 6px 16px #777;
		min-height: 57rem;
	}
}*/

@media screen and (max-width: 44rem) {
	.sheet {
		width: 100%;
	}

	.page-width {
		padding-left: 2vw;
		padding-right: 2vw;
	}

	header {
		flex-direction: column;
	}

	#contact {
		grid-template-columns: 14pt 1fr;
		row-gap: 3pt;
	}
}