:root {
	--referencesize: 32px;
	--bodytextsize:  calc(var(--referencesize) * 0.6);
	--iconsize:      calc(var(--referencesize) * 4);
	
	--linkcolor: rgba(50, 125, 255, 1);
}

@font-face {
	font-family: futura;
	src: url("futura-medium.otf");
	font-weight: normal;
}

@font-face {
	font-family: futuralight;
	src: url("futura-light.otf");
}

@font-face {
	font-family: baskerville;
	src: url("baskerville.otf");
}



/*Text Styles*/

a:link, a:visited {
	color: black;
	text-decoration: none;
}

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

.employer {
	font-family: futura;
	font-size: calc(var(--bodytextsize) * 1.1);
	text-transform: uppercase;
	letter-spacing: 4px;
	margin: 0;
}

.grey {
	color: rgba(160, 160, 160, 1);
}

h1 {
	font-family: futura;
	font-weight: normal;
	font-size: calc(var(--bodytextsize) * 1.4);
	text-transform: uppercase;
	letter-spacing: 5px;
	margin: 0 0 var(--referencesize) 0;
}

h2 {
	font-family: futura;
	font-weight: normal;
	font-size: var(--bodytextsize);
	text-transform: uppercase;
	letter-spacing: 4px;
	margin: 48px 0 12px 0;
}

.headercontact {
	margin: 0 0 var(--referencesize) 0;
	text-align: center;
	color: white;
	text-shadow:
		0 0 32px #100020,
		0 0 32px #100020,
		0 0 32px #100020,
		0 0 16px #100020,
		0 0 8px #100020,
		0 0 4px #100020,
		0 0 2px #100020;
}

.headernavigation {
	font-family: futura;
	margin: 12px 0 9px 0;
	font-size: calc(var(--bodytextsize) * 0.9);
	text-transform: uppercase;
	letter-spacing: 3px;
}

li {
	font-family: baskerville;
	font-size: var(--bodytextsize);
	line-height: 1.4;
	margin: 0 0 0 -20px;
	padding-bottom: 3px;
	break-inside: avoid;
}

.locationdaterange {
	font-family: futuralight;
	font-size: calc(var(--bodytextsize) * 0.9);
	text-transform: uppercase;
	letter-spacing: 3px;
	margin: 0px 0 9px 0;
}

p {
	font-family: baskerville;
	font-size: var(--bodytextsize);
	line-height: 1.5;
}

.role {
	font-family: futuralight;
	font-size: calc(var(--bodytextsize) * 1.1);
	margin: 0 0 3px 0;
	line-height: 1.3;
}

.smallcaps {
	font-family: futura;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: calc(var(--bodytextsize) * 0.7);
}

ul {
	margin: 0;
}



/*Div Styles*/

.bodybackground {
	background-color: white;
	display: inline-block;
	width: 100%;
	box-shadow:
		0 0 16px #100020,
		0 0 8px #100020,
		0 0 4px #100020,
		0 0 2px #100020;
}

.columns {
	column-width: calc(var(--referencesize) * 8);
	column-gap: calc(var(--referencesize) * 2);
}

.containerbodycontent {
	max-width: 1000px;
	margin: 0 auto;
	padding: calc(var(--referencesize) * 2);
}

.containerheadercontactbutton {
	width: calc(var(--iconsize) / 5 * 2 + 8px);
	display: flex;
	justify-content: space-between;
}

.containernavigation {
	text-align: center;
	margin-top: var(--referencesize);
}

.containernavigationbutton {
	display: inline-block;
	margin: 20px -12px 0 -12px;
}

.footer {
	padding-top: calc(var(--referencesize) * 3);
	padding-bottom: calc(var(--referencesize) * 4);
	padding-left: var(--referencesize);
	padding-right: var(--referencesize);;
	margin: 0 auto;
}

.header {
	padding: var(--referencesize);
	overflow: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.spacer {
	clear: both;
	height: calc(var(--referencesize) * 3);
}

.spacerbottom {
	clear: both;
	height: var(--referencesize);
}

.textbox {
	float: right;
	width: calc(100% - var(--iconsize) - 48px);
}



/*Image Styles*/

.buttoncontactfooter {
	max-height: calc(var(--iconsize) / 2);
	margin: 0 auto;
	margin-top: calc(var(--iconsize) / 4);
	display: block;
	filter:
		saturate(0)
		brightness(2)
		drop-shadow(0 0 8px  #100020)
		drop-shadow(0 0 4px  #100020)
		drop-shadow(0 0 2px  #100020)
		;
}

.buttoncontactfooter:hover, .buttoncontactfooter:active {
	filter:
		saturate(1)
		brightness(1)
		drop-shadow(0 0 8px  #100020)
		drop-shadow(0 0 4px  #100020)
		drop-shadow(0 0 2px  #100020)
		;
}

.buttoncontactheader {
	width: calc(var(--iconsize) / 5);
	margin-top: 4px;
	filter:
		saturate(0)
		brightness(2)
		drop-shadow(0 0 4px  #100020)
		drop-shadow(0 0 2px  #100020)
		;
}

.buttoncontactheader:hover, .buttoncontactheader:active {
	filter:
		saturate(1)
		brightness(1)
		drop-shadow(0 0 4px  #100020)
		drop-shadow(0 0 2px  #100020)
		;
}

.buttonlogo:hover, .buttonlogo:active {
	border: 4px solid var(--linkcolor);
}

.buttonlogoround {
	border-radius: 50%;
}

.buttonnavigation {
	width: calc(100% / 6 - 20px);
	margin: 0 8px 64px 8px;
	filter: saturate(0) brightness(0);
}

.buttonnavigation:hover, .buttonnavigation:active {
	filter: saturate(1) brightness(1);
}

.iconinline {
	height: calc(var(--bodytextsize) * 0.7);
	margin: 0 12px 0 0;
}

.logo {
	width: var(--iconsize);
	height: var(--iconsize);
	float: left;
	margin: 2px 0 20px -4px;
	border: 4px solid rgba(255, 255, 255, 0);
}

.logopersonal {
	float: left;
	width: min(calc(var(--iconsize) / 3 / 80 * 650), calc(100% - var(--iconsize) / 4 - 64px));
	margin-right: calc(var(--iconsize) / 4);
	filter:
		drop-shadow(0 0 16px  #100020)
		drop-shadow(0 0 8px  #100020)
		drop-shadow(0 0 4px  #100020)
		drop-shadow(0 0 2px  #100020)
		;
}

.samplework {
	border: 1px solid rgba(225, 225, 225, 1);
	border-sizing: border-box;
}

.selfie {
	float: right;
	width: calc(50% - var(--referencesize) * 0.5);
	margin: 8px 0 var(--referencesize) var(--referencesize);
}



/*Mobile Layout*/
@media only screen and (max-width: 750px) {
	
	.buttonnavigation {
		width: calc(100% / 3 - 20px);
	}

	.containerbodycontent {
		padding-left: var(--referencesize);
		padding-right: var(--referencesize);
	}

	.selfie {
		display: table;
		float: none;
		width: 100%;
		margin: 0 0 var(--referencesize) 0;
	}

	.textbox {
		display: table;
		float: none;
		width: 100%;
	}
}