/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');

body {
	background-color: white;
	text-rendering: optimizeLegibility;
}

body header h1 {
	display: inline-block;
	margin-left: 2rem;
	margin-right: 2rem;
}

.site-title {
	text-decoration: none;
	color: #333;
}

.round {
	border-radius: 150px;
}

.coverimg {
	margin: 0 auto;
	margin-top: 2rem;
	max-width: 100%;
	width: 640px;
	overflow: hidden;
}

.coverimg img {
	max-width: 100%;
}

.centering {
	margin: 0 auto;
	display: block;
	text-align: center;
}

.coverimg:after {
	content: attr(data-caption);
	color: #999;
	text-align: right;
	display: block;
}

.hr {
	border-top: 1px solid #333;
}

body header h2 {
	max-width: 45rem;
	width: 100%;
	margin: 0 auto;
	border-bottom: 1px solid #333;
	border-top: 1px solid #333;
	font-style: italic;
	line-height: 2rem;
	font-variant: normal;
}

h3, h4, h5, h6 {
	font-family: 'Cormorant Garamond', serif;
	font-variant: small-caps;
	font-weight: 400;
	text-align: center;
}

header {
	margin-bottom: 1em;
	text-align: center;
	width: 100%;
}

section.content, header {
	margin: 0 auto;
	max-width: 45rem;
	position: relative;
	width: 100%;
	margin-bottom: 2rem;
	line-height: 1.5rem;
}

section.content.list {
	max-width: 40rem;
	margin-bottom: 0;
}

body section.content article.thumb {
	padding: 2rem 0;
}


@media (min-width: 500px) {
	section.content.list:after {
		border-left: 1px solid #333;
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		top: 0;
		transform: translate(-50%);
		z-index: -1;
	}

	body section.content article.thumb:nth-child(2n) {
		direction: rtl;
	}

	body section.content article.thumb .imgthumb {
		vertical-align: middle;
		width: 48%;
		display: inline-block;
	}

	body section.content article.thumb:nth-child(2n) .imgthumb {
		text-align: left;
	}

	body section.content article.thumb:nth-child(2n+1) .imgthumb {
		text-align: right;
	}

	body section.content article.thumb .prevtext {
		width: 50%;
		position: relative;
		display: inline-block;
		vertical-align: middle;
		direction: ltr;
	}

	body section.content article.thumb:nth-child(2n+1) .prevtext {
		text-align: left;
		left: 1rem;
		margin-left: auto;
		margin-right: 0;
	}

	body section.content article.thumb:nth-child(2n) .prevtext {
		text-align: right;
		right: 1rem;
		margin-left: 0;
		margin-right: auto;
	}
}

@media (max-width: 500px) {
	body article.thumb {
		text-align: center;
	}

	body section.content article.thumb {
		text-align: center;
	}

	body section.content article.thumb p {
		text-align: left;
		margin: 0 2rem;
	}

	p {
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	}

	header .next, header .prev {
		display: block;
	}

	header .prev {
		margin-bottom: 0.5rem;
	}
}

body section.content article.thumb img {
	border-radius: 150px;
	transition-property: border-radius;
	transition-duration: 2s;
	transition-timing-function: ease-in-out;
	width: 150px;
	height: 150px;
	display: inline-block;
}

body section.content article.thumb .square_thumb {
	border-radius: 0;
}

body section.content article.thumb img:hover {
	border-radius: 25px;
}

body article h2:before {
	content: "❦";
	display: block;
	font-family: 'Cormorant Garamond', serif, "symbola";
	font-size: 1rem;
	line-height: 1.7rem;
}

body article h2[data-accent]:before {
	content: attr(data-accent);
	display: block;
	font-family: 'Cormorant Garamond', serif, "symbola";
	font-size: 1rem;
	line-height: 1.7rem;
}

abbr {
	cursor: help;
}

a {
	transition-property: color;
	transition-duration: 0.3s;
	color: #08c;
	text-decoration: none;
}

a:hover, a:focus {
	color: #005580;
	text-decoration: underline;
}

pre {
	background-color: #f5f5f5;
	padding: 0.8rem;
	border-radius: 0.2rem;
	line-height: 1.3rem;
}

body article.thumb {
	line-height: 2.5rem;
}

body article.thumb:nth-child(2n) {
	text-align: right;
}

body article.thumb:nth-child(2n+1) {
	text-align: left;
}

body article.thumb h1 a {
	text-decoration: none;
	color: #333;
	transition-property: color;
	transition-duration: 0.3s;
	line-height: 1.2rem;
	font-size: 2rem;
}

body article time {
	display: block;
	color: #999;
	position: relative;
	top: -1rem;
}

body article h1 a:hover {
	color: #999;
}

body footer {
	text-align: center;
}

.label {
	text-decoration: none;
	color: #333;
	font-size: smaller;
	font-weight: bold;
}

.pull-right {
	float: right;
}

.pull-left {
	float: left;
}

address {
	margin: 0 auto;
	width: 15rem;
}

dl.dl-horizontal dt {
	clear: both;
	float: left;
	font-weight: bold;
	color: #333;
}

dl.dl-horizontal dd {
	position: relative;
	left: 1rem;
}

.entry-title {
	font-size: 2rem;
	font-weight: normal;
}

footer nav {
	margin: 1rem auto;
	position: relative;
	max-width: 45rem;
	width: 100%;
}

.next {
	display: inline-block;
	margin-right: 0.5rem;
}

.next:before {
	content: "↑";
	display: inline-block;
	margin-right: 0.3rem;
}

.prev {
	display: inline-block;
	margin-left: 0.5rem;
}

.prev:after {
	content: "↓";
	display: inline-block;
	margin-left: 0.3rem;
}

.disable, .disable:focus, .disable:hover, .disable:active {
	color: #ccc;
	text-decoration: none;
}

.badge {
	border-radius: 0.5rem;
	display: inline-block;
	padding: 0.2rem 0.5rem;
	font-weight: bold;
	color: #fff;
	white-space: nowrap;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	vertical-align: baseline;
	background-color: #999;
	font-size: x-small;
}

.badge-success {
	background-color: #468847;
}

blockquote {
	font-style: italic;
	position: relative;
	font-size: 0.9rem;
	line-height: 1.5rem;
	border-left: 4px solid rgba(153,153,153,0.5);
	padding-left: 1.5rem;
	margin: 1rem auto;
	width: 50%;
}

blockquote footer {
	text-align: left;
	margin: 0;
}

blockquote footer cite, blockquote footer cite a, blockquote footer cite a:hover {
	color: #999;
}

blockquote footer cite:before {
	content: " — ";
}

.pullquote-right:before {
	padding: 0;
	border: none;
	content: attr(data-pullquote);
	float: right;
	width: 45%;
	margin: .5rem 0 1rem 1.5rem;
	position: relative;
	top: 7px;
	font-size: 1.4rem;
	line-height: 1.45rem;
	font-family: "Helvetica Neue",Arial,sans-serif;
}

.poem {
	max-width: 30rem;
	margin: 0 auto;
}