/*
 * Mostly  based on simplecss.org
 * Also based on cssbed, forgot which theme exactly, might be bamboo or "evenbettermotherfucking"
 */

:root {
	--base-fontsize: 1rem;

	/* Major third scale progression - see https://type-scale.com/ */
	--header-scale: 1.25;

	/* Line height is set to the "Golden ratio" for optimal legibility */
	--line-height: 1.618;

	--mono-font: Hack, Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--bg: #FFF;
	--accent-bg: #efedff;
	--accent-bg-light: #f2f2f2;
    --code-bg: #f2f2f2;
	--text: #161616;
	--text-light: #585858;
	--border: #D8DAE1;
	--accent: #3d4573;
	--accent-light: #3d4573;
	--code: #D81B60;
	--preformatted: #444;
	--marked: #FFDD33;
	--disabled: #EFEFEF;

	--shadow-color: #fff;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #282a36;
		--accent-bg: #44475a;
		--accent-bg-light: #45454b;
		--code-bg: #3e3e4b;
		--text: #eee;
		--text-light: #ABABAB;
		--border: #555;
		--accent: #8be9fd;
		--accent-light: #e4e9a8;
		--code: #F06292;
		--preformatted: #CCC;
		--disabled: #111;

		--shadow-color: #36373b;
	}

	img, video {
		opacity: .6;
	}
}

nav {
	padding: 1rem 0.3rem;
	padding-bottom: 4px;
	padding-top: 1.5rem;
	font-weight: 400;
	border-bottom: 1px solid var(--accent-light);
}

nav a, .meta a, .post-meta a, footer a, .after-content a {
	color: var(--accent-light);
	/* border-color: var(--accent-bg); */
	/* border-radius: 5px; */
	/* border-style: solid; */
	/* border-bottom: 1px; */
	border-bottom: 0;
}

nav a {
	margin-right: 1rem;
}

blockquote {
	margin-left: 0;
	padding-left: 1rem;
	border-left: .35rem solid var(--accent-bg-light);
	opacity: .8;
}

table {
	border-collapse: collapse;
	width: 100%
}
table caption {
	font-weight: bold;
	margin-bottom: .5rem;
}
td,
th {
	border: 1px solid var(--border);
	text-align: left;
	padding: .5rem;
}

th {
	background: var(--accent-bg-light);
	font-weight: bold;
}

/* tr:nth-child(even) { */
/* 	/1* Set every other cell slightly darker. Improves readability. *1/ */
/* 	background: var(--accent-bg); */
/* } */

main {
	margin-bottom: 4rem;
}
footer {
	text-align: center;
	font-size: .9rem;
	color: var(--text-light);
	border-top: 1px solid var(--border);
	padding: 1rem;
}
header p {
	text-align: left;
	/*margin: 1rem 2rem;*/
}
header pre {
	margin-bottom: 2rem;
	max-width:auto;
}

/* Use mono font for code like elements */
code,
pre,
pre span,
kbd,
samp {
	font-family: var(--mono-font);
	font-size: 98%;
}

/* Inline code snips hopefully */
code:not(pre code), kbd {
    background-color: var(--code-bg);
    border: 1px solid var(--code-bg);
    border-radius: 6px;
    padding: .01em .1em;
}

kbd {
	color: var(--preformatted);
	border: 1px solid var(--preformatted);
	border-bottom: 3px solid var(--preformatted);
	border-radius: 5px;
	padding: .1rem;
}

/* This would be overridden by chroma if the page wants highlighting */
pre {
	padding: .8rem 1rem;
	max-width: 100%;
	overflow: auto;
	color: var(--preformatted);
	background: var(--accent-bg-light);
	border: 1px solid var(--border);
	border-radius: 6px;
}

/* Fix embedded code within pre */
pre code {
	color: var(--preformatted);
	background: none;
	margin: 0;
	padding: 0;
}

/* h1 { */
/* 	margin-top: 2rem; */
/* 	color: #000; */
/* } */

body {
	margin: auto;
	background-color: var(--bg);
	padding: 0 5%;
	/* margin-top: 2rem; */
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: var(--base-fontsize);
	line-height: var(--line-height);
	text-shadow: 0 1px 0 var(--shadow-color);
	max-width: 47rem; /* lol idk */
}

.post-date {
	margin-right: 1.5rem;
}

.posts {text-align: left;}
a {border-bottom: 1px solid var(--accent); color: var(--accent); text-decoration: none;}
a:hover {
	border-bottom: 0;
	background-color: var(--accent-bg);
}
header {top: 1px;}

fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

/* Misc body elements */
hr {
	color: var(--border);
	border-top: 1px;
	margin: 1rem auto;
}

mark {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--marked);
}

main img, main video {
	max-width: 100%;
	border-radius: 5px;
}

figure {
	margin: 0;
}

figcaption {
	font-size: .9rem;
	color: var(--text-light);
	text-align: center;
	margin-bottom: 1rem;
}

a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	border: none;
	border-radius: 5px;
	background: var(--accent);
	font-size: 1rem;
	color: var(--bg);
	padding: .7rem .9rem;
	margin: .5rem 0;
	transition: .4s;
}

a button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
	cursor: default;
	opacity: .5;
	cursor: not-allowed;
}

input:disabled,
textarea:disabled {
	cursor: not-allowed;
	background: var(--disabled);
}

input[type="range"] {
	padding: 0;
}

/* Set the cursor to '?' while hovering over an abbreviation */
abbr {
	cursor: help;
}

button:focus,
button:enabled:hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
	opacity: .8;
}

/* Format the expanding box */
details {
	padding: .6rem 1rem;
	background: var(--accent-bg);
	border: 1px solid var(--border);
	border-radius: 5px;
	margin-bottom: 1rem;
}

summary {
	cursor: pointer;
	font-weight: bold;
}

details[open] {
	padding-bottom: .75rem;
}

details[open] summary {
	margin-bottom: .5rem;
}

details[open]>*:last-child {
	margin-bottom: 0;
}

/* Format headers */
h1, h2, h3, h4, h5, h6 {
	margin-bottom: 1.1rem;
}
h1 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.3rem);
}

h2 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	margin-top: calc(var(--line-height) * 1.1rem);
}

h3 {
	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
}

h4 {
	font-size: calc(var(--base-fontsize) * var(--header-scale));
}

h5 {
	font-size: var(--base-fontsize);
}

h6 {
	font-size: calc(var(--base-fontsize) / var(--header-scale));
}

#post-header h1 {
	margin-bottom: 0.4rem;
}
#post-header {
	margin-bottom: 2rem;
}
.post-meta, .meta, footer, .after-content {
	font-size: .9rem;
	color: var(--text-light);
}

small {
    font-size: .8rem;
    color: var(--text-light);
}

small a {
	border-bottom: 0;
}

.after-content {
	border-top: 1px solid var(--border);
	margin-top: 2rem;
}