:root {
	color-scheme: light; /* colour names from `encycolorpedia.com` */
	/* add "dark" after "light" to enable dark mode. I don't like dark mode. portfolio websites should be paper white */
	font-size: 20px;
}

html {
    overflow-y: scroll; 
    overscroll-behavior-y: auto; 
	overflow-x: clip;
	overscroll-behavior-x: none;
    font-family: Work Sans, Arial, Helvetica, sans-serif;
	background-color: light-dark(#fbf4f6, #2b2123); /* "very light pink", "very dark pink-red" */
}

@font-face {
		font-family: 'Inconsolata';
		src:url('../font/Inconsolata-VariableFont_wdth,wght.woff2') format('woff2'),		
			url('../font/Inconsolata-VariableFont_wdth,wght.ttf') format('truetype');
		font-style: normal;
}

@font-face {
		font-family: 'Work Sans';
		src:url('../font/WorkSans-VariableFont_wght.woff2') format('woff2'),		
			url('../font/WorkSans-VariableFont_wght.ttf') format('truetype');
		font-style: normal;
}

@font-face {
		font-family: 'Work Sans';
		src:url('../font/WorkSans-Italic-VariableFont_wght.woff2') format('woff2'),		
			url('../font/WorkSans-Italic-VariableFont_wght.ttf') format('truetype');
		font-style: italic;
}

/* ~~~~~~ default settings ~~~~~~ */

body {
    margin: 0rem 0.3rem 0rem 0.3rem;
    padding: 0.3rem 0rem 0.3rem 0rem;
	display: flex;
	flex-direction: row;
}

#navpane {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-grow: 1;
}

#navcontainer {
	width: 180px;
	font-size: 1.4rem;
	display: flex;
	flex-direction: column;
	font-family: Inconsolata, monospace;
}

#contentscontainer {
	width: 180px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex-grow: 1;
	margin-top: 6rem;
	font-family: Inconsolata, monospace;
}

#contentpane {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
}

main {
	max-width: 760px;
	display: flex;
	flex-direction: column;
	margin: 0rem 0.6rem 0rem 0.6rem;
}

#extrapane {
	width: 180px;
	padding: 8rem 0rem 0rem 1.6rem;
	font-family: Inconsolata, monospace;
}

#externallinkscontainer {
	display: flex;
	flex-direction: column;
	padding: 1.2rem 0rem 0rem 0rem;
}

#sitefooter {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.4rem 0.6rem 0.3rem 0.6rem;
	box-shadow: 0 0 0.3rem light-dark(transparent, transparent);
}

article {
	display: flex;
	flex-direction: column;
}

/* ~~~~~~ links surrounding main ~~~~~~ */

a {
	text-decoration: none;
	color: light-dark(black, white);
}

a:visited {
	color: light-dark(black, white);
}

#hireme span {
	font-size: 1.2rem;
	filter: blur(0.02rem) drop-shadow(0 0 0.1rem light-dark(#c0c0c0, #927da5)); /* "silver", "blue-magenta" */
}

#hireme span:hover {
	background-color: light-dark(white, #ff7597);
	filter: blur(0.02rem) drop-shadow(0 0 0rem transparent);
}

#desktoplogo {
	margin: 1rem 0rem 1rem 1rem !important;
	padding: 0rem 0rem 0rem 0rem !important;
}

#desktoplogo img {
	width: 6rem;
	height: 6rem;
	filter: blur(0.02rem) drop-shadow(0 0 0.1rem light-dark(#c0c0c0, #141414)); /* "silver", "chinese black" */
}

#title {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: right;
}

#title img { /*logo that shows up on mobile*/
	display: none;
	width: 3.5rem;
	height: 3.5rem;
	filter: blur(0.02rem) drop-shadow(0 0 0.1rem light-dark(#c0c0c0, #141414)); /* "silver", "chinese black" */
	margin: 0rem 0.4rem 0rem 0.2rem;
}

#navcontainer a,
#contentscontainer a {
	padding: 0.2rem 0rem 0.2rem 0rem;
	margin: 0rem 0rem 0rem 1rem;
}

