@charset "utf-8";
/* CSS Document */

:root {
	/* Color Variables */
	--text-light-1: #ffffff;
	--text-dark-1: #181818;
	--dark-1: #000000;
	--mid-1: #727272;
}

a {
	text-decoration: none;
	font-size: inherit;
	font-weight: inherit;
}

.header {
	height: 80px;
	width: 100%;
	background-color: var(--dark-1);
	background-image: url("../images/pngs/background3.png");
	background-size: cover;

}

.header-title a {
	display: flex;
	font-family: 'Outfit';
	color: var(--text-light-1);
	padding-left: calc(20% + .55in);
	font-size: 20pt;
	padding-top: 15px;
}

.header-subtitle {
	display: flex;
	color: var(--text-light-1);
	padding-left: calc(20% + .55in);
	font-size: 10pt;
	font-weight: 300;
	/*text-decoration: underline;*/
}

.header-subtitle a {
	display: flex;
	color: var(--text-light-1);
	padding-left: calc(20% + .55in);
	font-size: 10pt;
	font-weight: 300;
	/*text-decoration: underline;*/
}

* {
	margin: auto;
	padding: 0;
	box-sizing: border-box;
	transition: 0.1s ease-in-out;
	font-family: 'Work Sans';
	font-weight: 500;
/*	max-width: 1300px;*/
	font-size: 11pt;
	line-height: 1.25;
	color: var(--text-dark-1);
}

.text {
	padding-left: .375in;
	padding-right: .375in;
}



h1 {
	font-weight: 400;
	font-size: 20pt;
	line-height: 2; 
}

h2 {
	font-weight: 600;
	font-size: 14pt;
	line-height: 2;
}

.h2-alt {
	font-weight: 500;
	font-size: 14pt;
	line-height: 1.4;
}

ul {
	list-style-type: "-";
	padding-left: 2em;
}

li {
	padding-left: 1.25em;
	margin-bottom: .5em;
}

.li-bottom-no-margin {
	margin-bottom: 0;
}

.top-pad {
	padding-top: .5em;
}

.date {
	font-weight: 400;
	padding-bottom: 1.5em;
}

.text-content {
	padding-top: .5em;
}

.table-of-contents-header {
	font-weight: 400;
	font-size: 8pt;
	line-height: 2;
}

.indent-1 {
	margin-left: 13pt;
	font-size: 8pt;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 3/8in;
	line-height: 1.6;
}

.indent-2 {
	margin-left: 25pt;
	font-size: 8pt;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 3/8in;
	line-height: 1.3;
}

.image-container {
	display: grid;
	margin-top: 17px;

}

.image-container img {
	max-width: 100%;
	height: auto;
	object-fit: cover;
	margin-bottom: .25in;
	border-radius: 16px;
	
}

.table-of-contents {
	position: sticky; /* See link*/
	top: 20px; /*to make it stick to the top of the screen*/
	height: 16rem;
	margin: 0;
	margin-top: 17px;
	font-size: 8pt;
	line-height: 1.5;
	border-image: linear-gradient(#CFCFCF 0%, #8B8B8B 20%, #8B8B8B 80%, #CFCFCF 100%) 1;
	border-width: 1.2pt;
	border-style: solid;
	border-top: 0;
	border-left: 0;
	border-bottom: 0;
	justify-content: center;
	padding-right: 10px;
}

.download-resume-button {
	display: flex;
	width: 90%;
	text-decoration: none;
	margin-bottom: 10px;
	background-color: var(--mid-1);
	border: 0;
	padding: .5em;
	padding-left: 10px;
	padding-right: 10px;
	justify-content: center;
	border-radius: 100px;	
	color: var(--text-light-1);	
	font-size: 9pt;
	text-justify: center;
	text-align: center;
}



.download-resume-button:hover {
	background-color: var(--dark-1);
	cursor: pointer;
}


/*Content Grid*/
.content-grid {
	display: grid;
	grid-template-rows: repeat(auto-fit,minmax(auto,1fr));
	grid-template-columns: 20% auto 20%;
	margin: .25in;
}


@media(max-width: 800px) {
  	.content-grid {
	  	display: grid;
    	grid-template-columns: 1fr; /* One column */
  	}
	
	.image-container {
	display: grid;
	}

	.image-container img {
		max-width: 100%;
		height: auto;
		justify-content: center;
		object-fit: cover;
	}
	
	.text {

	}
	
	.table-of-contents {
		position: static;
		width: 300px;
		border: 0;
		height: auto;
		padding-bottom: 15px;
		margin-left: auto;
		margin-right: auto;	
		margin-top: 0;
		padding-right: 0;
	}
	
	.table-of-contents p {
		display: none; /*Hide the table of contents*/
	}
	
	.download-resume-button {
		font-size: 12pt;
		justify-content: center;
	}
	
	.header-subtitle {
		justify-content: center;
		padding-left: 0;
	}
	
	.header-subtitle a {
		justify-content: center;
		padding-left: 0;
	}
	
	.header-title a {
		justify-content: center;
		padding-left: 0;
	}
}