* {
	margin:0;
	padding:0;
}

html, body {
	width: 100%;
	height: 100%;
	font-family: arial, sans-serif;
}

body {
	background: #E2E2E2;
	background-image: linear-gradient(#F2F2F2, #E2E2E2, #F2F2F2);
	padding:0px;
	height: 100%;
}

body p, body li, body summary, blockquote, figure, figcaption {
	font-family: 'KhwanSansRegular', sans-serif;
	font-weight:normal;
	font-style:normal;
}

#skipheader {
	position:absolute;
	top:-1000px;
	left:-1000px;
}

#gridcontainer {
	
}

/* very small screens */
@media only screen and (max-width: 600px) {
	#gridcontainer {
		display:flex;
		flex-direction: column;
		/* grid-template-columns: [col-start] 1fr [col-nav] 1fr [col-text] 1fr [col-gap] 1fr [col-end];
		grid-template-rows: repeat(auto, auto);*/
	}
	header {
		display:flex;
		flex-direction:row;
	}
	#logo {flex-basis:150px;flex-grow: 1; flex-shrink:1;padding:5%;}
	#logo img {margin:auto auto;}
	#title {flex-basis:500px;flex-grow:3;flex-shrink:3;}
	#title h1 {font-size:200%;}
	#title p {}
	#sitenav {}
	#sitenav ul {display:block;}
	#sitenav li {display:block;border-radius: 5px;}
	#sitenav a {width:96%;padding: 5% 2% 5% 2%;}
	.home {
		
	}

	.resume {
		
	}

	.portfolio {
		
	}

	.linkedin {
		
	}
	
	.home.currentpage, .resume.currentpage, .portfolio.currentpage, .credits.currentpage {padding:3%;margin: 3% 2% 3% 2%;}
	main {
	
	}

	#pagenav {
		
	}

	#main-content {
		
		padding: 2em;
	}

	.photo-right {margin:auto auto;}
	
	footer {
		
	}
}

/* small screens - need to test on an iPad */
@media only screen and (min-width: 600px) {
	#gridcontainer {
		display:flex;
		flex-direction: column;
		/* grid-template-columns: [col-start] 1fr [col-nav] 1fr [col-text] 1fr [col-gap] 1fr [col-end];
		grid-template-rows: repeat(auto, auto);*/
	}
	header {
		display:flex;
		flex-direction:row;
	}
	#logo {flex-basis:150px;flex-grow: 1; flex-shrink:1;padding:5%;}
	#logo img {margin:auto auto;}
	#title {flex-basis:500px;flex-grow:3;flex-shrink:3;}
	#title h1 {font-size:200%;}
	#title p {}
	#sitenav {}
	#sitenav ul {display:block;}
	#sitenav li {display:block;border-radius: 5px;}
	#sitenav a {width:96%;padding: 5% 2% 5% 2%;}
	.home {
		
	}

	.resume {
		
	}

	.portfolio {
		
	}

	.linkedin {
		
	}
	
	.home.currentpage, .resume.currentpage, .portfolio.currentpage, .credits.currentpage {padding:3%;margin: 3% 2% 3% 2%;}
	main {
	
	}

	#pagenav {
		
	}

	#main-content {
		
		padding: 2em;
	}

	.photo-right {margin:auto auto;}
	
	footer {
		
	}
}

/* medium screens - tablets */
@media only screen and (min-width: 768px) {
	#gridcontainer {
		display:flex;
		flex-direction: column;
	}
	header {
		display:flex;
		flex-direction:row;
	}
	#logo {flex-basis:150px;flex-grow: 1; flex-shrink:1;padding:5%;}
	#logo img {margin:auto auto;}
	#title {flex-basis:400px;flex-grow:3;flex-shrink:3;}
	#title h1 {font-size:200%;}
	#title p {}
	#sitenav {}
	#sitenav ul {display:block;}
	#sitenav li {display:block;border-radius: 5px;}
	#sitenav a {width:96%;padding: 5% 2% 5% 2%;}
	.home {
		
	}

	.resume {
		
	}

	.portfolio {
		
	}

	.linkedin {
		
	}
	
	.home.currentpage, .resume.currentpage, .portfolio.currentpage, .credits.currentpage {padding:3%;margin: 3% 2% 3% 2%;}
	main {
	
	}

	#pagenav {
		
	}

	#main-content {
		
		padding: 2em;
	}

	.photo-right {margin:auto auto;}
	
	footer {
		
	}

}

