@font-face {
  font-family: 'Z003';
  src: url('fonts/Z003-MediumItalic.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'Crimson';
  src: url('fonts/Crimson-Roman.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
	font-family: 'Ailerons';
	src: url('fonts/Ailerons-Typeface.otf') format('truetype');
	font-weight: normal;
}

* {
	font-family: 'Crimson';
	color: #757575;
}

h1 {
	justify-content: center;
	font-family: 'Z003', sans-serif;
}
h2 {
	justify-content: center;
	color: #aaa;
	font-family: 'Z003', sans-serif;
}
h3,
h4,
h5 {
  color: #ddd;
  font-family: 'Z003', sans-serif;
}

b,
strong {
  color: #fff;
}

a {

}

html {
  color: #656565;
  font-family: 'Ailerons', serif;
  font-size: 1.2em;
  display: flex;
  flex-direction: row;
  justify-content: center;
  background-color: #050505;
}

head {
	font-family: 'Crimson', serif;
}
body {
  font-family: 'Crimson', serif;
  max-width: 800px;
  overflow-x: scroll;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.site-title {
  font-family: 'Z003';
  font-size: 2.5em;
  margin-bottom: 10px;
  text-align: center;
}

nav {
  font-family: 'Crimson', serif;
  display: flex;
  flex-direction: row;
  justify-content: center;
  font-size: 1.5em;  
  margin-bottom: 10px;
}

pre {
  overflow-x: scroll;
}

img {
  max-width: 100vw;
  
}

.block {
  border: 1px dotted white;
  padding: 5px 15px;
  margin: 0 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.block h1 {
  font-size: 1em;
  text-align: center;
  margin-bottom: 0;
}

.small {
  font-size: 0.8em;
}

.wave {
  background: #111;
  color: #fff;
  text-shadow: 1px 1px 10px #fff, 1px 1px 10px #ccc;
}

footer {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer hr {
  width: 100%;
}