/*! memex webui * public domain * //sunshinegardens.org/remaotic-software/ **/

/* elements */

html,
body,
pre {
	font-family: "Atkinson Hyperlegible", "OpenDyslexic", sans-serif,
		"Noto Sans", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Emoji";
	cursor: url(/static/cursor.gif), auto; }

body {
	overflow-x: hidden;
	background-image: none;
	background-image: var(--background_image); }

h1,
h2,
h3,
a[role="heading"],
pre + hr,
pre ~ pre {
	clear: both; }

h1,
h2,
h3,
a[role="heading"] {
	font-family: "Atkinson Hyperlegible", "BQN386 Unicode", sans-serif,
		"Noto Sans", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Emoji"; }

pre + hr::after {
	font-family: "BQN386 Unicode",
		monospace, "Noto Sans Symbols", "Noto Sans Symbols 2";
	content: attr(aria-label);
	position: absolute; }

/* code blocks and figures */

code {
	font-family: "BQN386 Unicode",
		monospace, "Noto Sans Symbols", "Noto Sans Symbols 2";
	clear: both; }

code[role="figure"] {
	position: relative;
	left: -25%;
	display: inline-block;
	width: 150%;
	max-width: calc(100vw - 4rem);
	border-width: 0.24rem;
	border-style: solid;
	border-color: #aa0000;
	border-color: var(--b_high);
	background-color: #48413a;
	background-color: var(--b_low);
	padding: 1rem; }

code[role="figure"][aria-label]::before {
	content: attr(aria-label);
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	display: block;
	clear: both;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #aa0000;
	border-bottom-color: var(--b_high);
	padding-left: 1rem;
	padding-right: 1rem; }

/* BQN */

.key.Nothing {
	color: #666666;
	color: var(--f_inv); }
.key.Function {
	color: #4cb1cf;
	color: var(--b_inv); }
.key.Value {
	color: #ffefc9;
	color: var(--f_high); }
.key.Comment {
	color: #aa0000;
	color: var(--b_high); }
.key.Ligature {
	color: #9f9fa2;
	color: var(--f_med); }

/* protocol indicators */

pre a[href^="gopher:"]:after,
pre a[href^="gemini:"]:after,
pre a[href^="mercury:"]:after {
	font-size: xx-small; }

pre a[href^="gopher:"]:after {
	content: " \2652"; }

pre a[href^="gemini:"]:after {
	content: " \264A"; }

pre a[href^="mercury:"]:after {
	content: "\263F"; }

/* index timestamp */

a[role="link"] time {
	font-family: "BQN386 Unicode",
		monospace, "Noto Sans Symbols", "Noto Sans Symbols 2"; }

/* i18n */

.c-document[lang="tok"] pre {
	font-family: "sitelen linja suwi",
		"Atkinson Hyperlegible", "OpenDyslexic",
		sans-serif, "Noto Sans", "Noto Sans Symbols", "Noto Sans Symbols 2", "Noto Sans Emoji";
	font-size: 3rem; }

/* components */

.c-nav,
.c-document,
.c-footer {
	line-height: 1.0;
	max-width: 51rem /* 69ch */;
	margin: 1rem auto;
	padding: 1.25rem 1rem; }


.c-nav {
	display: flex;
	justify-content: center;
	align-items: center; 
	box-shadow: 0.24rem 0.24rem 0px 0px var(--f_inv);
	background-color: #48413a;
	background-color: var(--b_low);
	border-width: 0.24rem;
	border-style: solid;
	border-color: #214c05;
	border-color: var(--b_med);
	padding: 0; }

.c-nav + .c-nav {
	border: none;
	margin-top: 1rem; }

.c-nav .c-nav__bar {
	width: 100%;
	white-space: pre-wrap;
	-moz-tab-size: 2;
	-o-tab-size: 2;
	tab-size: 2;
	text-decoration: none;
	padding: 0 0.69rem;
	display: block;
	text-align: left;
	line-height: 2rem; }

.c-nav .c-nav__bar::before {
	padding-right: 0.69rem;
	color: var(--f_high);
	content: attr(title); }

.c-nav .c-nav__bar[href="/"] {
	margin-left: auto;
	text-align: right;
	width: 15rem;
	background-color: var(--f_inv); }

.c-nav .c-nav__bar:hover {
	background-color: var(--b_med); }

.c-nav__link,
.c-nav__link:visited,
.c-nav__link[href],
.c-nav__link[href]:visited {
	height: 100%;
	width: 3em;
	text-decoration: none;
	border-color: inherit;
	border-right-width: 1px;
	border-right-style: inherit;
	line-height: 1.5em;
	color: #4cb1cf;
	color: var(--b_inv);
	text-align: center;
	display: inline-block;
	padding: 0.3rem 0.6rem; }

.c-nav__link--active,
.c-nav__link:focus,
.c-nav__link:target,
.c-nav__link:hover,
.c-nav__link[href]:focus,
.c-nav__link[href]:target,
.c-nav__link[href]:hover {
	background-color: #214c05;
	background-color: var(--b_med);
	color: #a3832c;
	color: var(--f_low); }

.c-document {
	box-shadow: 0.24rem 0.24rem 0px 0px var(--f_inv);
	margin-bottom: 0; }

.c-document iframe,
.c-document img {
	border-width: 0.24rem;
	border-style: solid;
	border-color: #aa0000;
	border-color: var(--b_high);
	background-color: #0f0803;
	background-color: var(--background);
	padding: 0.5rem; }

.c-document img {
	margin: 0 auto -1rem;
	display: block; }

.c-document a[href],
.c-document a[role="link"],
.c-document span[role="listitem"] {
	white-space: pre-wrap;
	overflow-wrap: break-word;
	max-width: 100%;
	padding: 0.69rem 0;
	display: inline-block; }

.c-footer {
	margin: 0.5rem auto;
	padding: 0; }

.c-footer__meta {
	display: block;
	margin: 0.5rem auto;
	text-align: center; }

.c-footer__link {
	box-shadow: 0.24rem 0.24rem 0px 0px var(--f_inv);
	margin: 0.5rem auto;
	width: 88px;
	height: 31px;
	display: inline-block;
	text-decoration: none;
	overflow: hidden;
	background-color: #4cb1cf;
	background-color: var(--b_inv); }

.c-footer__link + .c-footer__link {
	margin-left: 1rem; }

.c-footer__badge {
	overflow: hidden;
	border-width: 0.24rem;
	border-style: solid;
	border-color: #4cb1cf;
	border-color: var(--b_inv);
	height: 31px;
	max-height: 31px;
	width: 88px;
	background-color: #4cb1cf;
	background-color: var(--b_inv); }

.c-footer__label-badge,
.c-footer__build-id {
	font-family: "BQN386 Unicode",
		monospace, "Noto Sans Symbols", "Noto Sans Symbols 2";
	cursor: pointer;
	color: #4cb1cf;
	color: var(--b_inv);
	background-color: #0f0803;
	background-color: var(--background);
	line-height: 31px;
	font-size: 9px; }

.c-footer__badge[src="/static/encircle.png"] {
	background-color: hsla(0, 0%, 20%, 1); }

/* pane */

.c-pane,
.c-document iframe,
.c-document img,
.c-quote, q,
blockquote,
code[role="figure"] {
	box-shadow: 0.24rem 0.24rem 0px 0px var(--f_inv); }

/* audio */

.c-audio {
	padding: 0.5rem;
	margin: 0.5rem auto -1rem auto;
	border-bottom-width: 0.24rem;
	border-bottom-style: solid;
	border-bottom-color: #aa0000;
	border-bottom-color: var(--b_high); }

/* respond */

@media (min-width: 45ch) {
	.c-audio,
	.c-document img {
		max-width: 66%; } }

@media (max-width: 133ch) {
	code[role="figure"] {
		left: -16rem;
		width: 80rem; } }

@media (max-width: 100ch) {
	code[role="figure"] {
		left: unset;
		width: 100%; } }

@media (max-width: 45ch) {
	.c-nav {
		font-size: 1rem;
		display: flex;
		flex-direction: row;
		margin-bottom: 0.25rem;
		margin-top: 0; }
	.c-nav .c-nav__bar {
		padding: 0 0.25rem; }
	.c-nav .c-nav__bar::before {
		padding-right: 0.25rem; }
	.c-nav .c-nav__link {
		flex: 1;
		width: auto; } }

@media print {
	.c-document,
	.c-document q,
	.c-document img,
	body,
	main {
		color: #000;
		background-color: unset;
		background-image: unset;
		border: none;
		box-shadow: none; }
	.c-document {
		max-width: 100vw;
		padding: unset;
		margin: 1cm; }
	.c-document * {
		color: inherit; }
	.c-document a[role="heading"],
	.c-document a[href],
	.c-document a[href]:visited {
		color: #000; }
	.c-document a[role="heading"][aria-level="2"]:not(:last-of-type) {
		break-before: page; }
	.c-document a[role="heading"] span[aria-hidden="true"] {
		display: none; }
	.c-document a[href]::after {
		color: #000;
		content: attr(href);
		margin-left: 1rem; }
	.c-document img {
		max-width: 50%;
		float: left;
		margin: 1cm; }
	.c-document q {
		border-left: 0.5rem solid #000;
		padding: 1rem 1cm;
		margin: 0; }
	.c-nav,
	.c-footer,
	.c-document--aside,
	hr[aria-label="EOF"] {
		display: none; } }