:root {
	--page-background: ;
	--main-text: #4d4d4d;
	--main-link: #333333;
	--main-link-hover: #000000;
	--main-link-border: #e1e1e1;
	--main-link-border-hover: #000000;
	--profile-border: #f0f0f0;
	--navigation-button-border: #e4e4e4;
	--navigation-button-background: ;
	--navigation-button-border-hover: #000000;
	--navigation-button-background-hover: #000000;
	--navigation-text: #8c8c8c;
	--navigation-text-hover: #f0f0f0;
	--heading-color: #000000;
	--button-border: #e4e4e4;
	--button-background: ;
	--button-border-hover: #000000;
	--button-background-hover: #000000;
	--button-text: #8c8c8c;
	--button-text-hover: #f0f0f0;
	--hr: #f0f0f0;
	--blockquote-border: #000000;
	--blockquote-background: ;
	--blockquote-text: #4d4d4d;
	--code-border: #e4e4e4;
	--code-background: #fafafa;
	--pre-border: #e4e4e4;
	--pre-background: ;
	--note: #FFF9C4;
	--alert: #FAD2D2;
	--aside: #F5F5F5;
	--callout: #DDEBF7;
	--conversation-background: ;
	--comment-border: #e4e4e4;
	--footnotes: #8c8c8c;
	--footnote-super: #000000;
	--page-fold: #F5F5F5;
	--video-placeholder: #fafafa;
	--comment-form-background-color: #fafafa;
	--comment-form-border-color: #fafafa;
	--shared-note: #FFF9C4;
	--red-text: #ff0000;
	--highlight: #FFFF00;
}

/* Font stacks */
:root {
	--font_system_ui: system-ui, sans-serif;
	--font_transitional: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--font_old_style: 'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
	--font_humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
	--font_geometric_humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	--font_classical_humanist: Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;
	--font_neo_grotesque: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
	--font_monospace_slab_serif: 'Nimbus Mono PS', 'Courier New', monospace;
	--font_monospace_code: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	--font_industrial: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
	--font_rounded_sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT', 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
	--font_slab_serif: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
	--font_antique: Superclarendon, 'Bookman Old Style', 'URW Bookman', 'URW Bookman L', 'Georgia Pro', Georgia, serif;
	--font_didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
	--font_handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
}


html {
	background-color: var(--page-background);
}

body {
	font-family: var(--font_system_ui);
	color: var(--main-text);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
	margin: 0;
	font-size: 18px;
}

.site-header {
	margin-top: 60px;
	margin-bottom: 60px;
	text-align: center;
	padding: 0 20px;
}

.site-header a {
	text-decoration: none;
	border-bottom: none;
}

.site-header .profile_photo {
	border-radius: 100%;
	text-align: center;
	padding: 2px;
	border: 1px solid var(--profile-border);
	transition: transform 0.3s ease-in-out;
	width: 100px;
	height: auto;
}

.site-header .profile_photo:hover {
	transform: scale(1.25);
}

.site-header h1 {
	margin: 0;
}

.site-header nav ul {
	list-style-type: none;
	padding: 0;
}

.site-header nav ul li {
	display: inline;
	margin: 0 2px;
	line-height: 2.5;
	white-space: nowrap;
}

.site-header nav a {
	border: 1px solid var(--navigation-button-border);
	background-color: var(--navigation-button-background);
	color: var(--navigation-text);
	border-radius: 20px;
	padding: 0.5em 1em;
	font-size: 0.9em;
	font-weight: 500;
	transition: background-color 0.1s ease-in;
}

.site-header nav a:hover {
	border-color: var(--navigation-button-border-hover);
	background-color: var(--navigation-button-background-hover);
	color: var(--navigation-text-hover);
}

.site-header p, .page, .post-content, .post-preview, .post, .archive, .comments, .content-meta, .page-fold-content, footer {
	max-width: 700px;
	margin: 0 auto;
}

.page-content p, .page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6, .page-content pre, .page-content blockquote, .page-content .post-date-wrapper, .page-content .reply-to, .microblog_conversation, .custom_footer, .page-content ul.bookshelf.bookshelf, .page-content .category-list, .site-nav, .quoteback-container, .gist, .tinylytics_countries {
	padding-left: 20px;
	padding-right: 20px;
}

.page-content ul, .page-content ol, .page-content dl {
	max-width: 680px;
	padding-left: 50px;
	padding-right: 20px;
}

.page-content .category-list {
	margin-top: 20px;
}

.page-content ul.bookshelf.bookshelf {
	padding-top: 20px;
}

.page-content li {
	margin-top: 15px;
	margin-bottom: 15px;
}

.page-content p {
	margin-top: 1em;
	margin-bottom: 1em;
}

