@font-face
{
	font-family: jetbrainsmono-bold;
	src: url(./fonts/JetBrainsMono-Bold.ttf);
	font-display: swap;
}
@font-face
{
	font-family: jetbrainsmono;
	src: url(./fonts/JetBrainsMono-Regular.ttf);
	font-display: swap;
}

:root {
	--background-color: #241E20;
	--highlight-color: rgba(255, 255, 255, 0.05);
	--lightgray: rgba(255, 255, 255, 0.5);
	--lightblue: #33bbff;
	--superlightblue: #80d4ff;
}

body
{
	background-color: var(--background-color);
	color: #fff;
	font-family: jetbrainsmono;
	font-size: 100%;
	width: 99vw;
	word-wrap: break-word;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 800px)
{
	/* Hide scrollbar for Chrome, Safari and Opera */
	body::-webkit-scrollbar {
		display: none;
	}

	/* Hide scrollbar for IE, Edge and Firefox */
	body {
		-ms-overflow-style: none;  /* IE and Edge */
		scrollbar-width: none;  /* Firefox */
	}
}

h1, h2, h3
{
	font-family: jetbrainsmono-bold;
}

h1 {
	text-align: center;
	font-size: 2.5em;
}

h2
{
	font-size: 1.8em;
}

h3
{
	font-size: 1.3em;
}

h4
{
	font-size: 1.1em;
}

@media screen and (max-width: 800px)
{
	h1
	{
		font-size: 2em;
	}

	h2
	{
		font-size: 1.5em;
	}

	h3
	{
		font-size: 1.3em;
	}

	h4
	{
		font-size: 1.1em;
	}
}

a
{
	text-decoration: none;
}

a:link, a:visited
{
	color: var(--lightblue);
	text-decoration: none;
}

a:active, a:hover
{
	color: var(--superlightblue);
	text-decoration: none;
}

.centered
{
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

hr.light
{
	color: var(--lightgray);
	width: 95%;
	align: center;
}

hr.section-separator
{
	color: var(--lightgray);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3vh;
	margin-bottom: 3vh;
}

.prevent-select {
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
}

#content
{
	width: 90vw;
	margin-left: auto;
	margin-right: auto;
	overflow-wrap: break-word;
	position: relative;
}

@media screen and (max-width: 800px)
{
	#content
	{
		width: 95vw;
	}
}

.section
{
	margin-top: 1vh;
	margin-bottom: 1vh;
	position: relative;
	width: 100%;
}

#header
{
	margin-top: 3vh;
	display: flex;
	flex-direction: column;
}

#header-img
{
	margin-bottom: -3em;
	width: 15vw;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 800px)
{
	#header-img
	{
		width: 50vw;
		max-width: 200px;
	}
}

#nav
{
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 1vw;
}

#nav > a
{
	border: solid 2px;
	border-color: var(--highlight-color);
	border-radius: 0.5em;
	padding: 1vh;
	font-size: 1.1em;
}

#nav > a:hover
{
	background-color: var(--highlight-color);
	transform: scale(1.05);
	border-color: transparent;
}

@media screen and (max-width: 800px)
{
	#nav
	{
		flex-direction: column;
		max-width: 90%;
		margin-left: auto;
		margin-right: auto;
		gap: 1vh;
	}
}


#projects
{
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 2vh;
}

.project
{
	padding-left: 2vw;
	padding-right: 2vw;
	border: solid 2px;
	border-color: var(--highlight-color);
	border-radius: 0.5em;
}

.project:hover
{
	background-color: var(--highlight-color);
	border-color: transparent;
}

.project img
{
	max-height: 50vh;
	max-width: 100%;
	object-fit: contain;
}

/*to have the download icons display below for small screens and to the right of the title for bigger screen*/
.project h2 br
{
	display: none;
}

@media screen and (max-width: 800px)
{
	.project h2 br
	{
		display: inline;
	}
}

.feature {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	align-content: center;
	text-align: left;
	background-color: var(--highlight-color);
	margin-bottom: 1vh;
	border-radius: 0.5em;
	padding-left: 1em;
	padding-right: 1em;
}

.feature img
{
	vertical-align: middle;
	max-height: unset;
	max-width: unset;
	margin-right: 1em;
}

.download-icon
{
	vertical-align: text-bottom;
	margin-top: 1vh;
	height: 1.5em; /*slightly smaller than h2 (1.8em)*/
}

#contact
{
	width: 100%;
}

#about
{
	width: 100%;
}

#about-content
{
	display: flex;
	flex-direction: row;
	gap: 10vh;
}

#about-content > div
{
	margin-top: auto;
	margin-bottom: auto;
}

.mugshot
{
	max-height: 25vh;
	border-radius: 0.5em;
	margin-top: auto;
	margin-bottom: auto;
}

@media screen and (max-width: 800px) and (orientation: landscape)
{
	.mugshot
	{
		max-height: 50vh;
	}
}

@media screen and (max-width: 800px)
{
	#about-content
	{
		flex-direction: column;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
		gap: 0;
	}
	
	#about-content img
	{
		object-fit: contain;
	}
}

input
{
	font-family: jetbrainsmono;
	font-size: 100%;
}

@media screen and (max-width: 800px)
{
	input[type=email]
	{
		width: 90vw;
	}
	
	input[type=submit]
	{
		margin-left: 20vw;
		margin-right: 20vw;
		width: 50vw;
	}
}

#links
{
	width: 100%;
}

.link-container
{
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	width: 100%;
	flex-grow: 0;
}

.link-item
{
	text-align: center;
	width: 25%;
	padding-top: 10px;
	padding-bottom: 10px;
	border: solid 2px;
	border-color: var(--highlight-color);
	border-radius: 0.5em;
}

.link-item img
{
	height: 100%;
	max-width: 90%;
	object-fit: contain;
	margin-left: auto;
	margin-right: auto;
}

.link-item:hover
{
	background-color: var(--highlight-color);
	transform: scale(1.05);
	border-color: transparent;
}

@media screen and (max-width: 800px)
{
	.link-container
	{
		flex-direction: column;
		margin-left: auto;
		margin-right: auto;
	}
	.link-item
	{
		width: 50%;
		max-width: 50%;
		height: 15vh;
		margin-left: auto;
		margin-right: auto;
		margin-top: 1vh;
		margin-bottom: 1vh;
	}
}

#footer
{
	width: 100%;
	font-size: 0.8em;
}