/* Base */

:root {
	--page-background: #ffffff;
	
	--text-color: #28303c;
	--text-color-faded: #28303c75;
	--text-color-extra-faded: #6d7c9467;
	--text-shadow-color: #1414141a;
	
	--selection-background: #fbff28; 
	
	--blockquote-background-color: rgba(231, 231, 231, 0.15);
	--blockquote-leading-color: var(--link-color);	
	
	--hr-border-color: #d4d4d4;
	
	--link-color: #0086a5;
	--link-decoration-color: #0086a53f;
	--link-hover-color: #347EFF;
	--link-color-active: #063588;
	--link-transition-time: 0.20s;
	--link-transition-mode: cubic-bezier(0.36, 0.61, 0.18, 0.94);
}

/* Query */

@media (prefers-color-scheme: light) {}
@media (prefers-color-scheme: dark) {}

@media screen and (max-width: 550px) {
	
	body {
		font-size: 1.1em !important;
	}
	
}

/* Page */

* {
	margin: 0;
	padding: 0;
}

html {
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
	scroll-behavior: smooth;
}

body {
	padding: 0 1em;
	margin: auto;
	
	max-width: 30em;	
	
	background: var(--page-background);	
	color: var(--text-color);
	
	/* font-family: novel-pro, sans-serif;	 */
	/* font-family: adobe-caslon-pro, sans-serif;	 */
	/* font-family: mrs-eaves-xl-serif; */
	font-family: source-serif-pro;
	font-weight: 400;
	font-style: normal;
	
	font-size: 1.2em;

	line-height: 1.6em;	
	font-synthesis: none;
}

::selection {
	background: var(--selection-background);
}

/* Elements */

a {
	color: var(--link-color);
	text-decoration-color: var(--link-decoration-color);
	text-underline-offset: 0.125em;
	text-decoration-thickness: 0.05em;
	transition: 
		text-decoration-color var(--link-transition-time) var(--link-transition-mode),
		color var(--link-transition-time) var(--link-transition-mode);
}

a:hover {
	color: var(--link-hover-color);
	text-decoration-color: var(--link-hover-color);
}

a:active {
	color: var(--link-color-active);
	text-decoration-color: var(--link-color-active);
}

hr {
	border: none;
	border-top: 0.5px solid var(--hr-border-color);
}

/* Header & Footer */

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 2.5em;
	margin-bottom: 2em;
	
	font-family: ff-more-web-pro-condensed, sans-serif;
}

header nav a {
	font-weight: 400;
	font-style: normal;
	font-size: 1em;

}

header nav a:not(:first-of-type) {
	margin-left: 1.0em;
}

header #header-div {
	display: inline-flex;
	align-items: center;
}

header #header-div a, header #header-div a:hover {
	text-decoration: none;
	color: var(--text-color);
}

header #header-title {
	font-weight: 600;
	font-style: normal;
	font-size: 1.4em;

	color: var(--text-color);	
}

footer {
	margin-top: 4em;
	margin-bottom: 4em;
	color: var(--text-color-faded);	
}

footer p#copyright {	
	font-family: ff-more-web-pro-condensed, sans-serif;
	font-size: 1em;
	text-align: center;
}

/* Content */

.content {

}

.content div.title { 
	text-align: center;
	padding: 1em;
	margin-top: 5em;
	margin-bottom: 3em;
	line-height: 2em;
}

.content div.title a { 
	color: var(--text-color);
	text-decoration: none;
}

.content div.title h1 {
	font-size: 1.75em;	
	margin-bottom: 0.25em;
}

.content div.title h2 {
	font-size: 1.25em;
	font-weight: normal;
}

.content div.archive-title { 
	text-align: center;
	padding: 1em;
	line-height: 2em;
}

.content div.archive-title a.archive-title-link-hide {
	color: var(--text-color);
	text-decoration: none;
}

.content div.archive-title h1 {
	font-size: 1.75em;	
	margin-bottom: 0.25em;
}

.content div.archive-title h2 {
	font-size: 1.25em;
	font-weight: normal;
}

.content p {
	padding: 1em 0;
}

.content blockquote {
	background-color: var(--blockquote-background-color);
	border-left: 0.15em solid var(--blockquote-leading-color);
	margin: 1em 0;
	padding: 1em 2em;
}

.content ul, .content li {
	margin: 0;
	padding: 0.5em 0;
	font-size: 1.2em;
	list-style-position: inside;
	list-style-type: none;
	text-align: center;
}

.content ul.contact-ul, .content li.contact-li {
	margin: 0 0.5em;
	padding: 0.2em 0;
	list-style-position: outside;
	list-style-type: square;
	color: var(--text-color);
}

.dinkus {
  text-align: center;
  margin: 2em;
  color: var(--text-color-extra-faded);
}

.dinkus::before {
  content: "***";
  font-size: 1.25em;
  letter-spacing: 1em;
}

#story-navigation {
	margin-top: 8em;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;	
	font-size: 0.75em;
	line-height: 1.5em;
}

.story-side {
	width: 40%;
}

.story-side-single {
	width: 90%;
}

.story-side-left {
	text-align: center;
}

.story-side-right {
	text-align: center;
}

#story-navigation h4 a {
	color: var(--text-color);
	text-decoration: none;
}

#story-navigation h3 {
	font-size: 1.15em;
}

#story-navigation h4 {
	font-size: 1em;
}

.story-arrow {
	color: var(--text-color-faded);
}

hr.footer {
	margin-top: 2em;
}