/* main.css
// ========
// Copyright ©2025 Antefix Consulting LLC
// www.antefix-consulting.com
//
// As usual, goddamn Chrome is ignoring some of the print styles. I've tried
// everything, I guess it's good enough as-is. */

/* Style reset from `meyerweb.com`: */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* General styles
// ==============
// At one time, it seemed that Chrome scaled its default zoom relative to the
// Windows font size, while Firefox did not. The two matched when the Windows
// font size was 125%. Now the two seem to match at 100% and 125%. */

html {
	/* When 'Animation effects' are disabled in Windows, this stops working in
	// Chrome. It always works in Firefox: */
	scroll-behavior: smooth;
}

body {
	background-color: #191817;

	font-family: 'Open Sans', Verdana, sans-serif;
	color: #E0E0E0;
}

h1 {
	font-family: Oswald, sans-serif;
	font-weight: bold;
	font-size: 3.3em;
	text-transform: uppercase;
}

h2 {
	font-family: Oswald, sans-serif;
	font-weight: bold;
	font-size: 1.45em;
	text-transform: uppercase;
}

h3 {
	font-family: Oswald, sans-serif;
	font-weight: bold;
	font-size: 1.45em;
	text-transform: uppercase;
}

p {
	margin: 0.5em 0;

	font-size: 1.25em;
}

em, i, dfn {
	font-style: italic;
}

strong {
	font-weight: bold;
}

small {
	font-size: 0.9em;
	font-style: italic;
}

a {
	color: #A3C9FF;

	text-decoration: none;
}

a:visited {
	color: #537AB3;
}

a:hover {
	color: #b3d2ff;
}

a:active {
	color: #537AB3;
}

@media screen and (max-width: 550px) {
	html {
		/* Phone is much closer to your eyes than a monitor would be: */
		font-size: 14px;
	}
}

@media screen {
	.print_only {
		display: none;
	}
}

@media print {
	.no_print {
		display: none !important;
	}

	body {
		background: none;
		color: black !important;
	}

	a {
		color: black !important;
	}
}

/* General layout
// ============== */

/* This column includes the 'signs' and most of the background image: */
#col_left {
	position: fixed;
	left: 0;
	top: 0;

	width: 73.6vh;
	height: 100vh;

	background: url(back_col_left.jpg) no-repeat black;
	background-size: cover;
	background-position-x: -2.4vh;

	perspective: 51vh;
	perspective-origin: 10vh -22vh;
}

/* This is the middle column, which includes the content: */
main {
	position: absolute;
	min-height: 100%;
	left: 73.6vh;

	/* The full window less the other column widths: */
	width: calc(100% - 73.6vh - 8vh);

	box-shadow: 0 0 1.5vh black;
}

#col_right {
	position: fixed;
	right: 0;
	top: 0;

	width: 8vh;
	height: 100vh;

	background: url(back_col_right.jpg) no-repeat black;
	background-size: cover;
	background-position-x: -2.25vh;
}

@media screen and (max-width: 1400px) {
	#col_left {
		width: 8vh;

		background-position-x: -69vh;
	}

	main {
		left: 8vh;
		width: calc(100% - 16vh);
	}
}

@media screen and (max-width: 800px) {
	#col_left {
		width: 4vh;

		background-position-x: -71vh;
	}

	main {
		left: 4vh;
		width: calc(100% - 8vh);
	}

	#col_right {
		width: 4vh;

		background-position-x: -3vh;
	}
}

@media screen and (max-width: 700px) {
	#col_left, #col_right {
		display: none;
	}

	main {
		left: 0;
		width: 100%;
	}
}

@media print {
	#col_left, #col_right {
		display: none;
	}

	main {
		left: 0;
		width: 100%;

		box-shadow: none;
	}

	main > div {
		margin-top: 3rem;
		border: none!important;
	}

	main > div:nth-child(2n) {
		background: none;
	}

	main > div:not(:first-child) {
		page-break-before: always;
	}
}

/* Welcome banner
// -------------- */

#welcome {
	z-index: 100;
	position: fixed;
	transform: rotate(-45deg);
	width: 50em;
	left: -18.8em;
	top: 1.9em;

	background-color: #395885;
	padding: 0.25em 0;
	border: 1px solid #E0E0E0;

	box-shadow: -0.5vh 0.5vh 0.5vh rgba(0, 0, 0, 0.5);

	text-align: center;
	font-family: Oswald, sans-serif;
	font-variant-caps: small-caps;
}

