/* normalized monospace css */

:root {
	--font-family: "Anonymous Pro", monospace;
	--font-size: 20px;
	--font-size-small: 16px;
	--font-weight-normal: 500;
	--font-weight-medium: 600;
	--font-weight-bold: 800;
	--line-height: 1.20rem;
	--border-thickness: 2px;
	--text-color: #000;
	--text-color-alt: #666;
	--background-color: #fff;
	--background-color-alt: #ddd;
}

/* media selectors */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #fff;
    --text-color-alt: #aaa;
    --background-color: #000;
    --background-color-alt: #111;
  }
}

	

/* global settings */
* {
  box-sizing: border-box;
}

* + * {
  margin-top: var(--line-height);
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	padding: 0;
	border: 0;
	font-size: var(--font-size);
	vertical-align: baseline;
  	font-family: var(--font-family); 
	-ms-text-size-adjust: 100%; 
	-webkit-text-size-adjust: 100%; 
}

html {
	display: flex;
	width: 100%;
	margin: 0;
	padding: 0;
	flex-direction: column;
	align-items: center;
	background: var(--background-color);
	color: var(--text-color);
}
	

body {
	position: relative;
	width: 100%;
	margin: 0;
	padding: var(--line-height) 2ch;
	max-width: calc(min(80ch, round(down, 100%, 1ch)));
	line-height: var(--line-height);
	overflow-x: hidden;
}

/* for small width windows */
@media screen (width < 800px) {
	:root {
		font-size: var(--font-size-small);
	}
	body {
		padding: var(--line-height) 1ch;
	}
}


h1, h2, h3, h4, h5, h6 {
	font-weight: var(--font-weight-bold);
	margin: calc(var(--line-height) * 2) 0 var(--line-height);
	line-height: var(--line-height);
}

h1 {
	font-size: 2rem;
	line-height: calc(2 * var(--line-height));
}

h2 {
	font-size: 1rem;
}


article, aside, details, figcaption, figure, footer, 
header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  display: inline-block; 
  vertical-align: baseline; 
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden], template {
  display: none;
}

a, a:hover, a:active { 
	text-decoration: none;
	background-color: transparent;
	color: var(--text-color-alt);
}

a:active, a:hover { outline: 0; }

abbr[title] { border-bottom: 1px dotted; }

b, strong { font-weight: bold; }

dfn { font-style: italic; }


mark { background: #ff0; color: #000; }

small { font-size: 80%; }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup { top: -0.5em; }

sub { bottom: -0.25em; }

img, dialog { border: 0; }

svg:not(:root) { overflow: hidden; }

figure { margin: 1em 40px; }

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

pre { overflow: auto; }

code, kbd, pre, samp {
  font-family: "Lucinda Console", Courier, monospace;
  font-size: var(--font-size-small);
}

pre a {
	font-weight: var(--font-weight-normal);
	font-size: var(--font-size-small);
}



button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button { overflow: visible; }

button, select { text-transform: none; }

button, html input[type="button"],input[type="reset"], input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input { line-height: normal; }

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

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

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea { overflow: auto; }

optgroup { font-weight: bold; }

p { margin-top: 0; }

label, legend {
  display: block;
  margin-bottom: .5rem;
  font-weight: 600;
}

fieldset {
  padding: 0;
  border-width: 0; 
}

input[type="checkbox"], input[type="radio"] { display: inline; }

label > .label-body {
  display: inline-block;
  margin-left: .5rem;
  font-weight: normal; 
}

ul { list-style: circle inside; }
ol { list-style: decimal inside; }
ol, ul { padding-left: 0; margin-top: 0; }
ul ul, ul ol, ol ol, ol ul {
  margin: 1.5rem 0 1.5rem 3rem;
  font-size: 90%; 
}
li { margin-bottom: 1rem; }

code {
  font-size: 90%;
  border-radius: 0.3em; 
}

pre > code {
  width: 60rem;
  white-space: pre-wrap;
  display: block;
  padding: 1rem 1.4rem;
}
table {
  border-collapse: collapse;
  border-spacing: 0em;
}
th, td {
  padding: 0.3rem 0.8rem;
  text-align: right;
}

button, .button { margin-bottom: 1rem; }
input, textarea, select, fieldset { margin-bottom: 1.5rem; }
pre, blockquote, dl, figure, table, p, ul, ol, form { margin-bottom: 2.5rem; }

.right {
  float: right;
  margin-left: auto;
  margin-right: 0;
  text-align: right;
}

.tree, .tree ul {
  position: relative;
  padding-left: 0;
  list-style-type: none;
  line-height: var(--line-height);
}
.tree ul {
  margin: 0;
}
.tree ul li {
  position: relative;
  padding-left: 1.5ch;
  margin-left: 1.5ch;
  border-left: var(--border-thickness) solid var(--text-color);
}
.tree ul li:before {
  position: absolute;
  display: block;
  top: calc(var(--line-height) / 2);
  left: 0;
  content: "";
  width: 1ch;
  border-bottom: var(--border-thickness) solid var(--text-color);
}
.tree ul li:last-child {
  border-left: none;
}
.tree ul li:last-child:after {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  content: "";
  height: calc(var(--line-height) / 2);
  border-left: var(--border-thickness) solid var(--text-color);
}

.grid {
  --grid-cells: 0;
  display: flex;
  gap: 1ch;
  width: calc(round(down, 100%, (1ch * var(--grid-cells)) - (1ch * var(--grid-cells) - 1)));
  margin-bottom: var(--line-height);
}

.grid > *,
.grid > input {
  flex: 0 0 calc(round(down, (100% - (1ch * (var(--grid-cells) - 1))) / var(--grid-cells), 1ch));
}
.grid:has(> :last-child:nth-child(1)) { --grid-cells: 1; }
.grid:has(> :last-child:nth-child(2)) { --grid-cells: 2; }
.grid:has(> :last-child:nth-child(3)) { --grid-cells: 3; }
.grid:has(> :last-child:nth-child(4)) { --grid-cells: 4; }
.grid:has(> :last-child:nth-child(5)) { --grid-cells: 5; }
.grid:has(> :last-child:nth-child(6)) { --grid-cells: 6; }
.grid:has(> :last-child:nth-child(7)) { --grid-cells: 7; }
.grid:has(> :last-child:nth-child(8)) { --grid-cells: 8; }
.grid:has(> :last-child:nth-child(9)) { --grid-cells: 9; }

.main {
	display: grid;
	grid-template-columns: 1fr 4fr;
	grid-template-areas:
		"header header"
		"sidebar content"
		"none footer";
	gap: 2rem;
	.icon {
		width: 24px;
		height: 24px;
		vertical-align: -0.3em;
	}
}

@media (width < 800px ) {
	
	.main {
		grid-template-columns: 1fr;
		grid-template-areas:
			"header"
			"sidebar"
			"content"
			"footer";
	
		gap: 0rem;
	}
	nav menu { 
		display: flex; 
		text-decoration: none;
		list-style: none;
	}
	nav menu li { 
		text-decoration: none; 
		padding: 0.5rem ;
	}
	.main .icon {
		width: 24px;
		height: 24px;
		vertical-align: -30px;
	}
}

.header {
	grid-area: header;
}

.content {
	grid-area: content;

.sidebar {
	grid-area: sidebar;
}

.footer {
	grid-area: footer;
}

.none {
	grid-area: none;
}