@font-face {
	font-family: "Sonora Pro OT";
	src: url('sonora-pro-ot-bold.otf');
	/*url('sonora-pro-ot-bold.otf');*/
}

a:link {
	text-decoration: none;
}

body {
	display: flex;
	flex-direction: column;
	font-size: 12pt;
	min-height: calc(100vh - 5em);
	margin: 1.5em 5em;
}

footer {
	text-align: center;
	margin-top: auto;
}

header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

html {
}

h1 {
	color: rgb(2, 61, 106, 1.0);
	font-family: "Sonora Pro OT", sans-serif;
	font-size: 450%;
	font-weight: bold;
	text-align: center;
	flex-basis: 50%;
}

h1 span {
	display: inline-block;
	overflow: hidden;
	width: 2px;
}

h2 {
	color: rgb(252, 0, 20, 1.0);
	/*font-family: "Sonora Pro OT", sans-serif;*/
	font-family: "Arial", "Helvectica", "Verdana", sans-serf;
	font-size: 250%;
	font-weight: bold;
	text-align: center;
}

hr {
	border: 0;
	clear: both;
	height: 1px;
}

nav {
	border-bottom: 2px solid rgb(2, 61, 106, 1.0);
	font-family: "Arial", "Helvectica", "Verdana", sans-serf;
	font-size: 200%;
	list-style: none;
	padding: 0.5em;
	text-align: center;
}

ul li,
nav li {
	display: inline;
}

nav li a:link {
	color: black;
	padding: 0 1.5em;
}

nav li a:visited {
	color: darkgray;
}

nav li a.current:visited,
nav li a.current:link {
	color: rgba(145, 40, 30, 1.0);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

nav li a:hover,
nav li a.current:hover {
	background-color: rgb(2, 61, 106, 1.0);
	color: white;
}

nav hr {
	margin: 0;
	padding: 0;
}

p {
	color: rgb(2, 61, 106, 1.0);
	font-size: 150%;
	font-weight: bold;
	letter-spacing: -0.075em;
}

.blocklink {
	display: inline-block;
	text-align: center;
	width: 270px;
}

.main {
	display: flex;
	flex-direction: row;
}

.row {
	text-align: right;
	margin-top: 2em;
}

.split50 {
	margin: 0.5em 2em;
	text-align: left;
	width: 50%;
}

.va {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#social {
	display: flex;
	flex-direction: row-reverse;
	flex-basis: 20%;
}

#social li {
	padding-left: 1em;
}

#social li img {
	height: 50%;
}

#avatar {
}

@media only screen and (max-width: 1100px) {
	header {
		display: flex;
		flex-direction: column;
		align-items: space-between;
	}

	nav li {
		display: block;
		margin: 0.5em 1em;
	}

	#social {
		display: flex;
		flex-direction: row-reverse;
		flex-basis: auto;
		justify-content: center;
	}

	#social li img {
		height: 100%;
	}

	body {
		min-height: calc(100vh - 13em);
	}

	footer {
		font-size: 14pt;
	}
}

@media only screen and (max-width: 1100px) {
	.blocklink {
		width: 200px;
	}

	.blocklink img {
		width: 75%;
	}

	.va {
		margin-left: 0;
		margin-right: 0;
	}
}