/* custom css follows */
:root
{
	--es-padding: 64px;
	--es-padding-half: calc(var(--es-padding) / 2);
	--es-padding-quarter: calc(var(--es-padding) / 4);
	--es-padding-eighth: calc(var(--es-padding) / 8);
	--es-header-padding: var(--es-padding);
	--es-corner-radius: var(--es-padding-eighth);

	--es-col-primary: magenta;
	--es-col-secondary: magenta;

	--es-col-bg-light-secondary: #9CD1DC;
	--es-col-bg-light-secondary-text-primary: #02416A;
	--es-col-bg-light-secondary-text-secondary: #4A6873;
	
	--es-col-bg-dark-primary: #02416A;
	--es-col-bg-dark-secondary: #4A6873;

	--es-col-accent: #E34500;

	--es-col-bg-dark-text-primary: white;
	--es-col-bg-dark-text-secondary: #9CD1DC;

	--es-col-text-primary: #02416A;;
	--es-col-text-secondary: #4A6873;
	--es-col-hover: #9CD1DC;

	--es-col-bg-light: white;
	--es-col-eyebrow: magenta;

	--es-max-width: 1200px;
	--es-min-width: 320px;
}

body
{
	min-width: var(--es-min-width);
	font-family: "Montserrat", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.hello
{
	margin-top: var(--es-padding);
	margin-bottom: var(--es-padding);
	margin-left: auto;
	margin-right: auto;
}

.content
{
	padding-top: var(--es-padding);
	padding-bottom: var(--es-padding);
}

.iconListGroups
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: 0px;
	gap: var(--es-padding);
}

.iconListContainer
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	padding: 0px;
	gap: var(--es-padding-quarter);
}

.iconListLabel
{
	color: var(--es-col-bg-dark-text-secondary);
	margin: 0px;
}

.iconList
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0px;
	gap: var(--es-padding-half);
}

.iconList li
{
	width: var(--es-padding);
	height: var(--es-padding);
	list-style: none;
	display: inline-block;
}

.iconList svg
{
	max-width: var(--es-padding);
	max-height: var(--es-padding);
	color: var(--es-col-bg-dark-text-primary);
}

.iconList li:hover
{
	outline: solid var(--es-col-bg-dark-primary) var(--es-padding-eighth);
	border-radius: var(--es-corner-radius);
}

.iconList li:hover svg
{
	background-color: var(--es-col-bg-dark-primary);
}

body
{
	background-color: var(--es-col-bg-dark-primary);
	color: var(--es-col-secondary);
	/* font-size: calc(15px + 0.390625vw); */
}

p { max-width: 1200px; }
p.imgContainer { max-width: 100%; }
.helloEric, .huge { margin: 0px; }
.helloExperience { padding-top: var(--es-padding); }

h1
{
	color: var(--es-col-primary);
	max-width: 1200px;
	font-weight: 500;
}

h2
{
	color: var(--es-col-primary);
	max-width: 1200px;
	font-weight: 500;
}

h3
{
	color: var(--es-col-primary);
	max-width: 1200px;
	font-weight: 500;
}

.outerContainer {
	background-color: var(--es-col-bg-dark-primary);
}

.outerContainerSecondary {
	background-color: var(--es-col-bg-dark-secondary);
}

.outerContainerWhite {
	background-color: var(--es-col-bg-light);
}

.outerContainerFooter {
	background-color: var(--es-col-bg-dark-primary);
	color: var(--es-col-bg-dark-text-secondary);
}

.outerContainerFooter p {
	margin: 0;
}

.mainContainer
{
	max-width: var(--es-max-width);
	padding: var(--es-padding);
	margin: 0px auto 0px;
}

.workSampleTitleContainer
{
	max-width: var(--es-max-width);
	padding: var(--es-padding-quarter) var(--es-padding) var(--es-padding-quarter) var(--es-padding);
	margin: 0px auto 0px;
}
.workSampleTitleContainer a.workSampleLabel {
	font-weight: 400;
	color: var(--es-col-bg-dark-text-secondary);
	text-decoration: none;
}

.workSampleTitleContainer a.workSampleHello {
	font-weight: 700;
	color: var(--es-col-accent);
	text-decoration: none;
}
.secondaryContainer {
	background-color: var(--es-col-secondary);
}

body { border-top: 5px solid var(--es-col-accent) }

body, p
{
	font-size: 22px;
	line-height: 1.4;
}

[data-tooltip]:hover::after {
  display: block;
  position: absolute;
  content: attr(data-tooltip);
  font-size: 14px;
  border-radius: var(--es-corner-radius);
  color: var(--es-col-bg-dark-text-primary);
  background: var(--es-col-bg-dark-primary);
  padding: var(--es-padding-quarter);
}

.authFormContainer
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	height: 100vh;
	align-items: center;
}
.authForm
{
	max-width: 600px;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--es-padding-quarter);
	padding: var(--es-padding-half);
	border-radius: var(--es-corner-radius);
	background-color: var(--es-col-bg-light-secondary);
	color: var(--es-col-bg-light-secondary-text-primary);
}

.authForm .inputContainer
{
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	gap: var(--es-padding-quarter);
}

.authForm a
{
	color: var(--es-col-bg-light-secondary-text-primary);
}
input[type=submit].authForm:hover
{
	cursor: pointer;
}

input[type=submit].authForm, input[type=button].authForm
{
	font-family: "Montserrat", sans-serif;
	display: inline-block;
	font-weight: 400;
	font-size: 22pt;
	text-decoration: none;
	background-color: var(--es-col-accent);
	color: white;
	text-shadow: none;
	border: none;
}

input[type=text].authForm
{
	width: 100%;
}

