body				{ background-color: #6C56AD; 
				  font-weight: 300;
				  font-family: "Alegreya sans", sans-serif; 
				  color: #fff; }
body > header 			{ padding: 12pt;
				  display: flex; }
body > header > *		{ flex: 1; 
				  margin: 0; }
body > header h2		{ text-align: right;
				  font-size: x-large;
				  color: #ddd;
				  font-weight: 400; }
body > header h1		{ font-weight: 500; 
				  font-variant: small-caps;
				  color: #aaa;
				  font-size: large; }
body > header a			{ color: inherit; 
				  transition: color 0.5s linear;
				  text-decoration: none; }
body > header a:hover		{ color: #fff; }
body > header h1 span		{ font-weight: 200; }
body > nav			{ position: fixed;
				  top: 50%;
				  transition: background-color 0.5s linear;
				  transform: translate(0, -50%);
				  background-color: rgba(255, 255, 255, 0.5); }
body > nav:hover		{ background-color: rgba(255, 255, 255, 0.8); }
body > nav.left			{ left: 0; }
body > nav.right		{ right: 0; }
body > nav a			{ color: #6C56AD; 
				  display: inline-block;
				  padding: 8pt 6pt;
				  text-shadow: 0px 0px 1px #fff; }
body > article			{ padding: 24pt 20%; 
				  font-size: 16pt; }
body > article > header		{ display: none; }

figure				{ margin: 0;
				  text-align: center; }
figure figcaption		{ font-size: smaller; 
				  color: #ddd; }
pre				{ background-color: rgb(248, 248, 248);
				  color: rgb(64, 64, 72);
				  font-size: smaller;
				  padding: 10px 20px 20px;
				  border-radius: 1em; }
h3				{ text-align: center;
				  font-size: 48pt;
				  font-weight: 400; }
.table				{ margin: 1em 0;
				  border-spacing: 24pt 12pt;
				  font-size: 18pt;
				  display: table; }
.table > *			{ display: table-row; }
.table > * > *			{ display: table-cell;
				  vertical-align: middle; }
.table > * > :first-child	{ font-size: 12pt; }
a				{ color: yellow; }
body > footer			{ color: #aaa; 
				  margin: 1em 0;
				  text-align: center; }
div.kbd				{ text-align: center; 
				  margin: 1em 0; }
kbd				{ font-size: smaller; }