@import url('https://fonts.cdnfonts.com/css/jetbrains-mono-2');

:root {
	--font: "JetBrains Mono", monospace;
	--line: 1.20rem;
	--bgco: #040304;
	--fgco: #FFF5EE;
	--lnco: #10A0A0;
	
	font-family:          var(--font);
	font-optical-sizing:  auto;
	font-weight:          400;
	font-style:           normal;
	font-size:            10pt;
	font-variant-numeric: tabular-nums lining-nums;
}

* {
	box-sizing: border-box;
}

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

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

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

p {
	margin-bottom: var(--line);
}

ul, ol {
	padding: 0;
	margin 0 0 var(--line);
}

ul {
	list-style-type: disc;
	padding: 0 0 0 2ch;
}

ol {
	list-style-type: none;
	counter-reset: item;
	padding: 0;
}

ol ul, ol ol, ul ol, ul ul {
	padding: 0 0 0 3ch;
	margin: 0;
}

ol li:before {
	content: counters(item, ".") ". ";
	counter-increment:item;
}

li {
	margin: 0;
	padding: 0;
}

li::marker {
	line-height: 0;
}

pre, code {
	white-space: pre;
	font-family: var(--font);
	font-kerning: none;
}

a {
	color: var(--lnco);
	transistion-duration: 0.4s;
}

a:hover {
	color: var(--bgco);
	background-color: var(--lnco);
	transition-duration: 0.4s;
}

html {
	visibility: visible;
	opacity: 1;
}