/*** VIEW ON CHROME ON MACOS FOR PRINTING ***/
/* google font imports */
@import url("https://fonts.googleapis.com/css?family=Lato|Roboto|Space+Mono|Oswald|Ubuntu");

/***** SCAFFOLDING *****

body,
#name,
#contact,
#links,
#languages,
#projects,
#experience {
	border: 1px dashed gray;
}*/

/***** VARIABLES *****/
:root {
	--java-color: saddlebrown;
	--html-color: #c00;
	--css-color: darkmagenta;
	--javascript-color: #db0;
	--php-color: #45f;
	--shell-color: #2d2;
	--python-color: #0ac;
	--swift-color: darkorange;
	--sql-color: #d834eb;

	--dark-gray-color: #525252;
	--dark-blue-color: #064254;

	--banner-height: 1in;
	--banner-lowness: 0.45in;
	--side-width: 2in;
	--side-leftness: 0in;
	--spacing-amount: 0.25in;
	--effective-top: calc(var(--banner-lowness) + var(--banner-height));
	--effective-left: calc(
		var(--side-leftness) + var(--side-width) + var(--spacing-amount)
	);

	--hidden-display: none;
}

/***** LAYOUT *****/

* {
	padding: 0px;
	margin: 0px;
}

.hidden {
	display: var(--hidden-display) !important;
}

body {
	/* is one page! */
	width: 8.5in;
	height: 11in;
	box-sizing: border-box;
	/* border: 1px solid green; */
}

#picture {
	width: 1.5in;
	height: 1.5in;
	float: left;
	position: absolute;
	left: calc(var(--spacing-amount) + var(--side-leftness));
	top: calc(var(--banner-lowness) - 0.25in);
	/* curve starts at banner's bottom edge */
	border-radius: calc((1.5in - var(--banner-height)) / 2);
}

header {
	width: calc(8.5in - var(--side-width) / 2);
	display: flex;
	justify-content: flex-end;
	top: var(--banner-lowness);
	height: var(--banner-height);
	margin-left: calc(var(--side-width) / 2);
	position: absolute;
	box-sizing: border-box;
}

#name {
	width: calc(8.4in - var(--side-width) - var(--spacing-amount));
	text-align: center;
}

#name p {
	position: relative;
	right: 0.1in;
	top: -0.08in;
}

aside {
	width: var(--side-width);
	clear: left;
	height: 100%;
	float: left;
	margin: 0in var(--spacing-amount);
	padding-top: calc(var(--effective-top) + 1.5 * var(--spacing-amount));
	padding-bottom: var(--spacing-amount);
	box-sizing: border-box;
	margin-left: var(--side-leftness);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

aside > * {
	margin: 0 var(--spacing-amount);
}

#languages p {
	text-align: center;
	padding: calc(var(--spacing-amount) / 3);
	margin-top: calc(var(--spacing-amount) / 3);
	border-radius: calc(var(--spacing-amount) / 3);
}

#contact h2 {
	margin-top: 0.1in;
}

#qr {
	width: 1.4in;
	padding: 0.02in;
	margin-top: 0.1in;
	align-self: center;
	border-radius: 0.05in;
}

#fact p {
	font-size: 11.7pt;
}

#skills ul {
	text-align: left;
	margin-left: 0.15in;
}

#skills li {
	font-size: 11.5pt;
}

main {
	padding-top: calc(var(--effective-top) + var(--spacing-amount));
	padding-right: var(--spacing-amount);
}

main h3 {
	margin-top: 0.08in;
}

main h4 {
	margin-left: calc(var(--effective-left) + 0.05in);
}

main p {
	margin-left: calc(var(--effective-left) + 0.1in);
}

main h3 a {
	float: right;
	padding: 0.04in 0.05in;
	padding-top: 0;
	border: 1px dashed;
	border-radius: 0.05in;
	margin-left: 0.05in;
}

#experience {
	margin-top: var(--spacing-amount);
}

/***** FONT & APPEARANCE SPECIFICS *****/

#name h1 {
	font-family: "Roboto", sans-serif;
	font-size: 46pt;
}

#name p {
	font-family: "Ubuntu";
	font-size: 14pt;
}

aside {
	font-family: "Roboto";
	text-align: center;
}

#languages p {
	font-family: "Ubuntu";
	font-size: 13pt;
	font-weight: bold;
}

main h2 {
	text-decoration: underline;
	font-family: "Roboto", sans-serif;
	text-align: center;
}

main h3 {
	font-family: "Roboto";
	font-size: 15pt;
}

main h3 a {
	font-family: "Oswald";
	font-weight: normal;
	font-size: 12pt;
}

main h4 {
	font-family: "Ubuntu";
	font-size: 12pt;
}

main p {
	font-size: 11pt;
	text-align: justify;
	font-family: "Georgia", serif;
}

li {
	font-size: 13pt;
}

/***** COLORS & SHADOWS *****/

a {
	color: inherit;
}

header {
	background-color: #d2d2d2;
	color: var(--dark-gray-color);
}

aside {
	background-color: var(--dark-blue-color);
	color: white;
	box-shadow: 4px 0px 20px gray;
}

#qr {
	background-color: white;
}

#languages p {
	color: white;
	box-shadow: 0px 0px 15x gray;
}

#picture {
	box-shadow: 0px 0px 20px black;
	background-color: black;
}

main {
	color: var(--dark-blue-color);
}

main a {
	color: var(--dark-blue-color);
	border-color: var(--dark-blue-color);
}

span.java {
	color: var(--java-color);
}

span.html {
	color: var(--html-color);
}

span.css {
	color: var(--css-color);
}

span.javascript {
	color: var(--javascript-color);
}

span.php {
	color: var(--php-color);
}

span.shell {
	color: var(--shell-color);
}

span.python {
	color: var(--python-color);
}

span.swift {
	color: var(--swift-color);
}

span.sql {
	color: var(--sql-color);
}

p.java {
	background-color: var(--java-color);
}

p.html {
	background-color: var(--html-color);
}

p.css {
	background-color: var(--css-color);
}

p.javascript {
	background-color: var(--javascript-color);
}

p.php {
	background-color: var(--php-color);
}

p.shell {
	background-color: var(--shell-color);
}

p.python {
	background-color: var(--python-color);
}

p.swift {
	background-color: var(--swift-color);
}