#welcome #inside {
	border: 3px dotted #E0E0E0;
	padding: 0.5em 0 0.75em 0;
}

#welcome .lines div:nth-child(1) {
	font-family: Oswald, sans-serif;
	font-size: 3em;
	font-weight: bold;
	line-height: 110%;
}

#welcome .lines div:nth-child(2) {
	/* font-family: 'Open Sans', Verdana, sans-serif; */
	font-size: 1.45em;
	line-height: 130%;
}

#welcome .lines div:nth-child(3) {
	font-size: 1.8em;
	line-height: 110%;
}

@media screen and (max-width: 1400px) {
	#welcome {
		position: absolute;
	}
}

@media screen and (max-width: 1000px) {
	#welcome {
		font-size: 1.5vw;
	}
}

@media screen and (max-width: 550px) {
	#welcome {
		font-size: 1.75vw;
	}
}

@media print {
	#welcome {
		display: none;
	}
}

/* Left column
// =========== */

/* The 'signs' that cover walls in the left column: */
.sign {
	font-family: Oswald, Arial, sans-serif;
	font-weight: bold;
	line-height: 120%;
	text-transform: uppercase;
	text-shadow: -0.5vh 0.5vh 0.5vh black;
}

.sign em {
	position: relative;
	top: -0.1em;

	font-family: 'Oleo Script Swash Caps', cursive;
	font-style: normal;
}

.sign a {
	color: #E0E0E0;
}

.sign a:hover {
	/* This gives the impression that the text has moved 'up' toward the viewer.
	// I tried to implement that more literally, but mousing over the middle menu
	// entry caused all three entries to move up. Presumably that has something to
	// do with the perspective effect: */
	text-shadow: -0.75vh 0.75vh 0.75vh black;
}

.sign a:active {
	text-shadow: -0.33vh 0.33vh 0.33vh black;
}

#col_left header {
	position: absolute;
	left: 27.5vh;
	top: 2vh;

	font-size: 5.5vh;
	text-align: center;

	transform: rotateY(6deg);
}

#col_left nav {
	position: absolute;
	left: 42.8vh;
	top: 39.3vh;

	font-size: 5.5vh;
	line-height: 140%;
	text-align: right;

	transform: rotateY(5.5deg);
	cursor: pointer;
}

#col_left address {
	position: absolute;
	left: 11.1vh;
	top: 74.5vh;

	font-size: 7vh;
	line-height: 100%;
	text-align: center;

	transform: rotateY(5.0deg);
	cursor: pointer;
}

/* For navigation menus: */
#col_left ul {
	list-style-type: none;
}

/* The selected menu item: */
#col_left li.Sel {
	text-decoration: underline;
	/* This does nothing in Firefox, but it is necessary in Chrome, which
	// otherwise causes the text shadow to cover the underline: */
	text-underline-position: under;
}

/* For the envelope icon: */
#col_left sub {
	position: relative;
	top: -0.1em;

	font-size: 6vh;
	font-weight: normal;
}

@media screen and (max-width: 1400px) {
	.sign {
		display: none;
	}
}

@media print {
	.sign {
		display: none;
	}
}

/* Main column
// ===========
// This column is divided into 'About', 'Experience', and 'Skills' sections. */

/* These outside divs serve only to place a second set of borders around the
// section content: */
main > div:nth-child(2n+1) {
	border-left: 1px solid #E0E0E0;
	border-right: 1px solid #E0E0E0;
	padding: 0 4px;
}

main > div:nth-child(2n) {
	border-left: 1px solid black;
	border-right: 1px solid black;
	padding: 0 4px;

	background-color: #E8E8E8;
	color: #111;
}

/* About
// ----- */

#about {
	min-height: 100vh;

	padding: 0.75em 2.5em 1.5em 2.5em;
	border-left: 3px dotted #E0E0E0;
	border-right: 3px dotted #E0E0E0;
}

#warn_js {
	text-align: center;
	font-style: italic;
	font-size: 1.5em;
}

#about header {
	margin: 1em 0 2em 0;

	text-align: center;
}

#about header h1 {
	position: relative;

	font-size: 3.41vw;
}

#about header h1 em {
	position: relative;
	top: -0.08em;

	font-family: 'Oleo Script Swash Caps', cursive;
	font-style: normal;
}

#about header h2 {
	margin: calc(-1vw - 0.12em) 0 0 0;

	font-size: 2.41vw;
}

#about header h3 {
	margin: -0.525vw 0 0 0;

	font-size: 2.13vw;
}