#contentscontainer .contentslinkspan {
	filter: blur(0.02rem) drop-shadow(0 0 0.06rem light-dark(#c0c0c0, #927da5));
}

#contentscontainer .contentslinkspan:hover {
	background-color: light-dark(white, #ff7597); /* "white", "medium light pink-red" */
	filter: blur(0.02rem) drop-shadow(0 0 0rem transparent);
}

#contentscontainer #contentsheading {
	font-size: 1.2rem;
	padding: 0.2rem 0rem 0.2rem 0rem;
	filter: blur(0.02rem) drop-shadow(0 0 0.06rem light-dark(#c0c0c0, #927da5));
}

#navcontainer span {
	filter: blur(0.02rem) drop-shadow(0 0 0.06rem light-dark(#c0c0c0, #927da5)); /* "silver", "blue-magenta" */
}

#navcontainer span:hover {
	background-color: light-dark(white, #ff7597); /* "white", "medium light pink-red" */
	filter: blur(0.02rem) drop-shadow(0 0 0rem transparent);
}

#externallinkscontainer a {
	padding: 0rem 0rem 0rem 0rem;
}

#externallinkscontainer span {
	filter: blur(0.02rem) drop-shadow(0 0 0.06rem light-dark(#c0c0c0, #927da5));
}

#externallinkscontainer span:hover {
	background-color: light-dark(white, #ff7597);
	filter: blur(0.02rem) drop-shadow(0 0 0rem transparent);
}

#contactemail {
	display: flex;
	flex-direction: column;
	margin: 4rem 0rem 0rem 0rem;
}

#contactemail span {
	filter: blur(0.02rem) drop-shadow(0 0 0.06rem light-dark(#c0c0c0, #927da5));
}

#contactemail span:hover {
	color: light-dark(black, white);
}

#emailaddress {
	font-family: Inconsolata;
	border: none;
	font-size: 1.2rem;
	background-color: transparent;
	text-align: left;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
	cursor: pointer;
}

#emailaddress:hover {
	color: light-dark(#808080, #ffc5cd);
}

#addresslabel span:hover {
	color: inherit;
}

#emailcopiednotif {
	display: none;
	position: absolute;
	margin: 2.35rem 0rem 0rem 0rem;
	font-size: 0.9rem;
	color: light-dark(#808080, #ffc5cd);
}

#emailcopiednotif:hover {
	color: light-dark(#808080, #ffc5cd) !important;
}

#addresslabel {
	color: light-dark(black, white);
}

#addresslabel:hover {
	color: light-dark(#808080, #ffc5cd);
}

/* ~~~~~~ site footer ~~~~~~ */

#sitefooterlinks {
	text-align: center;
	font-size: 0.7rem;
}

#sitefooterlinks a {
	font-size: 0.8rem;
}

#sitefooterlinks a:hover {
	color: light-dark(#808080, #ffc5cd);
}

#copyright {
	font-size: 0.6rem;
	text-align: center;
	margin-top: 0.25rem;
}

#darkmodetoggle {
	font-family: Inconsolata;
	border: none;
	font-size: 0.8rem;
	background-color: transparent;
	margin: 0rem 0rem 0rem 0rem;
	padding: 0rem 0rem 0rem 0rem;
}

#darkmodetoggle:hover {
	background-color: light-dark(#808080, #ffc5cd);
}

#footerheart {
	font-size: 0.8rem;
}

/* ~~~~~~ portfolio list, gallery, and article styling ~~~~~~ */

