@font-face {
  font-family: "IBM Plex Mono";
  src: url(fonts/IBMPlexMono.ttf);
}
/* 
Colors:
	Blue Background: #152638
	White Text: #f8f9f2
	Green Links: #00eb39
	Hover and Accent: #f1ca55
	Gray Text: #838c95
	Purple Callout: #6f4ebc
 */
 
 html {
 	background: #152638;
 }

body {
	font-family: "IBM Plex Mono", monospace;
	font-weight: 400;
	width: 90%;
	margin: 0 auto;
	color: #f8f9f2;
}

h1 {
	font-size: 1.8em;
	margin-top: 1em;
	font-weight: 400;
}

h2 {
	font-size: 1.6em;
	margin-top: 0em;
	font-weight: 400;
}

header {
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-top: 3em;
	text-align: center;
}

header img {
	width: 10em;
	border-radius: 100%;
	box-shadow: 1px 1px 10px 1px rgba(0,0,0,.5);
	transition: transform .5s;
}

header img:hover {
	transform: scale(1.1);
}

.thanks {
	text-align: center;
}

.thanks-return {
	margin-top: 4em;
	display: inline-block;
}

a {
	color: #00eb39;
	text-decoration: none;
	transition: color .5s ease-out;
}

a:hover {
	color: #f1ca55;
	text-decoration: underline;
}

.bold {
	font-weight: 700;
}

.divider {
	width: 98%;
	border-bottom: 1px solid rgba(241, 202, 85, .5);
	margin: 3em auto 3em;
}

.bio, #contact, #questionnaire {
	max-width: 580px;
	margin: 0 auto 3em;
}

.bio p {
	margin-bottom: 1.6em;
}

.callout {
	background: #6f4ebc;
	width: 7.5em;
	height: 1.7em;
	margin: 0 auto;
	font-size: 1.1em;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: .25em;
	box-shadow: 1px 1px 10px rgba(0,0,0,.5);
}

.callout:hover {
	background: rgba(111, 78, 188, .8);
	transform: scale(1.1);
	transition: transform .5s;
}

.callout a {
	color: #f8f9f2;
	text-decoration: none;
}

.callout:hover a {
	color: rgba(248, 249, 242, .8);
}

#portfolio img {
	max-width: 111.11%;
	margin: 0 -5.55%;
}

.portfolio-left, .portfolio-right {
	margin-top: 3em;
}

ul {
	list-style: square;
}

#experience {
	max-width: 768px;
	margin: 0 auto 3em;
}

#contact-form, #questionnaire-form {
	display: flex;
	flex-direction: column;
	margin-top: 3em;
}

form input, form textarea {
	font-family: "IBM Plex Mono", monospace;
	font-size: 1em;
	margin-bottom: 1.5em;
	color: #f8f9f2;
	border-radius: .25em;
}

.field, .full-field {
	border: 1px solid #838c95;
	background: none;
	-webkit-appearance: none;
	padding-left: 5px;
}

.field:focus, .full-field:focus {
	border: 1px solid #f1ca55;
	outline: none;
}

.field {
	width: auto;
}

.full-field {
	height: 10em;
	margin-left: 0;
}

#client-address {
	height: 5em;
	margin-left: 0;
}

label {
	margin-bottom: .5em;
}

.fieldset {
	margin-top: 2em;
}

#contact-send, #client-send {
	-webkit-appearance: none;
	width: 7em;
	height: 1.7em;
	border-radius: .25em;
	background: #6f4ebc;
	font-size: 1.1em;
	box-shadow: 1px 1px 10px rgba(0,0,0,.5);
	border: none;
}

#contact-send:hover, #client-send:hover {
	background: rgba(111, 78, 188, .8);
	transform: scale(1.1);
	transition: transform .5s;
	color: rgba(248, 249, 242, .8);
}

.elsewhere {
	display: flex;
	justify-content: center;
	margin-top: 2em;
}

.elsewhere img {
	height: 2.5em;
	width: 2.5em;
	margin: 0 1.5em;
	filter: invert(1);
}

.elsewhere img:hover {
	transform: scale(1.1);
	transition: transform .5s;
}

footer p {
	text-align: center;
	color: #838c95;
	margin-bottom: 3em;
	font-size: .9em;
}

@media only screen and (min-width: 550px) {
	header {
		flex-direction: row;
		justify-content: center;
	}
	
	.title {
		margin-left: 3em;
	}
	
	.divider {
		margin-top: 3em;
		width: 485px;
	}
	
	#portfolio img {
		max-width: 100%;
		margin: 0 0;
	}
	
	.field {
		width: 55%;
	}
}

@media only screen and (min-width: 700px) {
	body {
		max-width: 1024px;
	}
	
	.portfolio-left {
		display: flex;
		align-items: center;
	}
	
	#portfolio img {
		width: 45%;
		height: auto;
	}
	
	.portfolio-left .portfolio-description {
		margin-left: 2em;
	}
	
	.portfolio-right {
		display: flex;
		align-items: center;
		flex-direction: row-reverse;
	}
	
	.portfolio-right .portfolio-description {
		margin-right: 2em;
	}
}

@media only screen and (min-width: 900px) {
	#portfolio img {
		width: 52%;
	}
	
	.portfolio-right, .portfolio-left {
		margin-top: 4em;
	}
}