/* computer screens */
@media only screen and (min-width: 992px) {
	#gridcontainer {
		display:grid;
		min-height: 100dvh;
		grid-template-columns: [col-start] 0.7fr [col-nav] 1.2fr [col-text] 5fr [col-gap] 0.7fr [col-end];
		grid-template-rows: [header] 2fr [sitenav] 0.5fr [body] minmax(400px, auto) [footer] 1fr [row-end];
	}
	header {
		display:grid;
		grid-template-columns: subgrid;
		grid-column: col-start / span col-end;
		grid-row: header;
	}
	#logo {grid-row:1/1;grid-column: col-nav/ span 1;padding:10% 10% 2% 10%;}
	#logo img {max-width:80%;max-height:80%;margin: auto auto;}
	#title {display:grid;grid:subgrid;grid-row: 1 / 1;grid-column: col-text / span col-end;}
	#title h1 {grid-row:1/span 1;font-size:275%;}
	#title p {grid-row:2/span 1;font-size:110%;}
	#sitenav {grid-column: col-start / col-end;grid-row:sitenav;}
	#sitenav ul {display:grid; grid-template-columns: repeat(7, 1fr);grid-template-rows: subgrid;grid-column-gap:5px;}
	#sitenav li {display:inline-block;height: 100%;border-radius: 5px 5px 0px 0px;}
	#sitenav a {height:100%;width: 100%;padding: 5% 2% 0px 2%;}
	.home {
		grid-column: 3 / span 1;
		grid-row: sitenav;
	}

	/* .resume {
		grid-column: 4 / span 1;
		grid-row: sitenav;
	} */

	.portfolio {
		grid-column: 4 / span 1;
		grid-row: sitenav;
	}

	.credits {
		grid-column: 5 / span 1;
		grid-row:sitenav;
	}

	.linkedin {
		grid-column: 6 / span 1;
		grid-row: sitenav;
	}

	footer {
		grid-column:  col-nav / span col-gap;
		grid-row-start:footer;
	}
	main {
		grid-column: col-text / span col-end;
		grid-row: body;
	}
	
	#pagenav {
		grid-row:body;
		grid-column: col-nav / span 1;
	}


	#pagenav-header {
		grid-row:body;
		grid-column: col-nav / span 1;
	}

	.pagenav-links {
		grid-row:body;
		grid-column: col-nav / span 1;
	}

	#main-content {
		grid-row: 2 / span 1;
		grid-column: col-text / span 1;
		padding: 2em 3.2em;
	}
	.photo-right {float:right;margin: 3%;}
	.home.currentpage, .resume.currentpage, .portfolio.currentpage, .credits.currentpage {padding-top:3%;	margin: 3% 2% 0px 5%;}
}

/* large computer screens */
@media only screen and (min-width:1200px) {

}

header {
	background:#262626;
	color:#d9d9d9;
	background: repeating-linear-gradient(135deg, #323232, #262626 0.4%, #323232 0.4%, #262626 0.4%, #323232 0.4%, #262626 0.4%, #323232 0.4%);
	font-family: 'RetniSansRegular', sans-serif;
}


#logo {
	text-align:center;
	vertical-align:middle;
	box-sizing:border-box;
}

#logo img {}

#title {
	background: #262626;
	padding: 1% 2%;
	border-left: 2px solid #000;
	
}

#title h1 {
	margin-top:1.5%;
	margin-bottom:0px;
	text-transform: uppercase;
	font-weight:100;
}

#title p {
	margin: 0px 0px 2% 0px;
}

#title a {
	text-decoration:none;
}

#title a:link, #title a:visited {
	color:#d9d9d9;
}

#title a:hover {
	color: #457873;
}

#sitenav {
	grid-template-columns: subgrid;
	background:#1D1D1D;
	font-weight:normal;
	font-family: 'RetniSansRegular', sans-serif;
	text-transform: uppercase;
}

#sitenav ul {
	grid-column: col-start / col-end;

}

#sitenav li {
	text-align:center;
}


#sitenav a {
	display:inline-block;
	text-decoration:none;
}

.external-icon {
	max-width:17px;
	max-height:17px;
	margin-left: 8px;
}