.page-content img, .page-content video {
	display: block;
	width: 100%;
	max-width: 710px;
	padding-left: 0;
	height: auto;
	margin: 0 auto;
	margin-bottom: 20px;
}

.page-content h1 {
	font-size: 2em;
}

.page-content h1.category-title, .page-content h1.replies-title {
	margin-bottom: 50px;
}

.page-content h1.post-title {
	margin: 0 auto;
}

.page-content h1.post-title a {
	border: none;
	transition: border 0.1s ease-in;
}

.page-content h1.post-title a:hover {
	border-bottom: 2px solid var(--main-link-border-hover);
}

.page-content h1, .page-content h2, .page-content h3, .page-content h4, .page-content h5, .page-content h6 {
	margin-top: 1em;
	line-height: 1.3;
	color: var(--heading-color);
}

a {
	color: var(--main-link);
	text-decoration: none;
	border-bottom: 2px solid var(--main-link-border);
	transition: border-color 0.1s ease-in;
}

a:hover {
	border-color: var(--main-link-border-hover);
	color: var(--main-link);
}

.post-content a, .e-content a {
  word-break: break-word;
  overflow-wrap: break-word;
}

.without-title p:first-of-type {
	margin-top: 0;
}

hr {
	margin-top: 3em;
	margin-bottom: 3em;
	background-color: var(--hr);
	border: none;
	width: 60%;
	max-width: 400px;
	height: 5px;
	border-radius: 20px;
}

hr.article-break {
	width: auto;
	max-width: 100%;
	height: 1px;
	background-color: var(--hr);
	margin-top: 3em;
	margin-bottom: 3em;
	display: block;
	border: none;
}

a.post-date, .post-date-wrapper > time, .microblog_time a {
	opacity: 0.3;
	transition: opacity 0.1s ease-in;
	text-transform: uppercase;
	font-weight: 700;
	border: none;
}

a.post-date:hover, .microblog_time a:hover  {
	opacity: 1;
}

a.post-date:hover::after {
	content: " ∞";
}

a.read-more {
	border: none;
}

.post {
	margin-bottom: 2em;
}

h2.post-title {
	color: var(--main-link);
	margin-top: 0;
}

h2.post-title a {
	text-decoration: none;
	color: var(--main-link);
	border: none;
}

h2.post-title a:hover {
	border: none;
}

blockquote {
	border-left: 8px solid var(--blockquote-border);
	background-color: var(--blockquote-background);
	color: var(--blockquote-text);
	font-size: 0.95em;
	padding-top: 5px;
	padding-bottom: 5px;
	margin-left: 0;
}

.page-content blockquote p {
	padding-left: 0;
}

.page-content blockquote p:first-of-type {
	margin-top: 0;
}

.page-content blockquote p:last-of-type {
	margin-bottom: 0;
}

blockquote cite {
	display: block;
	font-weight: bold;
	margin-top: 1em;
}

blockquote.large {
	font-size: 2em;
}

p.note, p.alert, p.aside, p.callout, aside {
	padding-top: 10px;
	padding-bottom: 10px;
}

p.note {
	background-color: var(--note);
}

p.alert {
	background-color: var(--alert);
}

p.aside, aside {
	background-color: var(--aside);
}

p.callout {
	background-color: var(--callout);
}

p code, li code, span.tinylytics_hits, span.tinylytics_uptime {
	background-color: var(--code-background);
	border: 1px solid var(--code-border);
	padding-left: 0.5em;
	padding-right: 0.5em;
	font-size: 0.85em;
	border-radius: 1em;
}


pre {
	background-color: var(--pre-background);
	border-top: 1px solid var(--pre-border);
	border-bottom: 1px solid var(--pre-border);
	white-space: pre-wrap;
	padding-top: 1em;
	padding-bottom: 1em;
	font-size: 0.95em;
}

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

.post-nav a {
	border: none;
}

button, .conversation-on-mb, .reply-on-mastodon, .reply-by-email, input:is([type="button"]), [type="submit"], [type="reset"]:disabled, input[type=search], input[type=email], input[type=text] {
	border: 1px solid var(--button-border);
	background-color: var(--button-background);
	color: var(--button-text);
	border-radius: 20px;
	padding: 0.5em 1em;
	font-size: 0.9em;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.1s ease-in;
	margin: 3px 0;
	white-space: nowrap;
}

button:hover, .conversation-on-mb:hover, .reply-on-mastodon:hover, .reply-by-email:hover, input:is([type="button"]):hover, [type="submit"]:hover, [type="reset"]:disabled:hover {
	border-color: var(--button-border-hover);
	background-color: var(--button-background-hover);
	color: var(--button-text-hover);
}

input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

