/* ############################ POSITIONING ########### */

.firm_hide {			display:		none }
.mild_hide {			display:		hidden }
body, main, aside {		display:		grid }
.col2, .col3 {			display:		grid }

header {			grid-area:		h }
nav {				grid-area:		n }
main {				grid-area:		m }
footer#f_jur {			grid-area:		fj }
footer#f_logo {			grid-area:		fl }

body {				grid-auto-flow:		row;
				grid-template-columns:	100vw;
				grid-template-rows:	12vh auto 1fr auto 6.5vh;
				grid-template-areas:	"h"
							"n"
							"m"
							"fj"
							"fl"; }

aside {				grid-auto-flow:		row;
				grid-template-columns:	100%;
				grid-template-rows:	auto auto auto auto 1fr;
				row-gap:		1vmin }

main {				grid-auto-flow:		column;
				grid-template-columns:	auto 1fr }

.col2, .col3 {			grid-template-rows:	auto;
				gap:			2vw }
.col2 {				grid-template-columns:	repeat(2, auto); }
.col3 {				grid-template-columns:	repeat(3, auto); }

html, body {			height:			100vh }
header svg {			height:			10vh }

pre {				width:			max-content }
html, body {			width:			100vw }
article#ssh svg#ssh_venndiagram {
				width:			40vw }

picture#ssh_key1 img {		width:			4vw }
picture#ssh_key2 img {		width:			8vw }
picture#ssh_key3 img {		width:			6vw }
picture#ssh_key4 img {		width:			8vw }
picture#ssh_key5 img {		width:			8vw }

#ssh_auth img[alt='server'] {	max-width:		10vmax }
#ssh_auth img[alt='user'] {	max-height:		13vmax }
#ssh pre {			max-width:		40vw }

html, body {			margin:			0 }
#venn, #ssh_auth {		margin:			0 auto }
.col2 ul, .col3 ul {		margin:			0 auto }
aside {				margin:			2vmin 0 2vmin 8vmin }
#cont {				margin:			2vmin 8vmin 2vmin 2vmin }
header svg {			margin-top:		1.3vmin }

html, body {			padding:		0 }
aside a, #cont {		padding:		2vmin }
span.code {			padding:		0 .25vw }

/* ############################ MISC ################## */

.clr {				clear:			both }

dl.pub dt:after {		content:		':' }
#key_spec tr td.y::after {	content:		"\2714" }
#key_spec tr td.n::after {	content:		"\2718" }
em.q:before {			content:		open-quote }
em.q:after {			content:		close-quote }

.fr, dl.pub {			float:			right }

ul li {				line-height:		1.5 }
ul.lh2 li {			line-height:		2 }

ul {				list-style-type:	square }
ul li.no {			list-style-type:	none }

pre code {			overflow-x:		auto;
				overflow-y:		visible }

#key_spec tr:first-of-type td {	vertical-align:		bottom }

#key_spec tr td:first-of-type {	white-space:		nowrap }
pre {				white-space:		pre-wrap }

/* ############################ FONT / TEXT ########### */

body {				font-family:		'Bucketlist Sans' }
span.code {			font-family:		Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace; }
aside a {			font-size:		1.5rem }
dl.pub {			font-size:		.8rem }
figcaption, q {			font-style:		oblique;
				font-style:		italic }
em.q:before, em.q:after {	font-weight:		100 }
span.code {			font-weight:		500 }
em {				font-weight:		600 }
aside a, h1, h2, h3 {		font-weight:		900 }
pre code span {			font-weight:		900 }

.l {				text-align:		left }
.c, header, nav, footer {	text-align:		center }
.r, aside a {			text-align:		right }
.col2, .col3 {			text-align:		justify }

#key_spec tr td {		text-align:		center }
#key_spec tr td:first-of-type {	text-align:		left }

aside a, footer#f_jur a, #cont a:hover {
				text-decoration:	none }
footer#f_jur a:hover {		text-decoration:	underline }

aside a, #cont {		border-radius:		1vmin }

/* ############################ NON CASCADING ######### */

/* https://css-tricks.com/considerations-styling-pre-tag/ */

pre[data-lang] {		width:			94%;
				padding:		0vw 2vw 1vw 2vw;
				font-weight:		normal;
				background-color:	black;
				color:			green }

pre[data-lang]::before {	content:		attr(data-lang);
				display:		block;
				font-size:		80%;
				width:			auto;
				text-align:		left;
				background-color:	green;
				color:			white;
				margin:			0 -2vw;
				padding:		0.2vw 0.5vw }

pre code span {			color:			white }
#key_spec tr td.y {		color:			green }
#key_spec tr td.n {		color:			red }