:root {
	--eiderdown: #4A3C34;
	--goose: #EDEDE9;
	--feather: #5B4C40;
	--odoriko: #2E5460;
	--bluetrain: #113034;
}

html {
	font-family: Helvetica, sans-serif;
	font-size: 14pt;
	background-color: var(--goose);
	color: var(--eiderdown);
}
body {
	animation-duration: 6s;
	animation-name: all;
}
@keyframes all {
	from {
		color: var(--goose);
	}
	to {
		color: var(--eiderdown);
	}
}

h1 {
	font-size: 1.4em;
	color: var(--bluetrain);
}

a:hover, a:hover {
	font-style: normal;
	color: var(--feather);
}
a {
	font-style: oblique;
	color: var(--odoriko);
}

/* navigation bar */
nav {
	font-size: 1.1em;
}
nav ul {
	padding-left: 0.9em;
}
nav ul li {
	display: inline-block;
}
nav ul li a {
	padding-right: .9em;
}

/* body */
body {
	width: 88%;
	margin: auto;
}

/* pts  */
canvas {
	margin: auto;
	display: block;
}

/* contact formatting */
address {
	color: var(--feather);
}

address span {
	display: block;
	margin: 0 0 0 .9em;
	color: var(--odoriko);
}

/* resume content formatting */
section.level3 {
	margin-bottom: 1rem;
}
section h3 {
	margin: 0em .7em 0.4em 0em;
	padding-bottom: 0.6em;
	display: inline;
}
section h2 {
	margin-bottom: 0.4em;
}
section ul {
	list-style: none;
	margin: 0.4em 0em 0.4em 0em;
	padding-left: 0.7em;
	text-align: justify;
}
section {
	display: block;
	margin: auto;
}
section > ul > li {
	line-height: 1.4rem;
}
@media print {
	section {
		width: 840px;
	}
}

/* date formatting */
section > h3 + p {
	float: right;
	margin: 0em;
}
section p span {
	padding: 0em 0em 0em 0.4em;
	color: var(--odoriko);
}

/* hide title for resume */
.title {
	display: none;
}


/* desktop */
@media screen and (min-width: 720px) {
	html {
		font-size: 10pt;
	}
	body {
		width: 98%;
	}
	h1 {
		font-size: 1.6em;
	}
	section {
		width: 800px;
	}
}