button.did_select {
	background-color: var(--button-background-hover);
	cursor: not-allowed;
	color: var(--button-text-hover);
}

a.button {
	border-bottom: none;
}

.page-content a:has(button) {
	border-bottom: none; /* Remove bottom border from <a> containing <button> */
}

.page-content p:has(video), .page-content p:has(iframe) {
	padding-left: 0;
	padding-right: 0;
}

.footnotes {
	font-size: 0.85em;
	color: var(--footnotes);
}

a.footnote-ref {
	color: var(--footnote-super);
	border: none;
}

.footnotes a.footnote-backref {
	border: none;
}

ul.reply-buttons, ul.post-tags {
	list-style-type: none;
	padding-left: 20px;
	padding-right: 20px;
	text-align: center;
}

ul.post-tags {
	opacity: 0.8;
	font-size: 0.8em;
	margin-bottom: 50px;
}

ul.post-tags:before {
	content: "Filed as: ";
	font-weight: bold;
}

ul.reply-buttons li, ul.post-tags li {
	display: inline;
	margin-right: 0.2em;
	line-height: 2em;
	white-space: no-wrap;
}

.reply-to {
	font-weight: 700;
}

footer {
	text-align: center;
	margin-top: 100px;
	margin-bottom: 100px;
	opacity: 0.8;
	font-size: 0.8em;
	padding: 0 20px;
}

footer i {
	font-size: x-large;
	padding-right: 5px;
	padding-left: 5px;
}

footer a:has(i), footer a:has(i):hover {
	border: none;
}

.page-content p img {
	width: calc(100% + 40px);
	height: auto;
	margin: 0 -20px;
	margin-bottom: 20px;
}

.page-fold {
	background-color: var(--page-fold);
	padding-top: 30px;
	padding-bottom: 30px;
	margin-top: 40px;
	margin-bottom: 40px;
	text-align: center;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}

.page-fold-content h1, .page-fold-content h2, .page-fold-content h3, .page-fold-content h4, .page-fold-content h5, .page-fold-content h6 {
	margin-top: 0;
}

.red {
	color: var(--red-text);
}

figure {
	margin: 0;
}

figcaption {
	text-align: center;
	font-style: italic;
}

table {
	margin: 0 auto;
}

highlight {
	background-color: var(--highlight);
}

/* MAKES VIDEO EMBEDS THAT DON'T USE IFRAME RESPONSIVE. DOES NOT WORK WITH YOUTUBE. */
video {
	width: 100% !important;
	height: auto !important;
	background: var(--video-placeholder);
}

/* PHOTOS GRID CONTAINER FIXES */

.photos-grid-container a, .photos-grid a {
	border: none;
}

img.photos-grid-item {
	border-radius: 0 !important;
}

/* MICROBLOG CONVERSATION */

.microblog_conversation {
	background: var(--conversation-background);
	padding-top: 20px;
}

.microblog_post {
	border: 1px solid var(--comment-border);
	padding: 20px;
	border-radius: 20px;
	margin-bottom: 20px;
}

.microblog_conversation img.microblog_avatar {
	display: initial;
	padding: 2px;
	border: 1px solid var(--profile-border);
	border-radius: 100%;
	max-width: 40px !important;
	width: 40px;
	vertical-align: middle;
	margin-bottom: 0;
}

.microblog_user {
	font-weight: 700;
}

.microblog_text p {
	padding: 0;
}

p.microblog_reply_textarea, p.microblog_reply_button, p.microblog_reply_signin {
	padding-left: 0;
	padding-right: 0;
}

p.microblog_reply_signin {
	font-weight: 700;
}

.microblog_time {
	font-size: 0.8em;
}

.microblog_reply_textarea textarea {
	border: 1px solid var(--comment-border);
	border-radius: 20px;
	padding: 20px;
	width: calc(100% - 40px);
	resize: none;
}

form.microblog_reply_form {
	background-color: var(--comment-form-background-color);
	border: 1px solid var(--comment-form-border-color);
	padding: 10px 20px;
	border-radius: 20px;
}


/* Tinylytics */

.tinylytics_webring {
	align-items: center;
	display: flex;
	flex-direction: row;
	gap: 3px;
	justify-content: center;
	margin-bottom: 5px;
}

a.tinylytics_webring {
	text-decoration: none;
	border: none;
}

.tinylytics_webring_avatar {
	width: auto;
	height: 1.75em;
	border-radius: 100%;
}

.tinylytics_countries {
	display: block;
	font-size: 1.2em;
}

/* PRIVATE NOTES */
.microblog_shared_note {
	background-color: var(--shared-note);
	text-align: center;
	padding: 20px;
}

/* ATTEMPT TO MAKE YOUTUBE EMBED BETTER */

iframe {
	max-width: 100%;
	width: 700px;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}