@font-face {
	font-family: Fira Sans Extra Condensed;
	src: url('font/FiraSansExtraCondensed-Light.ttf');
	font-weight: lighter;
}
@font-face {
	font-family: Fira Sans Extra Condensed;
	src: url('font/FiraSansExtraCondensed-Light.ttf');
	font-weight: bolder;
}
@font-face {
	font-family: Fira Sans Extra Condensed;
	src: url('font/FiraSansExtraCondensed-Black.ttf');
	font-weight: 900;
}
@font-face {
	font-family: Work Sans;
	src: url('font/WorkSans-Bold.ttf');
	font-weight: bolder;
}
@font-face {
	font-family: Work Sans;
	src: url('font/WorkSans-Light.ttf');
	font-weight: lighter;
}

@font-face {
	font-family: Fira Sans Extra Condensed;
	src: url('font/FiraSansExtraCondensed-Regular.ttf');
}
@font-face {
	font-family: Work Sans;
	src: url('font/WorkSans-Regular.ttf');
}
@font-face {
	font-family: Libre Baskerville;
	src: url('font/LibreBaskerville-Regular.ttf');
}

* {
	margin: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	align-items: center;
	flex-direction: column;

	font-size: 1.1em;
	font-family: Libre Baskerville, serif;
	padding: 8px 20px;
}
code {
	user-select: all;
	-moz-user-select: all;
	-webkit-user-select: all;

	display: inline-block;
	background-color:#eee;
	border-radius:6px;
	padding:2px;
	font-size: 1.2em;
	font-family: monospace;
}
img {
	align-self: center;
  max-width: 100%;
	max-height: 30em;
	box-shadow: -5px 5px 10px rgba(0,0,0,0.2);
	border: 1px solid rgba(0,0,0,0.2);
	margin: 5% 5px;
}

div {
	padding: 3%;
}
div.row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	justify-content: center;
}
div.content {
	max-width: 1222px;
}

h1,h2,h3,h4,h5,h6 {
	font-family: Fira Sans Extra Condensed, Sans, sans-serif;
	font-weight: normal;
}

h1 {
	font-weight: lighter;
	font-size: 3em;
	margin:10px 0;
	text-shadow: 2px 2px #aaa;
}

h3 {
	font-size: 2em;
	font-weight: normal;
	padding: 8px;
	border-bottom: 4px solid;
	margin-top: 40px;
	margin-bottom: 20px;
	box-shadow: 0 10px 15px -10px;
}

h4 {
	margin: 20px 0 10px 0;
	padding: 4px;
}

p {
	margin: 1em 0;
}