body					{	background-color: #fefefe;
						margin: 0; padding: 2em 0; }
body,
h1,
h2,
h3,
p,
li					{	@extend .font-serif;
						@extend .font-normal	;
						line-height: 1.2em; }

h1					{	font-size: 2.3em;
						color: $accent;
						text-align: center; }

h2, h3				{	margin-top: 3em; }
h2					{	font-size: 1.3em; }
h3					{	font-family: $sans;
						font-size: 0.9em;
						text-transform: uppercase;
						letter-spacing: 0.05em;  }

p					{	}

ol					{	margin: 0; padding: 0 0 0 1em; }

a:link,
a:visited			{	color: $accent; }
a:hover				{	color: #222; }

pre, code			{	background-color: rgb(240,240,240);
						font-family: 'Menlo', 'Monaco', 'Andale Mono', monospace;
						font-size: 0.75em; color: rgb(99,33,150); }
pre					{	width: 100%; overflow-x: scroll;
						box-sizing: border-box;
						padding: 0.5em 1em;
						tab-size: 4; }

dt, dd				{	float: left; margin-bottom: 1.2em; }
dt					{	clear: both; width: 30%; }
dd					{	width: 60%; }

dl:after				{	clear: both; display: block;
						content: ''; }

/// STRUCTURE

.article-center		{	width: 30em;
						margin-left: auto; margin-right: auto; }
.badge				{	width: 75%; height: 0; padding-bottom: 0.75*75%;
						margin: 0 auto; }
						
.badge img			{	width: 100%; height: auto; }


@media only screen and (max-width: $phone) {

	.font-normal			{	font-size: $normal-size-sl; }
	
	body					{	padding: 1.5em; }
	
	.article-center		{	width: 100%; }

}