@import url(https://cdn.simplecss.org/simple.min.css);
:root{
	--body-max-width: 45rem;
	--marked: #fb3779;
	--code: #0d47a1;
	--accent: #d81b60;
}
@media (prefers-color-scheme:dark) {
	:root {
		--accent: #f06292;
		--code: #62c1f0;
	}
}
body {
	grid-template-columns: 100%;
	grid-template-areas: "header" "sidebar" "content";
}
@media (min-width:768px) {
	body{
		grid-template-rows: auto auto;
		grid-template-columns: calc(10 * var(--body-max-width) / 27) auto;
		grid-template-areas:
			"header header"
			"sidebar content"
	}
}
body > *{
	grid-column: unset;
}
body > header{
	grid-area: header;
	padding: 0;
}
body > nav{
	grid-area: sidebar;
	background-color: var(--accent-bg);
	display: flex;
	flex-flow: column nowrap;
}
body > nav {
	font-size: 1rem;
	line-height: 2;
	padding: 1rem 0 0 0;
}
body > nav ol,
body > nav ul {
	align-content: space-around;
	align-items: center;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	margin: 0;
	padding: 0;
}
body > nav ol li,
body > nav ul li {
	display:inline-block
}
body > nav a,
body > nav a:visited {
	margin: 0 .5rem 1rem .5rem;
	border: 1px solid currentColor;
	border-radius: var(--standard-border-radius);
	color: var(--text-light);
	display: inline-block;
	padding: .1rem 1rem;
	text-decoration: none;
	cursor: pointer;
	transition: all .15s;
}
body > nav a.current,
body > nav a[aria-current=page] {
	background-color: var(--bg);
	color: var(--text);
}
body > nav a:hover{
	background-color: var(--bg);
	color: var(--accent);
}
@media only screen and (max-width:720px) {
	body > nav{
		flex-flow: row wrap;
		padding-block: .5rem;
	}
	body > nav a {
		border:none;
		text-decoration:underline;
		margin-block: .1rem;
		padding-block:.1rem;
		line-height: 1rem;
		font-size: .9rem;
	}
}
main{
	grid-area: content;
	display: grid;
	grid-template-columns:
	[full-main-start] 1fr
	[main-start] min(var(--body-max-width), 90%) [main-end]
	1fr [full-main-end];
}
main > *{
	grid-column: main;
}
.icon {
	vertical-align: sub;
	padding-right: .25rem;
	display: inline-block;
	width: 1em;
	height: 1.3em;
	margin-right: 0.2rem;
	stroke-width: 0;
	stroke: currentColor;
	fill: currentColor;
}
.note{
	font-size: .9rem;
	font-style: italic;
}
.prevNext{
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	margin-top: 1rem;
	border-top: 1px solid var(--border);
}
.prevNext [rel=prev]{
	grid-column: 1;
}
.prevNext [rel=next]{
	grid-column: 3;
	text-align: right;
}
.code{
	--shiki-color-text: #e9eded;
	--shiki-color-background: #212121;
	--shiki-token-constant: #82b1ff;
	--shiki-token-string: #c3e88d;
	--shiki-token-comment: #546e7a;
	--shiki-token-keyword: #c792ea;
	--shiki-token-parameter: #AA0000;
	--shiki-token-function: #80cbae;
	--shiki-token-string-expression: #c3e88d;
	--shiki-token-punctuation: var(--code);
	--shiki-token-link: #EE0000;
	white-space: pre;
	tab-size: 2; /* TODO: allow custom tab size?! */
	overflow: scroll;
}
.code[data-js=todo]{
	border: 1px solid var(--border);
	border-radius: var(--standard-border-radius);
	margin-bottom: 1rem;
	margin-top: 18.4px; /* to fix shift when → dataJS=done */
	padding: 1rem 1.4rem;
}
.example{
	grid-column: full-main;
	width: 100%;
	max-width: calc(9/5 * var(--body-max-width));
	height: calc(3/5 * var(--body-max-width));
	margin-inline: auto;
}
.CodeMirror, .CodeMirror-gutters {
	background: #212121 !important;
	border: 1px solid white;
}
.notice h3{
	margin-top: 0;
}