#about header p {
	margin: -0.15vw 0 0 0.4vw;

	font-size: 1.58vw;
	letter-spacing: 0.4vw;
}

/* The e-mail link: */
#about header a {
	text-decoration: none;
	color: #B0B0B0;
}

#about header a:hover {
	color: #E0E0E0;
}

#about header a:active {
	color: #B0B0B0;
}

#about p {
	margin: 0 10% 1em 10%;

	text-align: center;
}

#about hr {
	border: 0;
	border-top: 1px solid #999;
}

#about article {
	display: flex;

	margin: 1.5em 2vw 0 2vw;
}

/* These sections divide the bullet points into columns: */
#about article section:nth-child(1) {
	flex: 1;

	margin: 0 2em 0 0;
}

#about article section:nth-child(2) {
	flex: 1;

	margin: 0 0 0 1em;
}

#about .pt {
	display: flex;
	/* Center the asterisks vertically: */
	align-items: center;
}

#about .pt + .pt {
	margin-top: 2.4em;
}

#about .pt div {
	/* Do not increase the size: */
	flex: initial;
	min-width: 1.2em;
	margin-right: 1.5rem;

	text-align: center;
	font-family: Georgia, serif;
	font-size: 2.75rem;
	/* Prevent this content from increasing the row height: */
	line-height: 10%;
	color: #909090;
}

/* Reverse selected icons: */
#about .pt div i.rev {
	transform: scale(-1, 1);
}

/* The item text: */
#about .pt p {
	/* Consume available space: */
	flex: auto;

	margin: 0;

	font-size: 1.6em;
	text-align: left;
	color: #CCC;
}

/* The photo credit and copyright: */
#about footer {
	margin: 2.5em 0 0 0;
}

#about footer p {
	margin: 0.25em 0;

	text-align: center;
	font-size: 1.1em;
}

@media screen and (max-width: 1600px) {
	#about article {
		margin: 2.5em 0 0 0;
	}

	#about .pt p {
		font-size: 1.33em;
	}
}

@media screen and (max-width: 1400px) {
	#about, #exp, #skill {
		padding-left: 2.5em;
		padding-right: 2.5em;
	}

	#about header h1 {
		font-size: 5vw;
	}

	#about header h2 {
		margin: calc(-1.5vw - 0.12em) 0 0 0;

		font-size: 3.53vw;
	}

	#about header h3 {
		margin: -0.9vw 0 0 0;

		font-size: 3.125vw;
	}

	#about header p {
		margin: -0.225vw 0 0 0.6vw;

		font-size: 2.29vw;
		letter-spacing: 0.6vw;
	}

	#about article {
		margin: 2.5em 2.5vw 0 2.5vw;
	}
}

@media screen and (max-width: 900px) {
	#about article {
		margin: 2.5em 0 0 0;
	}
}

@media screen and (max-width: 800px) {
	#about article {
		display: block;
	}

	#about article section:nth-child(2) {
		flex: 1;

		margin: 2.4em 0 0 0;
	}
}

@media screen and (max-width: 700px) {
	#about header h1 {
		font-size: 6.8vw;
	}

	#about header h2 {
		margin: calc(-2vw - 0.12em) 0 0 0;

		font-size: 4.79vw;
	}

	#about header h3 {
		margin: -1.05vw 0 0 0;

		font-size: 4.25vw;
	}

	#about header p {
		margin: -0.3vw 0 0 0.8vw;

		font-size: 3.14vw;
		letter-spacing: 0.8vw;
	}
}

@media screen and (max-width: 550px) {
	#about .pt p {
		font-size: 1.25em;
	}
}

@media print {
	#about header h1 {
		font-size: 5vw;
	}

	#about header h2 {
		margin: calc(-1.5vw - 0.12em) 0 0 0;

		font-size: 3.53vw;
	}

	#about header h3 {
		margin: -0.9vw 0 0 0;

		font-size: 3.125vw;
	}

	#about header p {
		margin: -0.225vw 0 0 0.6vw;

		font-size: 2.29vw;
		letter-spacing: 0.6vw;
	}

	#about .pt div,
	#about .pt p {
		color: black;
	}

	#about p {
		font-size: 1em;
	}

	#about article {
		margin: 1.5em 2.5vw 0 2.5vw;
	}

	#about footer {
		display: none;
	}
}

/* Experience
// ---------- */

#exp {
	min-height: 100vh;

	padding: 0.75em 2.5em 1.5em 2.5em;
	border-left: 3px dotted black;
	border-right: 3px dotted black;

	text-align: center;
}

