@font-face {
    font-family: 'FertigoProRegular';
    src: url('../font/Fertigo_PRO-webfont.eot');
    src: url('../font/Fertigo_PRO-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/Fertigo_PRO-webfont.woff') format('woff'),
         url('../font/Fertigo_PRO-webfont.ttf') format('truetype'),
         url('../font/Fertigo_PRO-webfont.svg#FertigoProRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 400;
  src: url("../font/Inter-UI-Regular.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-Regular.woff?v=2.2") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 400;
  src: url("../font/Inter-UI-Italic.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-Italic.woff?v=2.2") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 500;
  src: url("../font/Inter-UI-Medium.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-Medium.woff?v=2.2") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 500;
  src: url("../font/Inter-UI-MediumItalic.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-MediumItalic.woff?v=2.2") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 700;
  src: url("../font/Inter-UI-Bold.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-Bold.woff?v=2.2") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 700;
  src: url("../font/Inter-UI-BoldItalic.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-BoldItalic.woff?v=2.2") format("woff");
}

@font-face {
  font-family: 'Inter UI';
  font-style:  normal;
  font-weight: 900;
  src: url("../font/Inter-UI-Black.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-Black.woff?v=2.2") format("woff");
}
@font-face {
  font-family: 'Inter UI';
  font-style:  italic;
  font-weight: 900;
  src: url("../font/Inter-UI-BlackItalic.woff2?v=2.2") format("woff2"),
       url("../font/Inter-UI-BlackItalic.woff?v=2.2") format("woff");
}

body {
	width: 80%;
	margin: 1em auto 6em;
	max-width: 1100px;
	font-size: 21px;
	font-family: 'Inter UI', sans-serif;
	background-color: #fefefe;
	color: #333;
}

header {
	overflow: hidden;
}

header h1 {
	font-family: FertigoProRegular, serif;
	font-size: 2em;
	float: left;
}

header img {
	max-height: 100px;
	vertical-align: middle;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
	text-decoration: none;
	color: #333;
}

#hcard {
	float: right;
	margin: 0.67em 0;
	padding: 0 0.67em;
	text-align: right;
	border-right: 4px solid #e1a1a1;
}

#hcard span,
#hcard a {
	display: block;
	font-size: 16px;
}

section h1,
section h2,
section h3 {
	margin-left: -20px;
}

a:link,
a:visited {
	color: #68a0b7;
}

a:hover,
a:active {
	text-decoration: underline;
	color: #e1a1a1;
}

.side-image {
	display: inline-block;
	float: right;
	max-width: 33%;
	margin-left: 20px;
	padding: 5px;
	border: 1px solid #eee;
}

footer {
	margin-top: 4rem;
	text-align: center;
}

@media screen and (max-width: 667px) {
	body {
		width: 90%;
		font-size: 18px;
	}
	
	section h1 {
		font-size: 1.5em;
		text-align: center;
		border-bottom: 2px solid #e1a1a1;
	}
	
	section h1,
	section h2,
	section h3 {
		margin-left: 0;
	}
	
	header h1 {
		float: none;
	}
	
	#hcard {
		float: none;
		text-align: left;
		border-right: none;
		border-left: 4px solid #e1a1a1;
	}
	
	.side-image {
		float: none;
		display: block;
		max-width: 90%;
		margin: 20px auto;
	}
	
	
}