body {
  	display: flex;
  	min-height: 100vh;
  	flex-direction: column;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	background: transparent;
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on January 13, 2019 */
@font-face {
    font-family: 'simplificasimplifica';
    src: url('../fonts/simplifica_typeface-webfont.woff2') format('woff2'),
         url('../fonts/simplifica_typeface-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
#site-body {
	display: flex;
 	flex: 1;
	margin-top: 32px;
}
#site-content, #header-middle {
	flex: 0 0 100%;
	max-width: 980px;
}
#site-content {
	background-color: white;
	width: 100%;
	margin-bottom: 32px;
}
#site-content h1 {
	padding: 0 10px;
	text-align: center;
	font-family: 'simplificasimplifica';
	font-size: 64px;
}
#site-content p {
	padding: 0 10px;
	font-size: 18px;
	text-align: center;
}
#header-left, #header-right {
	flex: 1;
}
#site-left-column, #site-right-column {
  /* 12em is the width of the columns */
	flex: 1;
	background-color: #e9eaea;
}
#header-left {
	order: -2;
	left:0;
}
#site-left-column {
  /* put the nav on the left */
	order: -1;
	left:0;
}
header {
	display: flex;
	flex: 1;
	height: 32px;
	background-color:white;
	position: fixed;
	top: 0;	
	right:0;
	left:0;
	/*padding-left: 10px;*/
	border-bottom: solid #cccccc 1px;
	box-shadow: 0px 1px #e9eaea;
}
#site-logo {
	width: 32px;
	height: 32px;
	background: url('../images/B1.svg');
	border-style: none;
	margin-left: 10px;
	/*margin-left: calc(50% - 480px);*/
}
#site-logo:hover {
	background: url('../images/B2.svg');
	cursor: pointer;
	-webkit-appearance: none;
}
*:focus {
	outline: none;
	-webkit-appearance: none;
}
#nav-links {
	display: inline-block;
	float: right;
	/*margin-right: calc(50% - 480px);*/
}
#contact, #resume {
	float:right;
	font-size: 16px;
	margin-top: 8px;
	padding-right:10px;
}
#contact span:hover {
	cursor: pointer;
	border-bottom: 2px solid #a840ff;
}
#resume span:hover {
	cursor: pointer;
	border-bottom: 2px solid #4d4dff;
}

#contact a, #resume a {
	text-decoration: none;
	color: black;
}
#contact-form {
	width: calc(100% - 20px);
	max-width: 500px;
	margin: 0 auto;
	/*margin-left: calc(50% - 250px);*/
}
#contact-form h4 {
	line-height: 0px;
}
#contact-form input {
	height:35px; 
	width: 100%;
	font-family: inherit;
	padding-left: 10px;
	font-size: 10pt;
	margin-top: 0px;
	margin-bottom: 10px;
	/*prevents input box from overlflowing */
	-webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
    box-sizing: border-box;
	border: #e9eaea 1px solid;
}
#contact-form textarea {
	font-family: inherit;
	font-size: 10pt;
	padding: 10px 10px 0 10px;
	width:100%;
	/*prevents textarea box from overlflowing */
	-webkit-box-sizing: border-box;
   	-moz-box-sizing: border-box;
    box-sizing: border-box;
	border: #e9eaea 1px solid;
}
#contact-form input:focus, #contact-form textarea:focus {
	-moz-box-shadow: 0 0 3px #ccc;
	-webkit-box-shadow: 0 0 3px #ccc;
	box-shadow: 0 0 3px #ccc;
}
#contact-form button {
	/*margin-right: 0px;*/
	background-color: #4d4dff;
	color: white;
	border: 1px solid white;
	/*padding: 10px 10px;*/
	font-size: 16px;
	width: 100%;
	height:35px;
	text-align: center;
	/*border-radius: 10px;*/
}
#contact-form button:hover {
	background-color: #a840ff;
	cursor: pointer;
}
.contact-error{font-size: 10pt; color: #FF7F00; display: none;}
input:invalid {
	box-shadow: none;
}
@media only screen and (min-device-width:320px) and (max-device-width: 480px)  {
	/* smartphones, iPhone, portrait 480x320 phones */ 
	#contact-form input, #contact-form textarea {font-size: 16px;}
	header {
		bottom: 0;
		top: auto;
		border-bottom: none;
		border-top: solid #cccccc 1px;
		box-shadow: 0px -1px #e9eaea;
	}
	body {min-height: auto;}
	#site-body {margin-bottom: 64px; margin-top: auto;}
}
@media (min-device-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-device-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-device-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-device-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-device-width:1281px) { /* hi-res laptops and desktops */ }