#exp h1 + p {
	margin: 0 10% 1em 10%;

	text-align: center;
}

#exp a {
	color: #2b73d9;
}

#exp a:visited {
	color: #003E99;
}

#exp a:hover {
	color: #8aafe6;
}

#exp a:active {
	color: #0048b3;
}

#exp hr {
	border: 0;
	border-top: 1px solid #666;
}

#exp section {
	display: flex;
	align-items: center;
}

/* The title and technology block: */
#exp section header {
	flex-basis: 25%;

	margin-right: 1.5em;

	text-align: center;
}

/* The title line: */
#exp section h2 {
}

/* The technology line: */
#exp section h3 {
	margin: 0.25em 0 0 0;

	font-size: 1.2em;
	font-weight: normal;
}

/* The description text: */
#exp section div,
#exp section p {
	flex-basis: 75%;

	text-align: justify;
}

#exp section div.links {
	display: flex;

	margin: 0.5rem 0;

	font-size: 1.25em;
	text-transform: uppercase;
	font-weight: bold;
}

#exp section div.links img {
	position: relative;
	top: 15%;
	height: 1em;
}

/* To generate a CSS filter that produces a specific RGB result:
//
//   https://codepen.io/sosuke/pen/Pjoqqp
*/

#exp section div.links a:hover img {
	filter: invert(50%);
}

#exp section div.links a:active img {
	filter: none;
}

#exp section div.links div.left img {
	margin-right: 0.25em;
}

#exp section div.links div.right {
	text-align: right;
}

#exp section div.links div.right img {
	margin-left: 0.2em;
}

@media screen and (max-width: 900px) {
	#exp section div.links {
		flex-direction: column;
	}

	#exp section div.links div.left,
	#exp section div.links div.right {
		text-align: center;
	}

	#exp section div.links div.left img,
	#exp section div.links div.right img {
		display: none;
	}
}

@media screen and (max-width: 600px) {
	#exp section {
		display: block;
	}

	#exp section p {
		margin-left: 0;

		text-align: center;
	}
}

@media print {
	#exp section p {
		font-size: 1em;
	}

	#exp section h2 {
		font-size: 1.2em;
	}

	#exp section h3 {
		font-size: 1em;
	}

	#exp section div.links {
		font-size: 1em;
		text-transform: none;
	}
}

/* Skills
// ------ */

#skill {
	min-height: 100vh;

	padding: 0.75em 2.5em 1.5em 2.5em;
	border-left: 3px dotted #E0E0E0;
	border-right: 3px dotted #E0E0E0;

	text-align: center;
}

#skill h1 + p {
	margin: 0 10% 1em 10%;

	text-align: center;
}

#skill hr {
	border: 0;
	border-top: 1px solid #999;
}

#skill article {
	margin-top: 1em;

	display: flex;
}

#skill article hr {
	margin: 1.25em;
}

#skill article p {
	margin: 0.75em 0;

	font-size: 1.33em;
	color: #CCC;
}

#skill article p + h2 {
	margin-top: 1.8em;
}

#skill article section {
	/* Give equal space to each column: */
	flex: 1;
	padding: 0 4%;

	text-align: center;
}

@media screen and (max-width: 1400px) {
	#skill section:first-child, #skill section:last-child {
		padding: 0 4%;
	}
}

@media screen and (max-width: 1500px) {
	#skill section:first-child, #skill section:last-child {
		padding: 0;
	}
}

@media screen and (max-width: 1000px) {
	#skill section:first-child, #skill section:last-child {
		padding: 0;
	}
}

@media screen and (max-width: 600px) {
	#skill article {
		display: block;
	}

	#skill article hr {
		margin-left: 15%;
		margin-right: 15%;
	}
}

@media print {
	#skill section:first-child, #skill section:last-child {
		padding: 0 4%;
	}

	#skill article p {
		font-size: 1em;
		color: black;
	}

	#skill article h2 {
		font-size: 1.2em;
	}
}

/* Main column media styles
// ------------------------ */

@media screen and (max-width: 1500px) {
	#about, #exp, #skill {
		padding-left: 1.5em;
		padding-right: 1.5em;
	}
}

@media print {
	main > div {
		border-left: none;
		border-right: none;
	}

	#about, #exp, #skill {
		min-height: unset;

		border: none;
		padding-left: 0;
		padding-right: 0;
	}

	#about .pt p, #exp h1 + p, #skill h1 + p {
		font-size: 1.1em;
		color: black;
	}
}