@import "variables.css";

body {
	color: var(--fg);
	margin: var(--padding);
	font-family: monospace;
	background-color: var(--bg);
}

h1, h2 {
	color: var(--primary);
}

h3, h4, h5, blockquote, a, a:visited {
	color: var(--secondary);
}

blockquote, pre {
	font-weight: 600;
	padding: var(--padding) 0px;
}

h1, h2, h3, h4, h5, hr {
	margin: 0px;
	overflow: hidden;
	position: relative;
	padding: 10px 0 30px;

	display: inline-block;
	display: table;
}

h1::after, h2::after, h3::after {
    left: 0px;
	height: 1em;
    bottom: 15px;
	overflow: hidden;
    position: absolute;
}

h1::after {content: "========================================"}
h2::after {content: "----------------------------------------"}

h3, h4, h5 {font-size: 1.2em}
h3::before {content: "## "}
h4::before {content: "#### "}
h5::before {content: "##### "}

blockquote::after {content: ">\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>\A>"}

blockquote::after {
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: pre;
	line-height: 1.8em;
	position: absolute;
}

blockquote {
	margin: 0px;
	overflow: hidden;
	padding-top: 2px;
	padding-left: 2em;
	position: relative;
	padding-left: 15px;
}

blockquote p {margin: 0px}

hr::after {
	overflow: hidden;
	line-height: 0px;
	content: "------------------------------------------------------------------------";
}

hr {
	width: 100%;
	border: none;
	line-height: 0px;
}
.footnotes hr {display: none}

pre {
	color: var(--elem-fg);
	padding: var(--padding);
	border-radius: var(--radius);
	background-color: var(--elem-bg);
}

.code {
	padding: 2px 5px;
	color: var(--elem-fg);
	background: var(--elem-bg);
	border-radius: calc(var(--radius) / 2);
	font-family: "Fira Code", monospace;
	font-optical-sizing: auto;
	font-weight: 300;
	font-style: normal;

	
}

li {counter-increment: li}
ul, ol {
	list-style: none;
	counter-reset: li;
	padding-left: 1.0em;
}

li::before {color: var(--secondary)}

ul li::before {content: "- "}
ol li::before {content: counter(li) ". "}

input[type="checkbox"] {
	width: 2em;
	appearance: none;
	color: var(--secondary);
}

input[type="checkbox"]::before {content: "[ ]"}
input[type="checkbox"]:checked::before {content: "[X]"}

table {
	width: 100%;
	border-radius: 10px;
	color: var(--elem-fg);
	background-color: var(--elem-bg);
}

tr, th, td {padding: var(--padding)}

img {
	max-width: 72ch;
}

main {
	width: 100%;
	margin: 0 auto;
	max-width: 72ch;
	overflow: hidden;
}

.center {
  text-align: center;
}

.fira-sans-light {
  font-family: "Fira Sans", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.fira-sans-regular {
  font-family: "Fira Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}