Import CSS reset and base styles */
@import "global.css";

html {
	height: 100%;
}

body {
	background-color: #fce6fc;
	font-family: schoolbook, garamond, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 12pt;
	line-height: 1.2em;
	margin: 0;
	color: #444;
}

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

.gutter {
	padding: 1em 8em;
}

/* this centers images correctly */
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items:center;
}

.post-feed {
	margin: 2em 0em;
	text-align: center;
	font-family: typeka, sans-serif;
}

.post-link {
	margin-bottom: 1em;
}
.post-link a {
	text-transform: lowercase;
	font-size: 1.5em;
}

.post-title {
	font-size: 2em;
	font-family: typeka, sans-serif;
	text-transform: lowercase;
	text-align: center;
	margin-bottom: 1em;
}

.post-title .post-nav a::before {
	font-family: adorn-ornaments, sans-serif;
	vertical-align: middle;
	color: black;
	text-decoration: none;
}
.post-nav a::before {
	content: "t" / "Navigate to previous or next post";
	display: inline-block;
}
.post-nav-next a::after {
	transform: scaleX(-1);
}

	blockquote {
		font-style: italic;
	}

	.unbullet {
		list-style-type: none;
	}

	.unbullet > li {
		margin-bottom: 0.6em;
	}

	span[title] {
		background-color: pink;
		padding: 0.1em;
		border-radius: 0.3em;
	}

	/* hovering tooltips based using title attribute */
	@media (pointer: coarse), (hover: none) {
		span[title] {
			position: relative;
			display: inline-flex;
			justify-content: center;
		}

		span[title]:hover::after {
			content: attr(title);
			position: absolute;
			top: 90%;
			color: #000;
			background-color: #fff;
			border: 1px solid;
			border-radius: 0.3em;
			width: fit-content;
			padding: 0.3em;
			tabindex: 1000;
		}
	}

	.wrap {
		background-color: #fff;
		padding: 30px;
		max-width: 600px;
		margin: 0 auto;
		border-radius: 12px;
	}

	.button {
		background: #0055d4;
		border-radius: 3px;
		text-decoration: none !important;
		color: #fff !important;
		font-weight: bold;
		padding: 10px 30px;
		display: inline-block;
	}
	.button:hover {
		background: #111;
	}

	.amp:before {
		font-family: typeka, monospace;
		font-weight: 400;
		font-style: normal;
		font-size: 1.3em;
		line-height: 1.3em;
		display: inline-block;
		content: "&" / "ampersand symbol";
		color: transparent;
	background: linear-gradient(90deg,rgba(201, 22, 22, 1) 0%, rgba(212, 36, 147, 1) 35%, rgba(224, 149, 18, 1) 100%);
	background-clip: text;
}

.center-align {
	text-align: center;
}

.is-italic {
	font-style: italic;
}

.dedication {
	text-align: center;
	font-style: italic;
	margin-bottom: 2em;
}

header {
	font-family: typeka, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 36pt;
	letter-spacing: 0.03em;
	margin-bottom: 0.5em;
}
header span.amp {
	padding: 0 0.05em;
}
header div.datetime {
	font-size: 10pt;
}
header a {
	text-decoration: none;
	color: inherit;
}

.divider {
	text-align: center;
	font-size: 12pt;
	padding: 2em 0em;
}
.divider .amp {
	padding: 0 3em;
}

.divider .ornament:before {
	display: inline-block;
	font-family: adorn-ornaments, sans-serif;
	font-weight: 400;
	font-style: normal;
	text-align: center;
	font-size: 10pt;
	content: "gdfgie" / "Ornamental divider";
	color: transparent;
	background: linear-gradient(270deg,rgba(201, 22, 22, 1) 0%, rgba(212, 36, 147, 1) 35%, rgba(224, 149, 18, 1) 100%);
	background-clip: text;
}
.divider .ornament:last-child { /* mirror the first ornament */
	display: inline-block;
	transform: scaleX(-1);
}

footer {
	text-align: center;
	font-size: 10pt;
	color: #888;
}
footer a {
	color: #888;
	margin-right: 5px;
}
footer p:nth-child(2) {
	text-align: justify;
	font-style: italic;
}
footer .contact-link {
	font-size: 16pt;
}

a {
	color: #7a00fd;
	text-decoration: underline dotted;
}
a:hover {
	color: #111;
}

@media screen and (max-width: 600px) {
	.gutter {
		padding: 0.5em;
	}

	.wrap {
		max-width: auto;
	}

	.ornament:before {
		content: "gie" / "Ornamental divider" !important;
	}
}