@font-face {
	font-family: "Source Serif Pro";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: local("Source Serif Pro"), url("/assets/source-serif.woff2") format("woff2");
}

@font-face {
	font-family: "Raleway";
	src: url("/assets/raleway.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: 'Fira Mono';
	src: url("/assets/fira-mono.woff2") format("woff2");
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

body {
	background-color: white;
	color: #2e3436;
	display: flex;
	flex-direction: column;
	font-family: "Source Serif Pro", serif;
	padding-left: 2em;
	padding-right: 2em;
	font-size: 32px;
}
@media (min-width: 1100px) {
	body{
		display: grid;
		grid-template-columns: 125px 1fr;
		grid-template-rows: auto 1fr;
		grid-column-gap: 1em;
		padding-left: 7em;
		padding-right: 7em;
		font-size: 16px;
	}
}

main {
	flex: 1;
	max-width: 100ch;
}


p {
	margin: 0;
}
p + p {
	margin-top: 0.1em;
	text-indent: 3em;
}

p, ol, ul {
	line-height: 1.6;
}

.footnote-def {
	text-indent: 0em;
}

a {
	color: #888a85;
	/*color: #555753;*/
	text-decoration-style: dotted;
	white-space: nowrap;
}

a:visited {
	color: #ad7fa8;
}

a:hover {
	text-decoration-style: solid;
}

pre {
	max-width: 159ch;
	background-color: #eeeeec;
	padding-left: 5px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-left: 1.5em;
	margin-bottom: 1em;
	border-left: 2px solid #888a85;
	overflow: auto;
}

code {
	font-family: "Fira Mono", monospace;
	font-size: 0.9em;
}

nav > a, nav > a:visited {
	font-family: "Raleway", sans-serif;
	font-size: 1.6em;
	color: #2e3436;
	margin-right: 0.3em;
}

nav {
	margin-bottom: 0.5em;
}

@media (min-width: 1100px) {
	nav > a, nav > a:visited {
		margin-right: 0em;
		display: inline-block;
	}
	nav {
		margin-bottom: 0em;
		position: sticky;
		top: 0em;
	}
}

.page-header-title {
	margin-bottom: 0.5em;
}
@media (min-width: 768px) {
	.page-header-title {
		margin-top: 0px;
	}
}

.teaser-header {
	margin-bottom: 0px;
}

.teaser-tag-header {
	margin-bottom: 18px;
}

.teaser-link {
	display: block;
	text-indent: 0em !important;
}
.teaser-link::before {
	content: '(';
	color: #2e3436;
}
.teaser-link::after {
	content: ')';
	color: #2e3436;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Raleway", sans-serif;
	font-weight: normal;
}

hr {
	border-top: 1px dotted #888a85;
	border-bottom: none;
	border-left: none;
	border-right: none;
}

footer {
	font-size: 0.8em;
	text-align: center;
}

blockquote {
	margin-bottom: 0px;
}
blockquote::before {
	content: '"';
}
blockquote::after {
	content: '"';
}

.metadata {
	margin-bottom: 1em;
}
.metadata-header {
	display: block;
}
.metadata-header, .tag-link {
	font-size: 0.9em;
}

.media-container {
	margin: 1em;
}
.media-element {
	display: block;
	margin: auto;
	max-width: 100%;
	height: auto;
}
@media (min-width: 768px) {
	.media-element {
		max-height: 20em;
		width: auto;
	}
}
.media-caption {
	display: block;
	text-align: center;
	font-style: italic;
	font-size: 0.9em;
	margin-top: 0.5em;
}

.quote {
	max-width: 40em;
	margin-bottom: 1em;
}
.quote-author::before {
	content: "—";
}
.quote-author {
	margin-top: 0px;
	font-style: italic;
	display: block;
	text-align: right;
}	
@media (min-width: 1100px) {
	.topic-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		max-width: 72em;
	}
}

.topic {
	border-style: solid;
	border-width: 1px;
	border-color: #888a85;
	margin-bottom: 0.5em;
	margin-right: 0.5em;
	max-width: 35em;
	min-height: 8em;
	text-align: center;
	white-space: normal;
	color: #2e3436;
	text-decoration: none;
}

a.nostyle:link {
    text-decoration: inherit;
    color: inherit;
}

a.nostyle:visited {
    text-decoration: inherit;
    color: inherit;
}

.topic-background {
}

.topic-code {
	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8)),
					  url("/assets/coding.jpg");
}

.topic-anime {
	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8)),
					  url("/assets/anime.jpg");
	background-position: 50% 40%;
}

.topic-writing {
	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8)),
					  url("/assets/writing.jpg");
	background-position: 50% 50%;
}

.topic-other {
	background-image: linear-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8));
}

.topic-header {
	font-size: 3em;
	font-family: "Raleway", sans-serif;
	display: inline-block;
}

@media (min-width: 1100px) {
	@mixin vertical-align($position: relative) {
		position: $position;
		top: 50%;
		-webkit-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.topic-header {
		display: inline;
		@include vertical-align();
	}
}

.topic-body {
	font-size: 0.9em;
}

@media (min-width: 1100px) {
	.topic-body {
		visibility: hidden;
	}
	.topic:hover > .topic-header {
		visibility: hidden;
	}
	.topic:hover > .topic-body {
		visibility: visible;
	}
}