/*
 *	******** Web font ********
 */

@font-face {
	font-family: 'Jost*';
	src: url('jost-400-book.eot');
	src:
		local('Jost* 400 Book'), local('Jost-Book'),
		url('jost-400-book.eot?#iefix') format('embedded-opentype'),
		url('jost-400-book.woff2') format('woff2'),
		url('jost-400-book.woff') format('woff'),
		url('jost-400-book.svg#Jost-Book') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Jost*';
	src: url('jost-400-book-italic.eot');
	src:
		local('Jost* 400 Book Italic'), local('Jost-BookItalic'),
		url('jost-400-book-italic.eot?#iefix') format('embedded-opentype'),
		url('jost-400-book-italic.woff2') format('woff2'),
		url('jost-400-book-italic.woff') format('woff'),
		url('jost-400-book-italic.svg#Jost-BookItalic') format('svg');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Jost*';
	src: url('jost-700-bold.eot');
	src:
		local('Jost* 700 Bold'), local('Jost-Bold'),
		url('jost-700-bold.eot?#iefix') format('embedded-opentype'),
		url('jost-700-bold.woff2') format('woff2'),
		url('jost-700-bold.woff') format('woff'),
		url('jost-700-bold.svg#Jost-Bold') format('svg');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Jost*';
	src: url('jost-700-bold-italic.eot');
	src:
		url('jost-700-bold-italic.eot?#iefix') format('embedded-opentype'),
		url('jost-700-bold-italic.woff2') format('woff2'),
		url('jost-700-bold-italic.woff') format('woff'),
		url('jost-700-bold-italic.svg#Jost-BoldItalic') format('svg');
	font-weight: bold;
	font-style: italic;
}

/*
 *	******** Document rules ********
 */

html
{
	background-color: #adf;
	background-image: radial-gradient(circle, #adf, #efa);
	min-height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	font-family: 'Jost*', sans-serif;
	font-size: 1.2rem;
	line-height: 1.2rem;
}

@media screen and (min-width: 981px) {
	body
	{
		max-width: 960px;
		margin: 2em auto 6em auto;
		box-shadow: 0 0.25em 1em #158;
		border-radius: 6em 6em 2em 2em;
	}
}

@media screen and (max-width: 980px) {
	body
	{
		margin: 0;
	}
}



h1, h2, h3, h4, h5, h6
{
	color: #bd3;
	line-height: 1.5em;
	margin-top: 1em;
	padding-top: 0;
	margin-bottom: 0.5em;
	padding-bottom: 0;
}

img
{
	vertical-align: top;
	max-width: 100%;
	height: auto;
}

p
{
	margin: 0 0 0.75em 0;
	padding: 0;
}

p, li
{
	line-height: 1.5em;
}

a, a:link
{
	color: #158;
	font-weight: bold;
	text-decoration: none;
}

a:visited
{
	color: #036;
	font-weight: bold;
	text-decoration: none;
}

a:focus, a:hover, a:active
{
	text-decoration: underline;
}


a:focus, a:hover
{
	color: #27b;
}

a:active
{
	color: #4ae;
}

body > header
{
	background-color: #fff;
	text-align: center;
}

@media screen and (min-width: 981px) {
	body > header
	{
		padding: 4em 0 3em 0;
		border-radius: 6em 6em 0 0;
	}
}

@media screen and (max-width: 980px) {
	body > header
	{
		padding: 2em 1em;
	}
}

body > header h1
{
	margin: 0;
	padding: 0;
}

body > nav
{
	color: #fff;
	background-color: #158;
	background-image: radial-gradient(circle, #158, #bd3);
	margin: 0;
	padding: 0.5em 0;
	text-align: center;
	letter-spacing: 0.15em;
}

@media screen and (min-width: 981px) {
	body > nav
	{
		font-size: 1.5rem;
		line-height: 1.5rem;
	}
}

body > nav ul
{
	margin: 0;
	padding: 0;
}

body > nav ul li
{
	display: inline;
	line-height: 1em;
	margin: 0;
	padding: 0;
}

body > nav a, body > nav a:link
{
	color: #fff;
	display: inline-block;
	text-transform: uppercase;
	font-weight: bold;
	border-radius: 0.25em;
	text-decoration: none;
	margin: 0;
	padding: 0.5em 1em;
}

body > nav a:focus, body > nav a:hover, body > nav a:active
{
	transition: 0.2s;
	transition-timing-function: ease-out;
	color: #158;
	background-color: #fff;
	border-radius: 0.25em;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: none;
}

body > main
{
	color: #333;
	background-color: #fff;
	padding: 1em 0 2em 0;
}

@media screen and (min-width: 981px) {
	body > main
	{
		max-width: 960px;
		margin: 0 auto;
		border-radius: 0 0 2em 2em;
	}
}

body > main article
{
	margin: 0;
}

@media screen and (min-width: 981px) {
	body > main article
	{
		margin: 0.5em 4em;
	}
}

@media screen and (max-width: 980px) {
	body > main article
	{
		margin: 0 2em;
	}
}

body > main article#newest
{
	margin: 0 3em;
	padding: 1em;
	color: #fff;
	background-color: #27b;
	border-radius: 1em;
}

body > main article#newest p
{
	margin: 0;
	padding: 0;
	line-height: 1em;
}

body > main article#newest a, footer a, body > main article#newest a:link, footer a:link
{
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}

body > main article section.tags h6, body > main article section.comments h6
{
	border-top: 1px solid #27b;
	margin: 1.5em 0 0.5em 0;
	padding: 0.5em 0 0 0;
	font-size: 1rem;
}

body > main article section.tags h6::after, body > main article section.comments h6::after
{
	content: ':';
}

body > main article section.tags ul
{
	margin: 0;
	padding: 0;
}

body > main article section.tags li
{
	display: inline;
}


body > main article section.tags li a, body > main article section.tags li a:link
{
	display: inline-block;
	color: #fff;
	background-color: #bd3;
	margin: 0;
	font-size: 0.8em;
	padding: 0.25em 0.75em;
	text-decoration: none;
	border-radius: 1em;
	transition: 0.2s;
	transition-timing-function: ease-out;
}

body > main article section.tags li a:focus, body > main article section.tags li a:hover
{
	color: #fff;
	background-color: #158;
	transition: 0.2s;
	transition-timing-function: ease-out;
}

/*
 *	******** Footer ********
 */

footer
{
	color: #fff;
	background-color: #158;
	padding: 0.5em 1em;
}

@media screen and (min-width: 981px) {
	footer
	{
		max-width: 960px;
		position: fixed;
		color: #fff;
		background-color: #158;
		bottom: 0;
		right: 0;
		margin: 0 2em 0 0;
		padding: 0.5em 1em;
		border-radius: 1em 1em 0 0;
		transition: 0.2s;
		transition-timing-function: ease-out;
	}
}

@media screen and (max-width: 980px) {
	footer
	{
		color: #fff;
		background-color: #158;
		padding: 0.5em 1em;
	}
}


footer:focus, footer:hover
{
	background-color: #27b;
}

@media screen and (min-width: 981px) {
	footer:focus, footer:hover
	{
		padding: 0.5em 1em 1.5em 1em;
		transition: 0.2s;
		transition-timing-function: ease-out;
	}
}

footer:active
{
	background-color: #4ae;
}