input[type=text].authForm, input[type=text].authForm
{
	font-family: "Montserrat", sans-serif;
	display: inline-block;
	font-weight: 400;
	font-size: 22pt;
	text-decoration: none;
	background-color: white;
	color: var(--es-col-bg-light-secondary-text-primary);
	text-shadow: none;
	border: 1px solid var(--es-col-bg-light-secondary-text-secondary);
}

input[type=submit].authForm:focus, input[type=text].authForm:focus
{
	outline: 2px solid var(--es-col-bg-light-secondary-text-primary);
	outline-offset: 1px;
}
.ericstonge 
{
	color: var(--es-col-accent);
	font-size: 64px;
	font-weight: 700;
}

.huge
{
	color: var(--es-col-bg-dark-text-primary);
	font-size: 64px;
}

h1 { font-size: 44px; }
h2 { font-size: 2.5em; }
h3 { font-size: 2.0em; }

.outerContainerWhite h1, .outerContainerWhite h2, .outerContainerWhite h3, p.label {
	color: var(--es-col-accent);
}

.outerContainerWhite p {
	color: var(--es-col-text-primary);
}

.eyebrow
{
	font-size: 0.8em;
	font-weight: 300;
	color: var(--es-col-eyebrow);
	margin-bottom: var(--es-padding-quarter);
}

.workSampleContainer a 
{
	color: var(--es-col-bg-light-secondary-text-secondary);
}

.workSampleContainer a:hover 
{
	color: var(--es-col-accent);
}
.workSampleContainer
{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--es-padding-quarter);
}

.workSampleContainer h2 {
	color: var(--es-col-text-secondary);
}

.workSampleContainer hr
{
	border: 0px;
	border-top: 4px solid var(--es-col-text-secondary);
	width: 100%;
}

.cardContainer
{
	text-align: left;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	gap: var(--es-padding);
	max-width: 1200px;
}

.cardContainer .card
{
	display: flex;
	flex-direction: row;
	gap: var(--es-padding-half);
	align-items: stretch;
}

@media screen and (max-width: 800px)
{
	.cardContainer .card { flex-direction: column; }
}

.cardContainer .card:hover
{
	cursor: pointer;
	/*
	background-color: var(--es-col-hover);
	outline: solid var(--es-col-hover) var(--es-padding-eighth);
    border-radius: var(--es-corner-radius);
	*/
}
.cardContainer .card:hover .description .title h1
{
	text-decoration: underline;
}

.cardContainer .card .preview
{
	flex-grow: 1;
}

.cardContainer .card .preview img
{
	aspect-ratio: 4 / 3;
	max-width: 320px;
	background-color: var(--es-col-bg-light-secondary);
	object-fit: contain;
	border: none;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}
.screenShotShadow
{
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.cardContainer .card .description
{
	flex-grow: 3;

	display: flex;
	flex-direction: column;
	gap: var(--es-padding-quarter);
}

.cardContainer .card .description .title
{
	display: flex;
	flex-direction: column;
	gap: 0;
}

.cardContainer .card .description p
{
	margin-bottom: 0px;
}

@media screen and (max-width: 991px)
{
	.ericstonge, .huge { font-size: 48px; }
	body, p { font-size: 20px; }
	h1 { font-size: 36px; }
}

@media screen and (max-width: 599px)
{
	.cardContainer .card .preview img {
		max-width: 100%;
	}
}

@media screen and (max-width: 768px)
{
	.ericstonge, .huge { font-size: 40px; }
	body, p { font-size: 18px; }
	h1 { font-size: 32px; }
}

@media screen and (max-width: 479px)
{
	.workSampleRow img.workSampleThumb { max-width: 100%; }
	.huge { font-size: 36px; }
	body, p { font-size: 16px; }
	h1 { font-size: 28px; }
}
.passwordContainer
{
	background-color: yellow;
	display: flex;
	flex-direction: row;
	gap: var(--es-padding-quarter);
	align-items: center;
	justify-content: center;
	height: 70vh;
}

.details
{
	font-size: 0.8em;
	font-weight: 400;
	color: var(--es-col-text-secondary);
	margin-bottom: var(--es-padding-quarter);
}

.titleContainer
{
	min-width: calc(320px - var(--es-header-padding) * 2);
	display: flex;
	flex-direction: column;
	gap: var(--es-padding);
	padding-bottom: var(--es-padding);
}

.titleContainerDescription { max-width: 1200px; }
.titleContainerImage { max-width: var(--es-max-width); }
.titleContainerImage img { width: 100%; }
p { margin-bottom: var(--es-padding-half); }

.fullSizeImage, .closeUpImage
{
	margin-bottom: var(--es-padding-half);
}

.closeUpImage img
{
	max-width: max-content;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.fullSizeImage img
{
	max-width: 100%;
	box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.fullSizeImage .caption, .closeUpImage .caption
{
	text-align: center;
	color: var(--es-col-bg-light-secondary-text-secondary);
	font-size: 0.8em;
	font-style: italic;
	font-weight: 500;
}
.workSampleContainer ul {
	max-width: 1200px;
	color: var(--es-col-bg-light-secondary-text-primary);
	list-style-position: outside;
	list-style-type: square;
}
.workSampleContainer ul li::marker {
	color: var(--es-col-bg-light-secondary-text-secondary);
}

.workSampleContainer ul li {
	margin-left: var(--es-padding-half);
	margin-bottom: var(--es-padding-half);
}

.projectDetailList, 
.projectDetailList a
{
	display: flex;
	flex-direction: row;
	gap: var(--es-padding);
	color: var(--es-col-bg-light-secondary-text-primary);
	list-style: none;
}

.projectDetailList .eyebrow
{
	color: var(--es-col-bg-light-secondary-text-secondary);
}