html, body {
	height: 100%;
	padding: 0;
	margin: 0;
}
body {
	font-size: system-ui;
	background: rgb(207,0,0);
	background: url('free-software.png') center 32px, linear-gradient(0deg, rgba(207,0,0,1) 10%, rgb(12, 22, 74) 100%);
	background-attachment: fixed;
	margin: 0;
	padding: 0;
}
a:link { color: #D22; }
a:visited { color: #A11; }
a:hover { text-decoration: underline dotted; }
a:focus { font-weight: bold; }
.dead {
	text-decoration: line-through;
}
#menu {
	height: 147px;
	margin: auto;
	max-width: 1126px;
	color: white;
	position: relative;
}
header h1 {
	margin: 0;
	padding: 20px 0 0 10px;
	font-size: 220%;
	font-family: 'Nanum Gothic', sans-serif;
}
#badges {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 200px;
	text-align: right;
	font-size: 70%;
	font-family: 'Barlow', sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}
#badge-normie {
	display: inline-block;
	border: 1px solid red;
	border-radius: 4px;
	color: red;
	padding: 3px 6px;
	margin: 0 0 5px 0;
}
#badge-tor {
	display: inline-block;
	border-radius: 4px;
	color: white;
	background-color: green;
	padding: 3px 6px;
}
#site-menu {
	position: absolute;
	list-style: none;
	/*margin: 60px 0 0 10px;*/
	margin: 0 0 0 5px;
/*	padding: 0;*/
	padding: 0 8px;
/*	bottom: 8px;*/
	bottom: 0;
	font-family: Barlow, sans-serif;
	font-size: 18px;
}
#site-menu a:link {
	display: block;
	padding: 8px 16px;
}
#site-menu li {
	display: inline-block;
}
#site-menu > li {
	position: relative;
}
#site-menu > li:hover {
	background-color: #191919;
	border-radius: 3px 3px 0 0;
}
#site-menu ul {
	background-color: #101010;
}
#site-menu ul li {
	display: block;
}
#site-menu a {
	display: block;
}
#site-menu ul a:hover {
	background-color: #000;
	display: block;
}
#site-menu > li > ul {
	position: absolute;
	z-index: 1;
	padding: 0;
}
#site-menu li > ul {
	display: none;
}
#site-menu li:hover > ul {
	display: inline-block;
}
#site-menu a:link, #site-menu a:visited {
	color: white;
	text-decoration: none;
}
#body {
	margin: 0 auto 20px auto;
	max-width: 1126px;
	background-color: #222;
	color: #EEE;
	border-bottom: 2px solid #191919;
	border-radius: 5px;
}
#divider {
	background: linear-gradient(0deg, rgba(0,0,0,1) 15%, rgba(0,0,0,0) 70%), url('free-software-flat-contrast-reveal.png') center 32px fixed #000;
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
	/*min-height: 32px;*/
	/* Line Height is 15px */
	padding: 10px 20px;
	min-height: 105px;
	border-radius: 5px 5px 0 0;
	position: relative;

	font-family: Montserrat, sans-serif;
}
#divider h1 {
	margin: 0;
	font-size: 240%;
	font-weight: 400;
	padding: 0;

	position: absolute;
	bottom: 10px;
}
#divider h2 {
	margin: 0;
	font-size: 100%;
}
#page {
	min-height:500px;
	padding: 15px;
	font-family: Barlow, sans-serif;
	font-size: 1.15em;
	line-height: 140%;
}

#overlap {
	background: url('byte.png') center 32px fixed;
	min-height: 100px;
	margin: 0 -15px;
}

.nobullets {
    list-style: none;
    padding-left: 15px;
}

.c-comment { color: grey; }
.c-key { color: blue; }
.c-val { color: red; }
.c-func { color: green; }

/*code {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #CCC;
    border-radius: 4px;
}*/
code.pre {
    white-space: pre;
    tab-size: 4;
}

pre {
	tab-size: 4;
}

::selection {
        background-color: #D00;
        color: white;
}

/* Layout */
.padded {
	margin: 30px auto;
	padding: 0 12px;
	max-width: 800px;
}

.row {
	display: flex;
	flex-direction: column;
}
.row .textbody {
	max-width: 500px;
}
.row figure {
	max-width: 200px;
}

.full-2col {
	display: flex;
}
.full-2col > * {
	flex: 1 1 auto;
}
.gutters > * {
	margin: 0 12px;
}
/*
.full-2col > * {

}*/

.pull-right {
	float: right;
	shape-outside: content-box;
	margin-right: -100px; /* @TODO change on viewport-width */
}

.pull-left {
	float: left;
	shape-outside: content-box;
	margin-left: -100px; /* @TODO change on viewport-width */
}

.center { text-align: center; }

.msg-info, .msg-good, .msg-warn, .msg-crit {
	padding: 8px 12px 12px 12px;
	margin: 10px 0;
	border-left: 3px solid;
	font-size: 1rem;
	/*max-width: 600px;*/
	color: #FFF;
	word-break: break-all;
}
.msg-info {
	background-color: #404040;
	border-left-color: #555;
}
.msg-good {
	background-color: #203b66;
	border-left-color: #2d5593;
}
.msg-warn {
	background-color: #665e20;
	border-left-color: #93912d;
}
.msg-crit {
	background-color: #531a1a;
	border-left-color: #932d2d;
}

.msg-list > * {
	margin: 0;
	padding: 4px 8px;
	line-height: 120%;
	max-width: inherit;
}

.code pre {	margin: 0; }
.code {
	padding: 6px 12px;
	border: 1px solid #555;
	background: #1D1D1D;
	border-radius: 3px;
	color: #ceb27f;
}
.code .punc { color: #da9c2b }
.code .kwrd	{ color: #cfc863; }
.code .var 	{ color: #cf7963; }
.code .func	{ color: #b8cf63; }
.code .str	{ color: #6380cf; }
.code .key	{ color: #cf63c1; }
.code .num	{ color: #9b63cf; }
.code .cmt	{ color: #b9b9b9; }

.feature { display: flex; }
.feature input, .feature button {
	font-size: 120%;
	padding: 4px;
	margin: 4px 8px 0 0;
}
.feature input[type=text], .feature input[type=url] {
	max-width: 700px;
	flex: 1 1 auto;
}

textarea.fill-width {
	width: 100%;
}

/*
figure-left
  figure
  textbody
figure-right
  textbody
  figure


padded
pad-left
pad-right

input-hero
  label (optional, single-line)
  input
  button

//

.snippet

.msg-info
.msg-warn
.msg-crit

.msg-list
  .msg-info
  .msg-warn
  .msg-crit

.code
  .var
  .func
  .str
  .key
  .num
  .cmt
  .emph

.console
  .prompt
    .h - host
	.W - path
	.u - uid
  	.usr
  	.path
  	.dollar
  .cmd
  .arg
  .val
  .var
  .stdout
  .stderr

.json
  .key
  .num
  .str
  .bool
*/