main h1 {
	font-size: 1.2rem;
	font-weight: 400;
	font-family: Inconsolata, Monospace;
	margin: 1.4rem 1rem 1.5rem 1rem;
	color: light-dark(#ffffff, #141414);
	background-color: light-dark(#141414, #ffffff);
	filter: blur(0.02rem) drop-shadow(0 0 0.06rem light-dark(#c0c0c0, #927da5)); /* "silver", "blue-magenta" */
}

main h2 {
	margin: 1rem 0rem 1rem 0rem;
	font-weight: 600;
	filter: blur(0.02rem) drop-shadow(0 0 0.03rem light-dark(#c0c0c0, #e3dbeb)); /* "silver", "chrysler lilac" */
}

main b {
	font-weight: 600;
}

.contentitem {
	background-color: light-dark(white, transparent); /* "white", "dark pink-red" #473438 */
	margin: 0rem 0rem 0.4rem 0rem;
	padding: 0rem 1rem 0rem 1rem;
	box-shadow: 0 0 0.3rem light-dark(transparent, #191919); /* "transparent", "very dark grey" */
}

.contentitem hr:nth-last-child(1) {
	margin-top: 1.2rem;
}

.contentitem a:hover {
	color: light-dark(#808080, #ffc5cd); /* "gray", "very light pink-red" */
}

.contentitem hr {
	color: light-dark(black, white) !important;
}

.portfoliorow {
	display: flex;
	flex-direction: row;
	margin: 0.5rem 0rem 0.5rem 0rem;
}

.portfoliorow button {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

.portfoliorow button {
	display: flex;
	flex-direction: column;
	width: 50%;
	line-height: 0;
	align-items: stretch;
}

.portfoliorow button:nth-child(1) {
	margin: 0rem 0.5rem 0rem 0rem;
}

.portfoliorow button:nth-child(2) {
	margin: 0rem 0rem 0rem 0rem;
}

.portfoliorow button:nth-child(3) {
	margin: 0rem 0rem 0rem 1rem;
}

.galleryitem .portfoliorow button:nth-child(1) {
	margin: 0rem 0.5rem 0rem 0rem;
}

.galleryitem .portfoliorow button:nth-child(3) {
	margin: 0rem 0rem 0rem 0.5rem;
}

.portfoliorow button picture img,video,source,iframe {
	width: 100%;
}

.portfoliorow button:only-of-type,
.portfoliorow figure:only-of-type {
	width: 100%;
	margin: 0rem 0rem 0rem 0rem;
}

/* images/figures with captions */
.portfoliorow figure {
	width: 50%;
	margin: 0;
}

.portfoliorow figure:nth-child(1) {
	margin: 0rem 1rem 0rem 0rem;
}

.portfoliorow figure *:nth-child(2) {
	margin: 0.2rem 0rem 0rem 0rem;
}

#indexbio {
	text-align: justify;
	text-justify: inter-word;
	margin: 1em 1em 1em 1em;
	font-size: 18px;
}

#indexbio a {
	text-decoration: underline;
}

/* ~~~~~~ image modal ~~~~~~ */

dialog {
	width: 100%;
	height: 100%;
	background-color: transparent;
	border-color: transparent;
}

dialog::backdrop {
	background-color: light-dark(black, black);
	border-color: light-dark(black, black);
	opacity: 0.9;
}

#modalholder {
	position: relative;
	top: 0;
	left: 0;
	margin: 0;
}

#modalloading {
	margin: auto;
	margin-bottom: 0.2rem;
	display: block;
	width: 80%;
	max-width: 1080px;
}

#modalcontent {
	margin: auto;
	margin-bottom: 0.2rem;
	display: block;
	width: 80%;
	max-width: 1080px;
}

#modalcaption {
  margin: auto;
  margin-top: 0.2rem;
  display: block;
  width: 80%;
  max-width: 1080px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
}

#modalclose {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  height: 40px;
  width: 40px;
  z-index: 99;
}

#modalclose:hover,
#modalclose:focus {
  color: #bbb;
  text-decoration: none;
}

/* ~~~~~~ 3D 3mf viewer ~~~~~~ */
.threemf {
    width: 100%;
    aspect-ratio: 16 / 9;
}

/* ~~~~~~ mobile and small screens settings ~~~~~~ */
@media only screen and (max-width: 800px) {
    :root{
		font-size: 16px;
	}
	html {
        font-size: 16px;
    }
	body {
		flex-direction: column;
	}
	#navpane {
		display: none;
	}
	#extrapane {
		display: none;
	}
	main {
		margin: 0rem 0rem 0rem 0rem;
	}
	.portfoliorow {
		flex-direction: column;
		margin: 0.4rem 0rem 0.4rem 0rem;
	}
	.portfoliorow a,
	.portfoliorow button {
		width: auto !important;
	}
	.portfoliorow a:nth-child(1),
	.portfoliorow button:nth-child(1) {
		margin: 0rem 0rem 0.4rem 0rem !important;
	}
	.portfoliorow a:nth-child(3),
	.portfoliorow button:nth-child(3) {
		margin: 0.4rem 0rem 0rem 0rem !important;
	}
	.portfoliorow button:only-of-type,
	.portfoliorow figure:only-of-type {
	margin: 0rem 0rem 0rem 0rem !important;
	}
	main h1 {
		font-size: 1.4rem;
		margin: 0rem 0rem 0.2rem 0rem;
		display: none;
	}
	#title img {
		display: flex;
		margin: -0.1rem 0.4rem 0.1rem 0.2rem;
	}
	#title {
		justify-content: center;
	}
	#modalcontent {
		width: 99%;
	}
}