.home a:link, .home a:visited, .resume a:link, .resume a:visited, .portfolio a:link, .portfolio a:visited, .linkedin a:link, .linkedin a:visited {
	color:#fff;
}

.home a:hover, .resume a:hover, .portfolio a:hover, .linkedin a:hover {
	display:block;
	background:#457873;
}

.home.currentpage, .resume.currentpage, .portfolio.currentpage, .credits.currentpage {
	background:#fff;
	color:#000;
	padding-top:3%;
	font-weight:bold;
}

.currentpage i {
	margin-right: 7px;
}

.sr-only {
	height: 1px;
	width: 1px;
	clip: rect(1px, 1px, 1px, 1px);
	overflow:hidden;
	position:absolute;
}

main {
	display:grid;	
	grid-template-columns: subgrid;
	grid-template-rows: subgrid;
	border-left: 1px solid #D7D7D7;
	border-right: 1px solid #D7D7D7;
}

#pagenav {
	background:#F2F2F2;
	border-right: 2px solid #E2E2E2;
	padding: 2em 1em;
}

#pagenav h2 {
	font-size: 110%;
	font-family: 'RetniSansRegular', sans-serif;
	font-weight: bold;
	font-style: normal;
}

#pagenav li {
	list-style-type: none;
	margin:3% 0px 5% 7%;
	padding-bottom: 4%;
	display:block;
	border-bottom:1px solid #E0E0E0;
}

#pagenav a, #main-content a {
	font-weight:bold;
}

#pagenav a {
	text-decoration:none;
}

#pagenav a:link, #main-content a:link {
	color: #2F514E;
}

#pagenav a:visited, #main-content a:visited {
	color: #457873;
}

#pagenav a:hover, #main-content a:hover {
	color: #707070;
}

.external i {
	/*margin-left: 5px;*/
}


#main-content {
	background: #fff;
}

.photo-right {
	max-width:250px;
	max-height:250px;
}

#main-content h2 {
	margin: 5% 0px 1.2% 0px;
	font-family: 'RetniSansRegular', sans-serif;
	font-size:170%;
	font-weight: bold;
	font-style: normal;
	border-bottom: 3px solid #457873;
	display:inline-block;
}


#main-content h3 {
	margin: 3% 0% 1% 0%;
	font-family: 'RetniSansRegular', sans-serif;
	font-size: 125%;
	font-weight:bold;
	font-style: normal;
}

#main-content p, blockquote {
	color: #303030;
	margin-bottom: 2%;
}

#main-content li {
	color: #303030;
	margin:0.5% 0% 1% 5%;
}

.accordion-set {
	margin: 3% 0%;
}

#main-content details {
	margin: 0.5% 3%;
}

#main-content summary {
	padding: 1.5% 3%;
	background: #96C0B9;
}

#main-content summary:active, #main-content summary:hover, #main-content summary:selected  {
	/*background: #6DABA5;*/
}

#main-content details > div {
	padding: 2% 4% 1% 5%;
	border: 1px solid #A3A3A3;
	border-top: none;
}

.quote {
	width: 80%;
	margin: 3% auto;
	padding: 2% 2% 1% 2%;
	border-top: 3px solid #96C0B9;
	border-bottom: 3px solid #96C0B9;
}

#main-content blockquote {
	margin-bottom: 2%;
	font-size:120%;
}

.quote-source {
	margin: 0%;
	text-align:right;
}

.link-big {
	display:block;
	width:35%;
	background:#457873;
	padding: 3%;
	margin: 3% auto;
	border-radius:50px;
	font-size:120%;
	text-align:center;
}

.link-big:link, .link-big:visited {
	color: #fff !important;
}

.link-big:active, .link-big:hover {
	background: #96C0B9;
	color: #303030 !important;
}

.img-border {
	border: 1px solid #262626;
}

.img-link {
	background:#F2F2F2;
	border: 1px solid #E2E2E2;
	border-radius:5px;
	padding:2%;
	text-align:center;
	margin:1% 0%;
}

footer {
	background: #1D1D1D;
	color:#fff;
	padding:2% 2% 1% 2%;
	vertical-align:middle;
}

footer a:link, footer a:visited {
	color:#6DABA5;
}

footer a:hover {
	color:#A3A3A3;
}